4561 lines
208 KiB
XML
4561 lines
208 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<odoo>
|
|
<template id="dance_new_homepage" name="Dance Competition Homepage" inherit_id="website.homepage" priority="20">
|
|
<xpath expr="//*[@id='wrap']" position="replace">
|
|
<div id="wrap" class="dc-site">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=Playfair+Display:ital,wght@1,700;1,800&display=swap');
|
|
|
|
body:has(.dc-site) #wrapwrap > header,
|
|
body:has(.dc-site) #wrapwrap > footer,
|
|
body:has(.dc-site) .o_footer,
|
|
body:has(.dc-site) .o_footer_copyright {
|
|
display: none !important;
|
|
}
|
|
|
|
body:has(.dc-site) #wrapwrap,
|
|
body:has(.dc-site) main {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.dc-site {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #f8f1ff;
|
|
color: #171238;
|
|
font-family: 'DM Sans', sans-serif;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.dc-nav {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0 clamp(2rem, 6vw, 8rem);
|
|
}
|
|
|
|
.dc-nav-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dc-nav-logo img {
|
|
width: 130px;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.dc-nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: clamp(1rem, 2vw, 2.5rem);
|
|
background: rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(10px);
|
|
padding: 10px 30px;
|
|
border-radius: 99px;
|
|
border: 1px solid rgba(135, 43, 213, 0.1);
|
|
}
|
|
|
|
.dc-nav-links a {
|
|
color: #171238;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.dc-nav-links a:hover,
|
|
.dc-nav-links a.active {
|
|
color: #872bd5;
|
|
}
|
|
|
|
.dc-nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.dc-nav-phone {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #171238;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-nav-login {
|
|
width: 110px;
|
|
height: 44px;
|
|
border: 1px solid #872bd5;
|
|
color: #872bd5;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-nav-enroll {
|
|
padding: 0 24px;
|
|
height: 44px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
border-radius: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
box-shadow: 0 8px 16px rgba(112, 34, 186, 0.2);
|
|
}
|
|
|
|
.dc-mobile-toggle {
|
|
display: none;
|
|
width: 44px;
|
|
height: 44px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
color: #872bd5;
|
|
font-size: 1.4rem;
|
|
border: 1px solid rgba(135, 43, 213, 0.2);
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.dc-hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
min-height: 720px;
|
|
overflow: visible;
|
|
z-index: 20;
|
|
background-image: url("/dance_new_theme/static/src/img/hero_bg.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.dc-hero-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: clamp(2rem, 8vw, 10vw);
|
|
max-width: 900px;
|
|
}
|
|
|
|
.dc-hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
color: #872bd5;
|
|
padding: 8px 16px;
|
|
border-radius: 99px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
width: fit-content;
|
|
box-shadow: 0 4px 12px rgba(135, 43, 213, 0.1);
|
|
border: 1px solid rgba(135, 43, 213, 0.1);
|
|
}
|
|
|
|
.dc-hero-title {
|
|
font-size: clamp(2.8rem, 5vw, 4.2rem);
|
|
line-height: 1.1;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
margin-bottom: 1.25rem;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.dc-hero-title em {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.dc-hero-desc {
|
|
font-size: 1.15rem;
|
|
line-height: 1.6;
|
|
color: rgba(23, 18, 56, 0.75);
|
|
margin-bottom: 2rem;
|
|
max-width: 580px;
|
|
}
|
|
|
|
.dc-hero-features {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.dc-feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.dc-feature-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: rgba(23, 18, 56, 0.15);
|
|
}
|
|
|
|
.dc-feature-icon {
|
|
color: #872bd5;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.dc-feature-text {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
color: #171238;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dc-hero-btns {
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.dc-btn-primary {
|
|
padding: 16px 32px;
|
|
border-radius: 14px;
|
|
background: #7022ba;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: 0 10px 20px rgba(135, 43, 213, 0.25);
|
|
}
|
|
|
|
.dc-btn-secondary {
|
|
padding: 16px 32px;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
color: #171238;
|
|
border: 1.5px solid rgba(135, 43, 213, 0.3);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Floating Dancer */
|
|
.dc-hero-dancer {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 5vw;
|
|
bottom: 80px;
|
|
height: 85vh;
|
|
width: auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 20px 40px rgba(112, 34, 186, 0.15));
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
/* Overlay Logo Gradient */
|
|
.dc-bg-logo-overlay {
|
|
position: absolute;
|
|
right: 15%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
height: 70%;
|
|
opacity: 0.05;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Stats Bar at Bottom */
|
|
.dc-stats-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 50%);
|
|
width: min(92%, 1160px);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(15px);
|
|
border-radius: 28px;
|
|
padding: 24px 48px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 5;
|
|
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.dc-stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.dc-stat-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
background: #fdfbff;
|
|
color: #872bd5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2rem;
|
|
box-shadow: 0 4px 12px rgba(135, 43, 213, 0.08);
|
|
}
|
|
|
|
.dc-stat-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dc-stat-value {
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
line-height: 1;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dc-stat-label {
|
|
font-size: 0.85rem;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Section 2: Programs/Features */
|
|
.dc-sec-2 {
|
|
position: relative;
|
|
z-index: 10;
|
|
width: 100%;
|
|
padding: 90px 0 0;
|
|
background: #f8f1ff url("/dance_new_theme/static/src/img/sec2_bg.png") no-repeat center center;
|
|
background-size: 100% 100%; /* Stretch to fit section exactly */
|
|
min-height: auto;
|
|
}
|
|
|
|
.dc-sec-2-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: min(92%, 1240px);
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.dc-sec-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
color: #872bd5;
|
|
padding: 8px 16px;
|
|
border-radius: 99px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.75rem;
|
|
border: 1px solid rgba(135, 43, 213, 0.1);
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
|
|
}
|
|
|
|
.dc-sec-title {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: clamp(2.2rem, 4vw, 3.5rem);
|
|
color: #171238;
|
|
margin-bottom: 0.75rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dc-sec-title em {
|
|
font-family: 'Playfair Display', serif;
|
|
font-style: italic;
|
|
color: #872bd5;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-sec-subtitle {
|
|
font-size: 1.05rem;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
max-width: 600px;
|
|
margin: 0 auto 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Filter Tabs */
|
|
.dc-filter-tabs {
|
|
display: inline-flex;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
padding: 6px;
|
|
border-radius: 99px;
|
|
gap: 4px;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 10px 30px rgba(135, 43, 213, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.dc-filter-btn {
|
|
padding: 10px 24px;
|
|
border-radius: 99px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: #171238;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.dc-filter-btn.active {
|
|
background: #8e44e9;
|
|
color: #fff;
|
|
box-shadow: 0 4px 12px rgba(142, 68, 233, 0.3);
|
|
}
|
|
|
|
/* Grid and Cards */
|
|
.dc-program-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-program-card {
|
|
background: #fdfaff; /* Very light purple background */
|
|
border-radius: 24px;
|
|
padding: 32px;
|
|
border: 1px solid #f0e8f8;
|
|
position: relative;
|
|
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
box-shadow: 0 4px 20px rgba(135, 43, 213, 0.02);
|
|
}
|
|
|
|
.dc-program-card:hover {
|
|
transform: translateY(-8px);
|
|
background: #ffffff;
|
|
box-shadow: 0 30px 60px rgba(112, 34, 186, 0.1);
|
|
border-color: rgba(135, 43, 213, 0.2);
|
|
}
|
|
|
|
.dc-card-status {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
padding: 6px 14px;
|
|
border-radius: 99px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
border: 1px solid currentColor;
|
|
background: #fff;
|
|
z-index: 5;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-active { color: #10b981; border-color: rgba(16, 185, 129, 0.2); }
|
|
.status-full { color: #f43f5e; border-color: rgba(244, 63, 94, 0.2); }
|
|
.status-upcoming { color: #3b82f6; border-color: rgba(59, 130, 246, 0.2); }
|
|
|
|
.dc-card-header {
|
|
position: relative;
|
|
margin-bottom: 12px;
|
|
min-height: 60px; /* Ensure space for badge even with short titles */
|
|
}
|
|
|
|
.dc-card-header h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
margin: 0 85px 4px 0; /* Inline Right Margin to prevent overlap and allow title to wrap naturally */
|
|
color: #171238;
|
|
line-height: 1.2;
|
|
display: block;
|
|
}
|
|
|
|
.dc-card-style {
|
|
font-size: 0.95rem;
|
|
color: #872bd5;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.dc-card-desc {
|
|
font-size: 0.95rem;
|
|
color: #000000;
|
|
line-height: 1.5;
|
|
margin-bottom: 24px;
|
|
height: 3em; /* Fixed height for exactly 2 lines */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2; /* Force truncate at 2 lines */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
opacity: 0.85;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Program Info Table - Matching Image 2 */
|
|
.dc-card-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
background: rgba(135, 43, 213, 0.03); /* Very light purple background */
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
border: 1.5px solid #ece4f5; /* Visible border matching reference */
|
|
position: relative;
|
|
}
|
|
|
|
.dc-detail-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 4px;
|
|
border-right: 1px solid rgba(135, 43, 213, 0.1);
|
|
}
|
|
|
|
.dc-detail-box:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.dc-detail-label {
|
|
font-size: 0.75rem;
|
|
color: #8a8a8a;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.dc-detail-value {
|
|
font-size: 0.85rem;
|
|
color: #171238;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dc-card-seats {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.dc-card-seats i { font-size: 0.6rem; }
|
|
.seats-green { color: #10b981; }
|
|
.seats-orange { color: #f59e0b; }
|
|
|
|
.dc-card-footer {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.2fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.dc-btn-outline {
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
border: 1.5px solid #ece4f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: #171238;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dc-btn-outline:hover {
|
|
background: #fff;
|
|
border-color: #872bd5;
|
|
color: #872bd5;
|
|
}
|
|
|
|
.dc-btn-outline i {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.dc-btn-fill {
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #8e44e9 0%, #7022ba 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
font-size: 0.9rem;
|
|
text-decoration: none;
|
|
gap: 10px;
|
|
box-shadow: 0 4px 12px rgba(112, 34, 186, 0.2);
|
|
}
|
|
|
|
/* Trial Bar */
|
|
.dc-trial-bar {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
z-index: 30;
|
|
transform: translateY(50%);
|
|
background: #fff;
|
|
border-radius: 24px;
|
|
padding: 24px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.03);
|
|
border: 1px solid #f0e8f8;
|
|
}
|
|
|
|
.dc-trial-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-trial-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 14px;
|
|
background: #eff6ff;
|
|
color: #3b82f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.dc-trial-text h4 {
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
margin-bottom: 4px;
|
|
color: #171238;
|
|
}
|
|
|
|
.dc-trial-text p {
|
|
font-size: 0.95rem;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Section 3: Why Choose Us (Laptop Version) */
|
|
.dc-sec-3 {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding: 100px 0 0;
|
|
background: #f8f1ff url("/dance_new_theme/static/src/img/sec3_bg.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow: visible;
|
|
z-index: 9;
|
|
}
|
|
|
|
.dc-sec-3-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: min(94%, 1300px);
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Orbital Layout */
|
|
.dc-orbital-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
margin: 0px 0 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
min-height: 500px;
|
|
}
|
|
|
|
.dc-orbit-side {
|
|
width: 38%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.dc-orbit-left { align-items: flex-end; }
|
|
.dc-orbit-right { align-items: flex-start; }
|
|
|
|
.dc-orbit-node {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 20px 28px;
|
|
background: #ffffff;
|
|
border-radius: 99px;
|
|
border: 1px solid rgba(135, 43, 213, 0.1);
|
|
transition: all 0.4s ease;
|
|
box-shadow: 0 10px 30px rgba(135, 43, 213, 0.04);
|
|
}
|
|
|
|
.dc-orbit-left .dc-orbit-node { flex-direction: row; }
|
|
.dc-orbit-right .dc-orbit-node { flex-direction: row; }
|
|
|
|
.dc-orbit-node:hover {
|
|
transform: scale(1.02);
|
|
background: #ffffff;
|
|
border-color: rgba(135, 43, 213, 0.3);
|
|
box-shadow: 0 20px 40px rgba(135, 43, 213, 0.1);
|
|
}
|
|
|
|
.dc-node-num {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
color: rgba(135, 43, 213, 0.4);
|
|
}
|
|
.dc-orbit-left .dc-node-num { left: -45px; }
|
|
.dc-orbit-right .dc-node-num { right: -45px; }
|
|
|
|
.dc-node-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
min-width: 64px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 1.5rem;
|
|
box-shadow: 0 8px 20px rgba(112, 34, 186, 0.2);
|
|
}
|
|
|
|
.dc-node-text {
|
|
text-align: left;
|
|
}
|
|
.dc-orbit-right .dc-node-text { text-align: left; }
|
|
|
|
.dc-node-text h4 {
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dc-node-text p {
|
|
font-size: 0.9rem;
|
|
color: rgba(23, 18, 56, 0.7);
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Center Dancer Area - Optional visual spacing */
|
|
.dc-orbit-center {
|
|
width: 20%;
|
|
height: 500px;
|
|
}
|
|
|
|
/* Bottom Banner - Centered Design Matching Reference Image */
|
|
/* Bottom Banner - Horizontal Glassmorphism Design */
|
|
.dc-sec3-footer {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
z-index: 10;
|
|
transform: translateY(50%);
|
|
width: min(96%, 1100px);
|
|
margin-inline: auto;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 160px auto 1fr;
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.35);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 40px;
|
|
border: 1.5px solid rgba(255, 255, 255, 0.5);
|
|
padding: 15px 50px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dc-footer-quote {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.dc-quote-icon {
|
|
font-size: 2.5rem;
|
|
color: #7022ba;
|
|
opacity: 0.6;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.dc-footer-quote p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.5;
|
|
color: #1a153d;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
}
|
|
|
|
.dc-footer-quote p em {
|
|
color: #7022ba;
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-footer-divider {
|
|
width: 1px;
|
|
height: 80px;
|
|
background: rgba(112, 34, 186, 0.15);
|
|
}
|
|
|
|
.dc-footer-illustration {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.dc-footer-illustration img {
|
|
height: 100px;
|
|
width: auto;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dc-footer-cta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.dc-footer-cta-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-footer-cta-text h4 {
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.dc-footer-cta-text p {
|
|
font-size: 0.9rem;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
margin: 0;
|
|
}
|
|
|
|
.dc-footer-cta .dc-btn-primary {
|
|
padding: 12px 30px;
|
|
font-size: 0.95rem;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
box-shadow: 0 8px 20px rgba(112, 34, 186, 0.25);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dc-footer-cta .dc-btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 25px rgba(112, 34, 186, 0.35);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dc-sec3-footer { grid-template-columns: 1fr auto 120px auto 1fr; padding: 10px 30px; }
|
|
.dc-footer-quote p { font-size: 1rem; }
|
|
}
|
|
|
|
/* Mobile and Tablet Optimizations (The Storytelling Design) */
|
|
@media (max-width: 992px) {
|
|
.dc-sec-3 {
|
|
min-height: 100vh;
|
|
background: url('/dance_new_theme/static/src/img/mob_sec3_bg01.png') no-repeat center top;
|
|
background-size: 100% 100%; /* Fit background design to the full content height */
|
|
padding: 5px 0 40px; /* Highly reduced top gap */
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dc-sec3-header, .dc-orbital-wrap, .dc-sec3-footer { display: none !important; }
|
|
|
|
.dc-mobile-view {
|
|
display: block !important;
|
|
width: 100%;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Layer 2: Mobile Header */
|
|
.dc-mob-header {
|
|
text-align: center;
|
|
max-width: 500px;
|
|
margin: 0 auto 10px; /* Reduced from 30px */
|
|
}
|
|
.dc-mob-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 3px;
|
|
font-weight: 800;
|
|
font-size: 0.7rem;
|
|
color: #7022ba;
|
|
margin-bottom: 8px;
|
|
}
|
|
.dc-mob-badge::before, .dc-mob-badge::after { content: '✦'; }
|
|
|
|
.dc-mob-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 2.2rem;
|
|
font-weight: 900;
|
|
color: #1a153d;
|
|
line-height: 1.1;
|
|
margin-bottom: 5px; /* Reduced gap */
|
|
}
|
|
.dc-mob-title em {
|
|
font-style: italic;
|
|
color: #7022ba;
|
|
position: relative;
|
|
}
|
|
.dc-mob-title em::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -5px;
|
|
width: 100%;
|
|
height: 10px;
|
|
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 7 Q 25 2, 50 7 T 100 7" fill="none" stroke="%237022ba" stroke-width="2"/></svg>') no-repeat center bottom;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* Layer 3: Rhythm Path Positioning */
|
|
.dc-mob-rhythm-path {
|
|
position: absolute;
|
|
top: 130px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Layer 3 and 4: Floating Story Cards */
|
|
.dc-mob-story-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px; /* Reduced gap between feature cards */
|
|
margin-top: 5px; /* Condensed space */
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.dc-mob-card {
|
|
position: relative;
|
|
width: 85%;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
backdrop-filter: blur(30px);
|
|
-webkit-backdrop-filter: blur(30px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 100px;
|
|
padding: 12px 20px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.m-left { align-self: flex-start; margin-left: -5%; padding-right: 70px; }
|
|
.m-right { align-self: flex-end; margin-right: -5%; flex-direction: row-reverse; padding-left: 70px; }
|
|
|
|
.dc-mob-num-dot {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 900;
|
|
color: #7022ba;
|
|
font-size: 1rem;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.dc-mob-text { flex: 1; padding: 0 12px; }
|
|
.m-left .dc-mob-text { text-align: left; }
|
|
.m-right .dc-mob-text { text-align: right; }
|
|
|
|
.dc-mob-text h4 { font-size: 1rem; font-weight: 800; color: #171238; margin: 0; }
|
|
.dc-mob-text p { font-size: 0.8rem; color: rgba(23, 18, 56, 0.7); margin: 0; line-height: 1.2; }
|
|
|
|
.dc-mob-icon-bubble {
|
|
position: absolute;
|
|
width: 75px;
|
|
height: 75px;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 1.5rem;
|
|
border: 4px solid #fff;
|
|
box-shadow: 0 10px 25px rgba(112, 34, 186, 0.3);
|
|
}
|
|
.m-left .dc-mob-icon-bubble { right: -10px; top: 50%; transform: translateY(-50%); }
|
|
.m-right .dc-mob-icon-bubble { left: -10px; top: 50%; transform: translateY(-50%); }
|
|
|
|
/* Layer 5: Final Call Glass Footer */
|
|
.dc-mob-final-card {
|
|
margin: 40px 15px 0; /* Reduced top margin and added horizontal margin */
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(30px);
|
|
border: 1px solid #fff;
|
|
border-radius: 35px;
|
|
padding: 25px 20px; /* Reduced vertical padding */
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
|
|
text-align: center;
|
|
}
|
|
|
|
.dc-mob-quote {
|
|
display: flex;
|
|
gap: 12px;
|
|
text-align: left;
|
|
margin-bottom: 25px;
|
|
}
|
|
.dc-mob-quote i { font-size: 1.8rem; color: #7022ba; opacity: 0.5; }
|
|
.dc-mob-quote p { font-size: 1rem; font-weight: 600; color: #1a153d; line-height: 1.5; margin: 0; }
|
|
.dc-mob-quote p em { color: #7022ba; font-style: italic; font-weight: 800; }
|
|
|
|
.dc-mob-cta-title { font-size: 1.6rem; font-weight: 900; color: #171238; margin-bottom: 8px; }
|
|
.dc-mob-cta-sub { font-size: 0.95rem; color: rgba(23, 18, 56, 0.6); margin-bottom: 25px; }
|
|
|
|
.dc-mob-primary-btn {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
border-radius: 15px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
padding: 18px;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
box-shadow: 0 10px 20px rgba(112, 34, 186, 0.3);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dc-footer-cta { flex-direction: column; text-align: center; }
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dc-program-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.dc-hero-dancer {
|
|
height: 70vh;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.dc-nav {
|
|
padding: 0 1rem;
|
|
height: 70px;
|
|
top: 10px;
|
|
}
|
|
.dc-nav-logo img {
|
|
width: 100px;
|
|
}
|
|
.dc-nav-links {
|
|
display: none !important;
|
|
}
|
|
.dc-nav-phone {
|
|
display: none !important;
|
|
}
|
|
.dc-nav-login {
|
|
display: none !important;
|
|
}
|
|
.dc-nav-enroll {
|
|
display: none !important;
|
|
}
|
|
.dc-mobile-toggle {
|
|
display: flex !important;
|
|
position: relative;
|
|
z-index: 101;
|
|
}
|
|
.dc-hero-dancer {
|
|
opacity: 0.2;
|
|
right: -20%;
|
|
height: 60vh;
|
|
}
|
|
.dc-hero-content {
|
|
max-width: 100%;
|
|
padding-right: 1.5rem;
|
|
padding-left: 1.5rem;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
.dc-hero-features {
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.dc-hero-btns {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dc-hero {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
padding-bottom: 40px;
|
|
}
|
|
.dc-hero-content {
|
|
padding: 100px 1.5rem 20px;
|
|
}
|
|
.dc-hero-title {
|
|
font-size: 2.8rem;
|
|
}
|
|
.dc-hero-features {
|
|
gap: 1rem;
|
|
}
|
|
.dc-feature-divider {
|
|
display: none;
|
|
}
|
|
.dc-hero-btns {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
max-width: 320px;
|
|
}
|
|
|
|
/* Section 2 Mobile Improvements */
|
|
.dc-sec-2 { padding-top: 40px; }
|
|
.dc-sec-2-content { padding: 0 10px; }
|
|
.dc-sec-title { font-size: 2.2rem; margin-bottom: 15px; }
|
|
.dc-sec-subtitle {
|
|
position: relative;
|
|
padding-bottom: 30px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-sec-subtitle::after {
|
|
content: '\f005';
|
|
font-family: 'FontAwesome';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #7022ba;
|
|
font-size: 14px;
|
|
background: linear-gradient(to right, rgba(135,43,213,0.3) 100%, transparent 0%) left center / 35px 2px no-repeat,
|
|
linear-gradient(to left, rgba(135,43,213,0.3) 100%, transparent 0%) right center / 35px 2px no-repeat;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Filter Tabs */
|
|
.dc-filter-tabs {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
width: calc(100% + 1rem);
|
|
margin: 0 -0.5rem 1.5rem;
|
|
justify-content: flex-start;
|
|
padding: 10px 0.5rem;
|
|
scrollbar-width: none;
|
|
gap: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
.dc-filter-tabs::-webkit-scrollbar { display: none; }
|
|
.dc-filter-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
background: #fff;
|
|
border: 1px solid rgba(135, 43, 213, 0.1);
|
|
padding: 12px 20px;
|
|
border-radius: 99px;
|
|
color: #171238;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.03);
|
|
}
|
|
.dc-filter-btn.active {
|
|
background: #872bd5;
|
|
color: white;
|
|
}
|
|
.dc-filter-btn[data-filter="all"]::before { content: '\f009'; font-family: 'FontAwesome'; }
|
|
.dc-filter-btn[data-filter="classical"]::before { content: '\f19c'; font-family: 'FontAwesome'; }
|
|
.dc-filter-btn[data-filter="western"]::before { content: '\f006'; font-family: 'FontAwesome'; }
|
|
.dc-filter-btn[data-filter="fitness"]::before { content: '\f21e'; font-family: 'FontAwesome'; }
|
|
.dc-filter-btn[data-filter="folk"]::before { content: '\f1e3'; font-family: 'FontAwesome'; }
|
|
|
|
/* Grid and Cards */
|
|
.dc-program-grid {
|
|
display: flex !important;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
gap: 15px;
|
|
width: calc(100% + 1rem);
|
|
margin-left: -0.5rem;
|
|
padding: 10px 0.5rem 10px 0.5rem;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.dc-program-grid::-webkit-scrollbar { display: none; }
|
|
.dc-program-card {
|
|
flex: 0 0 88%;
|
|
scroll-snap-align: center;
|
|
text-align: center;
|
|
padding: 25px 20px;
|
|
}
|
|
.dc-card-status {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: transparent;
|
|
border: 1px solid currentColor;
|
|
border-radius: 99px;
|
|
}
|
|
.dc-card-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: auto;
|
|
}
|
|
.dc-card-header::before {
|
|
content: '\f182';
|
|
font-family: 'FontAwesome';
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 70px;
|
|
height: 70px;
|
|
background: #f3e8ff;
|
|
border-radius: 50%;
|
|
color: #872bd5;
|
|
font-size: 30px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 5px 15px rgba(135,43,213,0.1);
|
|
}
|
|
.dc-card-header h3 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
.dc-card-style {
|
|
margin-bottom: 15px;
|
|
}
|
|
.dc-detail-box {
|
|
padding: 10px 5px;
|
|
border-right: 1px solid rgba(135,43,213,0.1) !important;
|
|
}
|
|
.dc-detail-box:nth-child(1)::before { content: '\f080'; font-family: 'FontAwesome'; color: #872bd5; display: block; margin-bottom: 5px; font-size: 16px; }
|
|
.dc-detail-box:nth-child(2)::before { content: '\f0c0'; font-family: 'FontAwesome'; color: #872bd5; display: block; margin-bottom: 5px; font-size: 16px; }
|
|
.dc-detail-box:nth-child(3)::before { content: '\f073'; font-family: 'FontAwesome'; color: #872bd5; display: block; margin-bottom: 5px; font-size: 16px; }
|
|
.dc-detail-label {
|
|
color: #171238;
|
|
font-weight: 800;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dc-detail-value {
|
|
color: #872bd5;
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
}
|
|
.dc-card-footer {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.dc-btn-outline, .dc-btn-fill {
|
|
font-size: 0.8rem;
|
|
padding: 0;
|
|
height: 42px;
|
|
}
|
|
|
|
/* Pagination */
|
|
.dc-mobile-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin: 10px 0 30px 0;
|
|
}
|
|
.dc-page-btn {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
border: 1px solid rgba(135,43,213,0.15);
|
|
color: #7022ba;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
box-shadow: 0 4px 10px rgba(112,34,186,0.05);
|
|
cursor: pointer;
|
|
}
|
|
.dc-page-dots {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.dc-page-dots span {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid #872bd5;
|
|
display: inline-block;
|
|
}
|
|
.dc-page-dots span.active {
|
|
background: #872bd5;
|
|
}
|
|
|
|
/* Trial Bar */
|
|
.dc-trial-bar {
|
|
margin: 10px 0 30px;
|
|
background: rgba(246, 240, 255, 0.8);
|
|
border-radius: 20px;
|
|
padding: 25px 20px;
|
|
transform: none;
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr;
|
|
grid-template-areas:
|
|
"icon text"
|
|
"btn btn";
|
|
gap: 15px 20px;
|
|
text-align: left;
|
|
}
|
|
.dc-trial-info {
|
|
display: contents;
|
|
}
|
|
.dc-trial-icon {
|
|
grid-area: icon;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #872bd5 !important;
|
|
color: white !important;
|
|
border-radius: 50% !important;
|
|
font-size: 1.2rem;
|
|
}
|
|
.dc-trial-text {
|
|
grid-area: text;
|
|
}
|
|
.dc-trial-text h4 {
|
|
font-size: 1.1rem;
|
|
font-weight: 800;
|
|
}
|
|
.dc-trial-bar .dc-btn-fill {
|
|
grid-area: btn;
|
|
width: 100%;
|
|
height: 48px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dc-stats-bar {
|
|
position: relative;
|
|
bottom: 0;
|
|
left: 0;
|
|
transform: none;
|
|
width: calc(100% - 2rem);
|
|
margin: 2rem auto 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
padding: 1.5rem;
|
|
border-radius: 20px;
|
|
}
|
|
.dc-stat-item {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Mobile Menu styles */
|
|
.dc-mobile-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 80%;
|
|
max-width: 300px;
|
|
height: 100vh;
|
|
background: #fff;
|
|
z-index: 200;
|
|
transition: right 0.3s ease;
|
|
padding: 80px 2rem 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
box-shadow: -10px 0 30px rgba(0,0,0,0.1);
|
|
}
|
|
.dc-mobile-nav.active {
|
|
right: 0;
|
|
}
|
|
.dc-mobile-nav a {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: #171238;
|
|
text-decoration: none;
|
|
}
|
|
.dc-mobile-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
font-size: 1.5rem;
|
|
color: #872bd5;
|
|
}
|
|
.dc-mobile-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 199;
|
|
display: none;
|
|
}
|
|
.dc-mobile-overlay.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Section 4: Upcoming Events */
|
|
.dc-sec-4 {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: auto;
|
|
padding: 130px 0 0;
|
|
background: url("/dance_new_theme/static/src/img/sec4_bg.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.dc-sec-4-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: min(94%, 1300px);
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.dc-sec4-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: #ffffff;
|
|
padding: 8px 24px;
|
|
border-radius: 99px;
|
|
color: #7022ba;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 1px;
|
|
box-shadow: 0 10px 25px rgba(112, 34, 186, 0.1);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.dc-sec4-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: clamp(2.5rem, 5vw, 4.2rem);
|
|
font-weight: 800;
|
|
color: #171238;
|
|
line-height: 1.1;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dc-sec4-title em {
|
|
font-style: italic;
|
|
color: #7022ba;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.dc-sec4-subtitle {
|
|
font-size: 1.15rem;
|
|
color: rgba(23, 18, 56, 0.7);
|
|
max-width: 650px;
|
|
margin: 0 auto 30px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dc-sec4-main-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.15fr 0.85fr;
|
|
gap: 40px;
|
|
align-items: center;
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-sec4-left-card {
|
|
position: relative;
|
|
width: 100%;
|
|
border-radius: 40px;
|
|
overflow: hidden;
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dc-sec4-left-card img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.dc-card-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 35px 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: linear-gradient(90deg, rgba(20, 15, 50, 0.98) 0%, rgba(20, 15, 50, 0.8) 35%, transparent 70%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dc-card-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
padding: 5px 14px;
|
|
border-radius: 99px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
margin-bottom: 20px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.dc-card-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 2.1rem;
|
|
font-weight: 900;
|
|
line-height: 1.1;
|
|
margin-bottom: 5px;
|
|
color: #ffffff;
|
|
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.dc-card-year {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.9rem;
|
|
font-weight: 900;
|
|
color: #a346f2;
|
|
margin-bottom: 15px;
|
|
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.dc-card-content-divider {
|
|
width: 40px;
|
|
height: 2px;
|
|
background: #a346f2;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.dc-card-desc {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
color: #ffffff !important;
|
|
max-width: 280px;
|
|
margin-bottom: 25px;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.dc-card-info-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.dc-card-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dc-card-info-item i {
|
|
font-size: 1rem;
|
|
color: #a346f2;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.dc-card-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
color: white !important;
|
|
padding: 12px 24px;
|
|
border-radius: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
text-decoration: none !important;
|
|
width: fit-content;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 10px 20px rgba(112, 34, 186, 0.3);
|
|
}
|
|
|
|
.dc-card-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 30px rgba(112, 34, 186, 0.4);
|
|
}
|
|
|
|
/* Right Side: Upcoming Moments Timeline */
|
|
.dc-sec4-right-timeline {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.dc-timeline-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.dc-timeline-header-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: rgba(112, 34, 186, 0.2);
|
|
}
|
|
|
|
.dc-timeline-header span {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: #7022ba;
|
|
}
|
|
|
|
.dc-timeline-list {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
/* Vertical Timeline Line */
|
|
.dc-timeline-list::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: rgba(112, 34, 186, 0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.dc-event-item {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Timeline Dots/Points */
|
|
.dc-event-dot {
|
|
position: absolute;
|
|
left: -25px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 11px;
|
|
height: 11px;
|
|
background: #7022ba;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 4px rgba(112, 34, 186, 0.1);
|
|
z-index: 2;
|
|
}
|
|
|
|
.dc-event-card {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid #ffffff;
|
|
padding: 10px 20px;
|
|
border-radius: 18px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
|
|
transition: all 0.3s ease;
|
|
width: 100%;
|
|
}
|
|
|
|
.dc-event-card:hover {
|
|
transform: translateX(5px);
|
|
background: #ffffff;
|
|
box-shadow: 0 10px 30px rgba(112, 34, 186, 0.06);
|
|
}
|
|
|
|
.dc-event-card-date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 45px;
|
|
padding-right: 15px;
|
|
border-right: 1.5px solid rgba(112, 34, 186, 0.1);
|
|
}
|
|
|
|
.dc-event-card-date .dc-month {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
color: #7022ba;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dc-event-card-date .dc-day {
|
|
font-size: 1.3rem;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
line-height: 1;
|
|
}
|
|
|
|
.dc-event-icon-wrap {
|
|
width: 44px;
|
|
height: 44px;
|
|
min-width: 44px;
|
|
background: #f8f1ff;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.dc-event-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.dc-event-info h4 {
|
|
font-size: 0.95rem;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dc-event-location {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 0.75rem;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
}
|
|
|
|
.dc-event-badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 6px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.dc-badge-purple { background: #f0e6ff; color: #7022ba; }
|
|
.dc-badge-orange { background: #fff2e6; color: #ff8c00; }
|
|
.dc-badge-green { background: #e6fff0; color: #00b341; }
|
|
.dc-badge-blue { background: #e6f7ff; color: #0088ff; }
|
|
|
|
.dc-event-action {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #f8f1ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
font-size: 0.8rem;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.dc-event-card:hover .dc-event-action {
|
|
background: #7022ba;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Bottom Stats Banner Redesign (Matching Image) */
|
|
.dc-sec4-stats-bar {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
z-index: 30;
|
|
transform: translateY(50%);
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 0.85); /* Slightly more opaque to ensure it's visible */
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
border-radius: 45px;
|
|
padding: 30px 50px; /* Comfortably contain everything */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 20px 50px rgba(112, 34, 186, 0.1);
|
|
gap: 30px;
|
|
overflow: visible; /* Ensure shadows show but we'll use flex to keep content inside */
|
|
}
|
|
|
|
.dc-sec4-stat-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dc-sec4-stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
padding-right: 15px;
|
|
flex: 1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dc-sec4-stat-item:not(:last-child) {
|
|
border-right: 1.5px solid rgba(135, 43, 213, 0.08);
|
|
}
|
|
|
|
.dc-stat-icon-circle {
|
|
width: 50px;
|
|
height: 50px;
|
|
min-width: 50px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
font-size: 1.1rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), inset 0 0 10px rgba(135, 43, 213, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.dc-stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-stat-value {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: #1a153d;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.dc-stat-label {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: rgba(23, 18, 56, 0.6);
|
|
text-transform: none;
|
|
margin-top: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dc-sec4-stat-cta {
|
|
padding-left: 40px;
|
|
border-left: 1.5px solid rgba(135, 43, 213, 0.15);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
flex: 0 0 auto; /* Ensure this group doesn't squeeze and stays contained */
|
|
}
|
|
|
|
.dc-cta-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.dc-cta-text h4 {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 1.2rem;
|
|
font-weight: 800;
|
|
color: #1a153d; /* Darker navy for better contrast */
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dc-cta-text p {
|
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 0.8rem;
|
|
color: rgba(23, 18, 56, 0.7);
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.dc-cta-btn {
|
|
background: linear-gradient(135deg, #8e44e9 0%, #7022ba 100%);
|
|
color: white !important;
|
|
padding: 12px 28px;
|
|
border-radius: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
text-decoration: none !important;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
box-shadow: 0 10px 20px rgba(112, 34, 186, 0.2);
|
|
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
|
|
.dc-cta-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 30px rgba(112, 34, 186, 0.3);
|
|
}
|
|
|
|
.dc-cta-btn i {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dc-cta-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 15px 30px rgba(112, 34, 186, 0.3);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dc-sec4-stats-bar { transform: none; margin-top: 30px; margin-bottom: 30px; flex-direction: column; padding: 30px; gap: 30px; }
|
|
.dc-sec4-stat-group { width: 100%; flex-wrap: wrap; gap: 20px; }
|
|
.dc-sec4-stat-item { border-right: none; min-width: 150px; }
|
|
.dc-sec4-stat-cta { border-left: none; padding-left: 0; border-top: 1px solid rgba(135, 43, 213, 0.15); padding-top: 20px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Section 4 Mobile View Adjustments */
|
|
.dc-sec-4 {
|
|
padding: 60px 0 40px;
|
|
}
|
|
.dc-sec-4-content {
|
|
padding: 0 15px;
|
|
}
|
|
.dc-sec4-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
.dc-sec4-subtitle {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 30px;
|
|
}
|
|
.dc-sec4-main-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
/* Featured Event Card Mobile */
|
|
.dc-sec4-left-card {
|
|
border-radius: 20px;
|
|
}
|
|
.dc-sec4-left-card img {
|
|
min-height: 420px;
|
|
object-fit: cover;
|
|
}
|
|
.dc-card-overlay {
|
|
padding: 25px 20px;
|
|
background: linear-gradient(0deg, rgba(20, 15, 50, 0.95) 0%, rgba(20, 15, 50, 0.7) 40%, transparent 100%);
|
|
justify-content: flex-end;
|
|
}
|
|
.dc-card-badge {
|
|
margin-bottom: 10px;
|
|
}
|
|
.dc-card-title {
|
|
font-size: 1.8rem;
|
|
}
|
|
.dc-card-year {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
.dc-card-content-divider {
|
|
margin-bottom: 15px;
|
|
}
|
|
.dc-card-desc {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-card-info-list {
|
|
margin-bottom: 20px;
|
|
gap: 8px;
|
|
}
|
|
.dc-card-info-item {
|
|
font-size: 0.75rem;
|
|
}
|
|
.dc-card-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Timeline Mobile */
|
|
.dc-sec4-right-timeline {
|
|
padding-left: 0;
|
|
}
|
|
.dc-timeline-header {
|
|
margin-bottom: 25px;
|
|
}
|
|
.dc-timeline-header span {
|
|
font-size: 1.2rem;
|
|
}
|
|
.dc-timeline-list {
|
|
padding-left: 20px;
|
|
}
|
|
.dc-timeline-list::before {
|
|
left: 0;
|
|
}
|
|
.dc-event-dot {
|
|
left: -25px;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.dc-event-card {
|
|
padding: 12px 15px;
|
|
border-radius: 16px;
|
|
gap: 12px;
|
|
}
|
|
.dc-event-card-date {
|
|
padding-right: 10px;
|
|
min-width: 45px;
|
|
}
|
|
.dc-event-card-date .dc-day {
|
|
font-size: 1.1rem;
|
|
}
|
|
.dc-event-icon-wrap {
|
|
width: 36px;
|
|
height: 36px;
|
|
min-width: 36px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.dc-event-info h4 {
|
|
font-size: 0.9rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 6px;
|
|
}
|
|
.dc-event-location {
|
|
font-size: 0.75rem;
|
|
margin-bottom: 6px;
|
|
}
|
|
.dc-event-action {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Stats Bar Mobile */
|
|
.dc-sec4-stats-bar {
|
|
margin-top: 20px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.dc-sec4-stat-group {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: 20px 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 5px;
|
|
width: 100%;
|
|
box-shadow: 0 5px 20px rgba(112, 34, 186, 0.05);
|
|
border: 1px solid #ffffff;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.dc-sec4-stat-group::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.dc-sec4-stat-item {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding-right: 0;
|
|
border-right: none !important;
|
|
min-width: 80px;
|
|
flex: 1;
|
|
}
|
|
.dc-stat-icon-circle {
|
|
width: 38px;
|
|
height: 38px;
|
|
min-width: 38px;
|
|
font-size: 0.9rem;
|
|
margin: 0 auto;
|
|
}
|
|
.dc-stat-value {
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
}
|
|
.dc-stat-label {
|
|
font-size: 0.65rem;
|
|
white-space: normal;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
/* CTA Area Mobile */
|
|
.dc-sec4-stat-cta {
|
|
background: rgba(243, 232, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 20px;
|
|
padding: 15px;
|
|
width: 100%;
|
|
border-top: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
.dc-cta-text {
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.dc-cta-text h4 {
|
|
font-size: 1.05rem;
|
|
color: #7022ba;
|
|
margin-bottom: 2px;
|
|
}
|
|
.dc-cta-text p {
|
|
font-size: 0.75rem;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
}
|
|
.dc-cta-btn {
|
|
width: auto;
|
|
white-space: nowrap;
|
|
padding: 10px 14px;
|
|
font-size: 0.8rem;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
/* Section 5: Success Stories and Testimonials */
|
|
.dc-sec-5 {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: url("/dance_new_theme/static/src/img/sucessstory_bg.png") no-repeat center center;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
/* Success Stories Layer 1 */
|
|
.dc-sec5-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 130px 50px 100px 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.dc-sec5-badge {
|
|
background: #ffffff;
|
|
padding: 10px 24px;
|
|
border-radius: 50px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
}
|
|
.dc-sec5-badge i {
|
|
color: #7022ba;
|
|
font-size: 16px;
|
|
}
|
|
.dc-sec5-badge span {
|
|
color: #1a1a2e;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
.dc-sec5-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 56px;
|
|
color: #1a1a2e;
|
|
font-weight: 700;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
.dc-sec5-title em {
|
|
color: #872bd5;
|
|
font-style: normal;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dc-sec5-title em::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 12px;
|
|
background: url("data:image/svg+xml,%3Csvg width='100' height='12' viewBox='0 0 100 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5C23.5 3.5 54.5 1.5 98 8.5' stroke='%23d3abf5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom;
|
|
background-size: 100% auto;
|
|
}
|
|
.dc-sec5-subtitle {
|
|
font-family: 'DM Sans', sans-serif;
|
|
color: #4a4a5a;
|
|
font-size: 18px;
|
|
max-width: 600px;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
margin-bottom: 40px;
|
|
} /* Center Column Styling */
|
|
.dc-sec5-center-col {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 5;
|
|
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
.dc-sec5-center-col.dc-card-rotating {
|
|
opacity: 0 !important;
|
|
transform: scale(0.95) translateY(15px) !important;
|
|
filter: blur(2px);
|
|
}
|
|
|
|
/* Dashed Orbital Ring */
|
|
.dc-sec5-orbital {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 520px;
|
|
height: 520px;
|
|
border: 3px dashed rgba(255, 255, 255, 1);
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
box-shadow: 0 0 40px rgba(255, 255, 255, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.4);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Crown Badge */
|
|
.dc-sec5-crown {
|
|
position: relative;
|
|
z-index: 5;
|
|
width: 56px;
|
|
height: 56px;
|
|
background: #872bd5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
border: 4px solid rgba(246, 239, 252, 0.7);
|
|
box-shadow: 0 8px 25px rgba(135, 43, 213, 0.25);
|
|
margin-bottom: 12px;
|
|
margin-top: -28px;
|
|
}
|
|
|
|
/* Featured Story Label */
|
|
.dc-sec5-feat-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-feat-label span {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 13px;
|
|
letter-spacing: 2.5px;
|
|
text-transform: uppercase;
|
|
color: #5a1a9e;
|
|
}
|
|
.dc-sec5-laurel {
|
|
width: 22px;
|
|
height: 22px;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
/* Student Photo */
|
|
.dc-sec5-photo-ring {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #7022ba 0%, #c084f5 50%, #e8d5f8 100%);
|
|
padding: 5px;
|
|
margin-bottom: 12px;
|
|
box-shadow: 0 12px 35px rgba(112, 34, 186, 0.18);
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 4px solid #fff;
|
|
}
|
|
|
|
/* Student Name */
|
|
.dc-sec5-name {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #1a1a2e;
|
|
margin: 0 0 4px 0;
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-role {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 14px;
|
|
color: #5a5a6a;
|
|
margin: 0 0 12px 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Achievement Pill */
|
|
.dc-sec5-achieve {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(135, 43, 213, 0.08);
|
|
color: #5a1a9e;
|
|
padding: 8px 22px;
|
|
border-radius: 50px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 14px;
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-achieve i {
|
|
color: #872bd5;
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Stars */
|
|
.dc-sec5-stars {
|
|
display: flex;
|
|
gap: 5px;
|
|
margin-bottom: 16px;
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-stars i {
|
|
color: #f5a623;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Quote */
|
|
.dc-sec5-quote {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 14.5px;
|
|
color: #4a4a5a;
|
|
line-height: 1.7;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
z-index: 1;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-sec5-quote-mark {
|
|
color: #872bd5;
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
font-family: Georgia, serif;
|
|
margin-right: 4px;
|
|
vertical-align: top;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Pagination Dots */
|
|
.dc-sec5-dots {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
margin-top: 5px;
|
|
z-index: 1;
|
|
}
|
|
.dc-sec5-dot {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
background: rgba(200, 180, 220, 0.4);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.dc-sec5-dot.active {
|
|
background: #7022ba;
|
|
}
|
|
|
|
/* Nav Controls */
|
|
.dc-sec5-nav {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: -15px;
|
|
right: -15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
transform: translateY(-50%);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
.dc-sec5-nav-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: #872bd5;
|
|
color: #fff;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
box-shadow: 0 8px 20px rgba(135, 43, 213, 0.3);
|
|
transition: all 0.3s ease;
|
|
pointer-events: auto;
|
|
}
|
|
.dc-sec5-nav-btn:hover {
|
|
background: #7022ba;
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* Main Layout Row */
|
|
.dc-sec5-main-row {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 90px;
|
|
width: 100%;
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Side Columns */
|
|
.dc-sec5-side-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
width: 320px;
|
|
}
|
|
|
|
/* Story Card */
|
|
.dc-story-card {
|
|
background: rgba(250, 237, 253);
|
|
border-radius: 12px;
|
|
padding: 24px 30px 24px 24px;
|
|
position: relative;
|
|
box-shadow: 0 10px 30px rgba(112, 34, 186, 0.05);
|
|
transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
}
|
|
.dc-story-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 40px rgba(112, 34, 186, 0.1);
|
|
}
|
|
.dc-story-card.dc-card-rotating {
|
|
opacity: 0 !important;
|
|
transform: perspective(1000px) rotateY(10deg) scale(0.95) translateY(10px) !important;
|
|
filter: blur(2px);
|
|
}
|
|
.dc-story-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 30px;
|
|
bottom: 30px;
|
|
right: 0;
|
|
width: 6px;
|
|
background: #a561e8;
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
.dc-card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #7022ba;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
margin-left: 36px;
|
|
}
|
|
.dc-card-top i {
|
|
font-size: 14px;
|
|
color: #872bd5;
|
|
}
|
|
|
|
.dc-card-stars {
|
|
color: #f5a623;
|
|
font-size: 14px;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
gap: 4px;
|
|
margin-left: 36px;
|
|
}
|
|
|
|
.dc-card-body {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-card-quote-icon {
|
|
color: #a561e8;
|
|
font-size: 36px;
|
|
font-family: Georgia, serif;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-top: -5px;
|
|
width: 24px;
|
|
text-align: left;
|
|
flex-shrink: 0;
|
|
}
|
|
.dc-card-text {
|
|
color: #4a4a5a;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 13.5px;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
}
|
|
|
|
.dc-card-divider {
|
|
border-top: 1px dashed rgba(165, 97, 232, 0.3);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.dc-card-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.dc-card-author-img {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
.dc-card-author-info h4 {
|
|
color: #7022ba;
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin: 0 0 2px 0;
|
|
}
|
|
.dc-card-author-info p {
|
|
color: #5a5a6a;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Section 5 Mobile */
|
|
.dc-sec5-content {
|
|
padding: 60px 15px 40px 15px;
|
|
}
|
|
.dc-sec5-title {
|
|
font-size: 2.2rem;
|
|
}
|
|
.dc-sec5-subtitle {
|
|
font-size: 0.95rem;
|
|
margin-bottom: 30px;
|
|
}
|
|
.dc-sec5-main-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Main featured story layout position */
|
|
.dc-sec5-center-col {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
background: rgba(253, 245, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid #ffffff;
|
|
border-radius: 30px;
|
|
padding: 40px 15px 25px;
|
|
box-shadow: 0 10px 30px rgba(112, 34, 186, 0.05);
|
|
}
|
|
|
|
.dc-sec5-orbital {
|
|
display: none;
|
|
}
|
|
|
|
.dc-sec5-crown {
|
|
position: absolute;
|
|
top: 0;
|
|
margin-top: -24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 48px;
|
|
height: 48px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.dc-sec5-feat-label {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dc-sec5-photo-ring {
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
.dc-sec5-name {
|
|
font-size: 1.5rem;
|
|
}
|
|
.dc-sec5-role {
|
|
font-size: 0.85rem;
|
|
}
|
|
.dc-sec5-achieve {
|
|
padding: 6px 14px;
|
|
font-size: 0.75rem;
|
|
}
|
|
.dc-sec5-quote {
|
|
font-size: 0.8rem;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.dc-sec5-nav {
|
|
top: 50%;
|
|
left: -12px;
|
|
right: -12px;
|
|
}
|
|
.dc-sec5-nav-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dc-sec5-side-col {
|
|
display: contents;
|
|
}
|
|
|
|
/* Story Cards Mobile Layout */
|
|
.dc-story-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: auto auto 1fr;
|
|
padding: 15px;
|
|
gap: 0;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.dc-story-card::after {
|
|
right: auto;
|
|
left: 0;
|
|
top: 15px;
|
|
bottom: 15px;
|
|
width: 4px;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.dc-card-top {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
margin-left: 15px;
|
|
font-size: 9px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.dc-card-stars {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
margin-left: 15px;
|
|
font-size: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.dc-card-body {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
margin-bottom: 0;
|
|
padding-left: 15px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dc-card-quote-icon {
|
|
font-size: 22px;
|
|
margin-top: -3px;
|
|
width: 12px;
|
|
}
|
|
|
|
.dc-card-text {
|
|
font-size: 0.7rem;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.dc-card-divider {
|
|
display: none;
|
|
}
|
|
|
|
.dc-card-author {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 3;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
text-align: center;
|
|
width: 95px;
|
|
}
|
|
|
|
.dc-card-author-img {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
|
|
.dc-card-author-info h4 {
|
|
font-size: 0.75rem;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.dc-card-author-info p {
|
|
font-size: 0.6rem;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="dc-mobile-overlay" id="mobileOverlay"></div>
|
|
<div class="dc-mobile-nav" id="mobileNav">
|
|
<span class="dc-mobile-close" id="closeMenu"><i class="fa fa-times"/></span>
|
|
<a href="/">Home</a>
|
|
<a href="#programs">Programs</a>
|
|
<a href="#events">Events</a>
|
|
<a href="#about">About Academy</a>
|
|
<a href="/contact">Contact</a>
|
|
<div class="mt-4 pt-4 border-top">
|
|
<a href="/web/login" class="d-block mb-3">Login <i class="fa fa-user-circle-o ms-2"/></a>
|
|
<a href="/enroll" class="dc-nav-enroll w-100">Enroll Now <i class="fa fa-arrow-right ms-2"/></a>
|
|
</div>
|
|
</div>
|
|
<section class="dc-hero" aria-label="Dance Competition School ERP homepage">
|
|
<img src="/dance_new_theme/static/src/img/new_logo.png" class="dc-bg-logo-overlay" alt=""/>
|
|
|
|
<header class="dc-nav" aria-label="Main navigation">
|
|
<a class="dc-nav-logo" href="/">
|
|
<img src="/dance_new_theme/static/src/img/new_logo.png"
|
|
alt="Dance Competition School ERP"/>
|
|
</a>
|
|
<nav class="dc-nav-links">
|
|
<a class="active" href="/">Home</a>
|
|
<a href="#programs">Programs</a>
|
|
<a href="#events">Events</a>
|
|
<a href="#about">About Academy</a>
|
|
<a href="/contact">Contact</a>
|
|
</nav>
|
|
<div class="dc-nav-actions">
|
|
<span class="dc-nav-phone">
|
|
<i class="fa fa-phone"/>
|
|
<span>+1 555-555-5556</span>
|
|
</span>
|
|
<a class="dc-nav-login" href="/web/login">
|
|
<span>Login</span>
|
|
<i class="fa fa-user-circle-o"/>
|
|
</a>
|
|
<a class="dc-nav-enroll" href="/enroll">
|
|
<span>Enroll Now</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
<div class="dc-mobile-toggle" id="menuToggle">
|
|
<i class="fa fa-bars"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toggle = document.getElementById('menuToggle');
|
|
const close = document.getElementById('closeMenu');
|
|
const nav = document.getElementById('mobileNav');
|
|
const overlay = document.getElementById('mobileOverlay');
|
|
|
|
function toggleMenu() {
|
|
nav.classList.toggle('active');
|
|
overlay.classList.toggle('active');
|
|
document.body.style.overflow = nav.classList.contains('active') ? 'hidden' : '';
|
|
}
|
|
|
|
if (toggle) toggle.addEventListener('click', toggleMenu);
|
|
if (close) close.addEventListener('click', toggleMenu);
|
|
if (overlay) overlay.addEventListener('click', toggleMenu);
|
|
|
|
// Close menu on link click
|
|
nav.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', toggleMenu);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="dc-hero-content">
|
|
<div class="dc-hero-badge">
|
|
<i class="fa fa-star-o"/>
|
|
<span>Nurturing Talent. Building Futures.</span>
|
|
</div>
|
|
<h1 class="dc-hero-title">
|
|
Where Passion<br/>
|
|
Meets <em>Performance</em>
|
|
</h1>
|
|
<p class="dc-hero-desc">
|
|
A complete Dance Academy ERP to manage, teach, and inspire the next generation of performers.
|
|
</p>
|
|
|
|
<div class="dc-hero-features">
|
|
<div class="dc-feature-item">
|
|
<i class="dc-feature-icon fa fa-users"/>
|
|
<span class="dc-feature-text">Expert Instructors</span>
|
|
</div>
|
|
<div class="dc-feature-divider"></div>
|
|
<div class="dc-feature-item">
|
|
<i class="dc-feature-icon fa fa-trophy"/>
|
|
<span class="dc-feature-text">Competitive Exposure</span>
|
|
</div>
|
|
<div class="dc-feature-divider"></div>
|
|
<div class="dc-feature-item">
|
|
<i class="dc-feature-icon fa fa-line-chart"/>
|
|
<span class="dc-feature-text">Personalized Growth</span>
|
|
</div>
|
|
<div class="dc-feature-divider"></div>
|
|
<div class="dc-feature-item">
|
|
<i class="dc-feature-icon fa fa-calendar"/>
|
|
<span class="dc-feature-text">Events & Workshops</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dc-hero-btns">
|
|
<a href="#programs" class="dc-btn-primary">
|
|
<span>Explore Programs</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
<a href="/registration" class="dc-btn-secondary">
|
|
<span>Register a Student</span>
|
|
<i class="fa fa-user-plus"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<img class="dc-hero-dancer"
|
|
src="/dance_new_theme/static/src/img/hero_img.png"
|
|
alt="Ballet dancer performing"/>
|
|
|
|
<div class="dc-stats-bar">
|
|
<div class="dc-stat-item">
|
|
<div class="dc-stat-icon"><i class="fa fa-smile-o"/></div>
|
|
<div class="dc-stat-info">
|
|
<span class="dc-stat-value">500+</span>
|
|
<span class="dc-stat-label">Happy Students</span>
|
|
</div>
|
|
</div>
|
|
<div class="dc-stat-item">
|
|
<div class="dc-stat-icon"><i class="fa fa-id-badge"/></div>
|
|
<div class="dc-stat-info">
|
|
<span class="dc-stat-value">50+</span>
|
|
<span class="dc-stat-label">Awards Won</span>
|
|
</div>
|
|
</div>
|
|
<div class="dc-stat-item">
|
|
<div class="dc-stat-icon"><i class="fa fa-user-o"/></div>
|
|
<div class="dc-stat-info">
|
|
<span class="dc-stat-value">15+</span>
|
|
<span class="dc-stat-label">Expert Instructors</span>
|
|
</div>
|
|
</div>
|
|
<div class="dc-stat-item">
|
|
<div class="dc-stat-icon"><i class="fa fa-calendar-check-o"/></div>
|
|
<div class="dc-stat-info">
|
|
<span class="dc-stat-value">100+</span>
|
|
<span class="dc-stat-label">Events Conducted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Explore Our Programs -->
|
|
<section class="dc-sec-2" id="programs">
|
|
<t t-set="all_batches" t-value="request.env['dance.batch'].sudo().search([('status', 'in', ('upcoming', 'active'))], order='dance_style, level')"/>
|
|
|
|
<div class="dc-sec-2-content">
|
|
<div class="dc-sec-badge">
|
|
<i class="fa fa-star"/>
|
|
<span>Our Programs</span>
|
|
</div>
|
|
<h2 class="dc-sec-title">
|
|
Explore Our <em>Dance Programs</em>
|
|
</h2>
|
|
<p class="dc-sec-subtitle">
|
|
Discover a variety of dance programs designed for every passion and skill level.
|
|
</p>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="dc-filter-tabs">
|
|
<button class="dc-filter-btn active" data-filter="all">All Programs</button>
|
|
<button class="dc-filter-btn" data-filter="classical">Classical</button>
|
|
<button class="dc-filter-btn" data-filter="western">Western</button>
|
|
<button class="dc-filter-btn" data-filter="fitness">Fitness</button>
|
|
<button class="dc-filter-btn" data-filter="folk">Folk & Cultural</button>
|
|
</div>
|
|
|
|
<div class="dc-program-grid">
|
|
<!-- Left side spacer card to achieve the design -->
|
|
<div class="dc-program-card dc-left-sliver" style="flex: 0 0 20px; border-left: none; border-radius: 0 20px 20px 0; padding: 0; min-height: auto; scroll-snap-align: none;"></div>
|
|
|
|
<t t-foreach="all_batches" t-as="batch">
|
|
<t t-set="cat" t-value="'western'"/>
|
|
<t t-if="batch.dance_style in ('bharatanatyam', 'kathak')" t-set="cat" t-value="'classical'"/>
|
|
<t t-if="batch.dance_style == 'zumba'" t-set="cat" t-value="'fitness'"/>
|
|
|
|
<div t-attf-class="dc-program-card category-#{cat}" t-att-data-style="batch.dance_style">
|
|
<span t-attf-class="dc-card-status status-#{batch.status}">
|
|
<t t-if="batch.is_almost_full">Almost Full</t>
|
|
<t t-else="" t-esc="batch.status.capitalize()"/>
|
|
</span>
|
|
|
|
<div class="dc-card-header">
|
|
<h3 t-esc="batch.name"/>
|
|
<span class="dc-card-style">
|
|
<t t-esc="dict(batch._fields['dance_style'].selection).get(batch.dance_style)"/> Dance
|
|
</span>
|
|
</div>
|
|
|
|
<p class="dc-card-desc">
|
|
Discover the rhythmic storytelling and graceful movements of <t t-esc="batch.name"/>.
|
|
</p>
|
|
|
|
<div class="dc-card-details">
|
|
<div class="dc-detail-box">
|
|
<span class="dc-detail-label">Level</span>
|
|
<span class="dc-detail-value" t-esc="batch.level.capitalize()"/>
|
|
</div>
|
|
<div class="dc-detail-box">
|
|
<span class="dc-detail-label">Age Group</span>
|
|
<span class="dc-detail-value">6+ Years</span>
|
|
</div>
|
|
<div class="dc-detail-box">
|
|
<span class="dc-detail-label">Schedule</span>
|
|
<span class="dc-detail-value" t-esc="batch.schedule_days or 'Flexible'"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div t-attf-class="dc-card-seats #{'seats-orange' if batch.is_almost_full else 'seats-green'}">
|
|
<i class="fa fa-circle"/>
|
|
<span><t t-esc="batch.available_seats"/> Seats Left</span>
|
|
</div>
|
|
|
|
<div class="dc-card-footer">
|
|
<a t-attf-href="/programs/#{batch.id}" class="dc-btn-outline">
|
|
<span>View Program</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
<a t-attf-href="/enroll?batch_id=#{batch.id}" class="dc-btn-fill">
|
|
<span>Enroll Now</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
|
|
<!-- Mobile Pagination -->
|
|
<div class="dc-mobile-pagination d-lg-none">
|
|
<button class="dc-page-btn"><i class="fa fa-angle-left"></i></button>
|
|
<div class="dc-page-dots">
|
|
<span class="active"></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<button class="dc-page-btn"><i class="fa fa-angle-right"></i></button>
|
|
</div>
|
|
|
|
<!-- Trial Bar -->
|
|
<div class="dc-trial-bar">
|
|
<div class="dc-trial-info">
|
|
<div class="dc-trial-icon">
|
|
<i class="fa fa-calendar-check-o"/>
|
|
</div>
|
|
<div class="dc-trial-text">
|
|
<h4>Not sure which program is right for you?</h4>
|
|
<p>Book a free trial class and let our experts guide you.</p>
|
|
</div>
|
|
</div>
|
|
<a href="/contactus" class="dc-btn-fill" style="width: auto; padding: 0 40px;">
|
|
<span>Book Free Trial Class</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filters = document.querySelectorAll('.dc-filter-btn');
|
|
const cards = document.querySelectorAll('.dc-program-card');
|
|
|
|
filters.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
// Update active button
|
|
filters.forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const filter = btn.getAttribute('data-filter');
|
|
|
|
// Filter cards
|
|
cards.forEach(card => {
|
|
if (filter === 'all') {
|
|
card.style.display = 'block';
|
|
} else if (card.classList.contains('category-' + filter)) {
|
|
card.style.display = 'block';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Section 3: Why Choose Us -->
|
|
<section class="dc-sec-3" id="about">
|
|
<!-- Desktop and Laptop Layout (Orbital Design) -->
|
|
<div class="dc-laptop-view d-none d-lg-block">
|
|
<div class="dc-sec-3-content">
|
|
<div class="dc-sec-badge">
|
|
<i class="fa fa-diamond me-2"/>
|
|
<span>Why Choose Us</span>
|
|
<i class="fa fa-diamond ms-2"/>
|
|
</div>
|
|
<h2 class="dc-sec-title">
|
|
More Than Dance,<br/>
|
|
<em>We Build Futures</em>
|
|
</h2>
|
|
<p class="dc-sec-subtitle">
|
|
We go beyond steps and routines to create a holistic learning experience that helps every dancer grow in skill, confidence and character.
|
|
</p>
|
|
|
|
<div class="dc-orbital-wrap">
|
|
<!-- Left Side Features (01-03) -->
|
|
<div class="dc-orbit-side dc-orbit-left">
|
|
<div class="dc-orbit-node">
|
|
<span class="dc-node-num">01</span>
|
|
<div class="dc-node-text">
|
|
<h4>Expert Instructors</h4>
|
|
<p>Learn from certified and experienced professionals who are passionate about teaching and your growth.</p>
|
|
</div>
|
|
<div class="dc-node-icon"><i class="fa fa-users"/></div>
|
|
</div>
|
|
<div class="dc-orbit-node" style="margin-right: 40px;">
|
|
<span class="dc-node-num">02</span>
|
|
<div class="dc-node-text">
|
|
<h4>Performance Opportunities</h4>
|
|
<p>Regular stage performances, showcases and competitions to help dancers shine with confidence.</p>
|
|
</div>
|
|
<div class="dc-node-icon"><i class="fa fa-star"/></div>
|
|
</div>
|
|
<div class="dc-orbit-node">
|
|
<span class="dc-node-num">03</span>
|
|
<div class="dc-node-text">
|
|
<h4>Smart Parent Portal</h4>
|
|
<p>Stay connected with real-time updates on attendance, progress, fees and important announcements.</p>
|
|
</div>
|
|
<div class="dc-node-icon"><i class="fa fa-mobile"/></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Spacer for Background Dancer image -->
|
|
<div class="dc-orbit-center"></div>
|
|
|
|
<!-- Right Side Features (04-06) -->
|
|
<div class="dc-orbit-side dc-orbit-right">
|
|
<div class="dc-orbit-node">
|
|
<div class="dc-node-icon"><i class="fa fa-line-chart"/></div>
|
|
<div class="dc-node-text">
|
|
<h4>Progress Tracking</h4>
|
|
<p>Structured training with periodic evaluations to track improvement and celebrate every milestone.</p>
|
|
</div>
|
|
<span class="dc-node-num">04</span>
|
|
</div>
|
|
<div class="dc-orbit-node" style="margin-left: 40px;">
|
|
<div class="dc-node-icon"><i class="fa fa-calendar-check-o"/></div>
|
|
<div class="dc-node-text">
|
|
<h4>Workshops & Events</h4>
|
|
<p>Engaging workshops, masterclasses and special events to keep learning exciting and meaningful.</p>
|
|
</div>
|
|
<span class="dc-node-num">05</span>
|
|
</div>
|
|
<div class="dc-orbit-node">
|
|
<div class="dc-node-icon"><i class="fa fa-user-circle-o"/></div>
|
|
<div class="dc-node-text">
|
|
<h4>Personalized Attention</h4>
|
|
<p>Small batch sizes and individual guidance to ensure every student gets the care and focus they deserve.</p>
|
|
</div>
|
|
<span class="dc-node-num">06</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Banner -->
|
|
<div class="dc-sec3-footer">
|
|
<div class="dc-footer-quote">
|
|
<i class="fa fa-quote-left dc-quote-icon"/>
|
|
<p>We don't just teach dance, we inspire <em>confidence</em>, <em>creativity</em> and a <em>lifelong love</em> for the art.</p>
|
|
</div>
|
|
<div class="dc-footer-divider"></div>
|
|
<div class="dc-footer-illustration">
|
|
<img src="/dance_new_theme/static/src/img/hero_img.png" alt="Dancer Illustration"/>
|
|
</div>
|
|
<div class="dc-footer-divider"></div>
|
|
<div class="dc-footer-cta">
|
|
<div class="dc-footer-cta-text">
|
|
<h4>Ready to Begin Your Journey?</h4>
|
|
<p>Join our community of passionate dancers today.</p>
|
|
</div>
|
|
<a href="/contactus" class="dc-btn-primary">
|
|
<span>Book a Free Trial Class</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile View: Layer-by-Layer Storytelling (1:1 UI Design) -->
|
|
<div class="dc-mobile-view d-block d-lg-none">
|
|
|
|
<!-- Layer 2: Ultra-Professional Header -->
|
|
<div class="dc-mob-header">
|
|
<div class="dc-mob-badge">Why Choose Us</div>
|
|
<h2 class="dc-mob-title">The <em>Rhythm</em> of Excellence</h2>
|
|
<p class="dc-mob-desc">Discover the premium experience that makes us the choice for aspiring dancers.</p>
|
|
</div>
|
|
|
|
<!-- Layer 3: The Path -->
|
|
<div class="dc-mob-rhythm-path">
|
|
<svg width="100%" height="100%" viewBox="0 0 400 1200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M200 0 Q 380 150, 200 300 T 200 600 T 200 900 T 200 1200" stroke="#7022ba" stroke-opacity="0.15" stroke-width="4" stroke-dasharray="12 12"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Layer 4: Floating Luxury Bubbles -->
|
|
<div class="dc-mob-story-wrap">
|
|
<!-- 01 Certified Mentors -->
|
|
<div class="dc-mob-card m-left">
|
|
<div class="dc-mob-num-dot">01</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Certified Mentors</h4>
|
|
<p>Trained professionals from top institutions.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-users"/></div>
|
|
</div>
|
|
|
|
<!-- 02 Performance Opportunities -->
|
|
<div class="dc-mob-card m-right">
|
|
<div class="dc-mob-num-dot">02</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Performance Opps</h4>
|
|
<p>Shine on regular stage showcases.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-star"/></div>
|
|
</div>
|
|
|
|
<!-- 03 Smart Parent Portal -->
|
|
<div class="dc-mob-card m-left">
|
|
<div class="dc-mob-num-dot">03</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Parent Portal</h4>
|
|
<p>Real-time progress at your fingertips.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-mobile"/></div>
|
|
</div>
|
|
|
|
<!-- 04 Progress Tracking -->
|
|
<div class="dc-mob-card m-right">
|
|
<div class="dc-mob-num-dot">04</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Tracking</h4>
|
|
<p>Celebrate every dance milestone.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-line-chart"/></div>
|
|
</div>
|
|
|
|
<!-- 05 Workshops & Events -->
|
|
<div class="dc-mob-card m-left">
|
|
<div class="dc-mob-num-dot">05</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Masterclasses</h4>
|
|
<p>Engaging events beyond routines.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-calendar"/></div>
|
|
</div>
|
|
|
|
<!-- 06 Personalized Attention -->
|
|
<div class="dc-mob-card m-right">
|
|
<div class="dc-mob-num-dot">06</div>
|
|
<div class="dc-mob-text">
|
|
<h4>Individual Care</h4>
|
|
<p>Small batches for focused learning.</p>
|
|
</div>
|
|
<div class="dc-mob-icon-bubble"><i class="fa fa-smile-o"/></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layer 5: Master Glass Footer -->
|
|
<div class="dc-mob-final-card">
|
|
<div class="dc-mob-cta-box">
|
|
<h3 class="dc-mob-cta-title">Ready to Begin?</h3>
|
|
<p class="dc-mob-cta-sub">Join our next batch today.</p>
|
|
<a href="/enroll" class="dc-mob-primary-btn">
|
|
<span>Enroll Your Child Now</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Upcoming Events -->
|
|
<section class="dc-sec-4" id="events">
|
|
<div class="dc-sec-4-content">
|
|
<div class="dc-sec4-badge">
|
|
<i class="fa fa-star"/>
|
|
<span>UPCOMING EVENTS</span>
|
|
</div>
|
|
<h2 class="dc-sec4-title">
|
|
Your Next <em>Big Performance</em>
|
|
</h2>
|
|
<p class="dc-sec4-subtitle">
|
|
From spectacular showcases to competitive stages, discover the performances that bring our passion to life.
|
|
</p>
|
|
|
|
<div class="dc-sec4-main-grid">
|
|
<!-- Left: Featured Event Image with Content Overlay -->
|
|
<div class="dc-sec4-left-card">
|
|
<img src="/dance_new_theme/static/src/img/sec4_left.png" alt="Featured Event"/>
|
|
<div class="dc-card-overlay">
|
|
<div class="dc-card-badge">
|
|
<i class="fa fa-star"/>
|
|
<span>FEATURED EVENT</span>
|
|
</div>
|
|
<h3 class="dc-card-title">Annual<br/>Dance Showcase</h3>
|
|
<div class="dc-card-year">2025</div>
|
|
|
|
<div class="dc-card-content-divider"></div>
|
|
|
|
<p class="dc-card-desc">
|
|
An unforgettable evening featuring extraordinary performances from students across all dance styles.
|
|
</p>
|
|
|
|
<div class="dc-card-info-list">
|
|
<div class="dc-card-info-item">
|
|
<i class="fa fa-calendar-o"/>
|
|
<span>AUGUST 24, 2025</span>
|
|
</div>
|
|
<div class="dc-card-info-item">
|
|
<i class="fa fa-map-marker"/>
|
|
<span>CHENNAI AUDITORIUM</span>
|
|
</div>
|
|
<div class="dc-card-info-item">
|
|
<i class="fa fa-users"/>
|
|
<span>300+ PERFORMERS</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#" class="dc-card-btn">
|
|
<span>Explore This Event</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Timeline content -->
|
|
<div class="dc-sec4-right-timeline">
|
|
<div class="dc-timeline-header">
|
|
<div class="dc-timeline-header-line"></div>
|
|
<span>Upcoming Moments</span>
|
|
<div class="dc-timeline-header-line"></div>
|
|
</div>
|
|
|
|
<div class="dc-timeline-list">
|
|
<t t-foreach="request.env['dance.event'].sudo().search([('state', 'in', ['planning', 'rehearsal', 'done'])], order='date desc', limit=4)" t-as="event">
|
|
<div class="dc-event-item">
|
|
<div class="dc-event-dot"></div>
|
|
<div class="dc-event-card">
|
|
<div class="dc-event-card-date">
|
|
<span class="dc-month"><t t-esc="event.date.strftime('%b').upper()" t-if="event.date"/></span>
|
|
<span class="dc-day"><t t-esc="event.date.strftime('%d')" t-if="event.date"/></span>
|
|
</div>
|
|
<div class="dc-event-icon-wrap">
|
|
<t t-if="event.event_type == 'competition'">
|
|
<i class="fa fa-trophy"/>
|
|
</t>
|
|
<t t-elif="event.event_type == 'workshop'">
|
|
<i class="fa fa-television"/>
|
|
</t>
|
|
<t t-elif="event.event_type == 'recital'">
|
|
<i class="fa fa-child"/>
|
|
</t>
|
|
<t t-else="">
|
|
<i class="fa fa-calendar-o"/>
|
|
</t>
|
|
</div>
|
|
<div class="dc-event-info">
|
|
<h4><t t-esc="event.name"/></h4>
|
|
<div class="dc-event-location">
|
|
<i class="fa fa-map-marker"/>
|
|
<span><t t-esc="event.venue or 'Venue TBA'"/></span>
|
|
</div>
|
|
<span class="dc-event-badge dc-badge-purple" t-if="event.state == 'planning'">Planning</span>
|
|
<span class="dc-event-badge dc-badge-orange" t-elif="event.state == 'rehearsal'">Rehearsals</span>
|
|
<span class="dc-event-badge dc-badge-green" t-else="">Completed</span>
|
|
</div>
|
|
<a href="/events" class="dc-event-action">
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Banner (Redesigned) -->
|
|
<div class="dc-sec4-stats-bar">
|
|
<div class="dc-sec4-stat-group">
|
|
<!-- Stat 1 -->
|
|
<div class="dc-sec4-stat-item">
|
|
<div class="dc-stat-icon-circle">
|
|
<i class="fa fa-calendar-o"/>
|
|
</div>
|
|
<div class="dc-stat-content">
|
|
<span class="dc-stat-value">50+</span>
|
|
<span class="dc-stat-label">Annual Events</span>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 2 -->
|
|
<div class="dc-sec4-stat-item">
|
|
<div class="dc-stat-icon-circle">
|
|
<i class="fa fa-users"/>
|
|
</div>
|
|
<div class="dc-stat-content">
|
|
<span class="dc-stat-value">2000+</span>
|
|
<span class="dc-stat-label">Student Participants</span>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 3 -->
|
|
<div class="dc-sec4-stat-item">
|
|
<div class="dc-stat-icon-circle">
|
|
<i class="fa fa-trophy"/>
|
|
</div>
|
|
<div class="dc-stat-content">
|
|
<span class="dc-stat-value">15+</span>
|
|
<span class="dc-stat-label">Competitions</span>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 4 -->
|
|
<div class="dc-sec4-stat-item">
|
|
<div class="dc-stat-icon-circle">
|
|
<i class="fa fa-map-marker"/>
|
|
</div>
|
|
<div class="dc-stat-content">
|
|
<span class="dc-stat-value">Multiple</span>
|
|
<span class="dc-stat-label">Venues Across Cities</span>
|
|
</div>
|
|
</div>
|
|
<!-- Stat 5 -->
|
|
<div class="dc-sec4-stat-item">
|
|
<div class="dc-stat-icon-circle">
|
|
<i class="fa fa-star"/>
|
|
</div>
|
|
<div class="dc-stat-content">
|
|
<span class="dc-stat-value">10+</span>
|
|
<span class="dc-stat-label">Years of Excellence</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Area -->
|
|
<div class="dc-sec4-stat-cta">
|
|
<div class="dc-cta-text">
|
|
<h4>Excited for what's ahead?</h4>
|
|
<p>Stay tuned for more amazing performances and celebrations.</p>
|
|
</div>
|
|
<a href="#" class="dc-cta-btn">
|
|
<span>View All Events</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 5: Success Stories and Testimonials -->
|
|
<section class="dc-sec-5" id="testimonials">
|
|
<div class="dc-sec5-content">
|
|
<!-- Layer 1: Header Section -->
|
|
<div class="dc-sec5-badge">
|
|
<i class="fa fa-star"/>
|
|
<span>SUCCESS STORIES</span>
|
|
</div>
|
|
<h2 class="dc-sec5-title">
|
|
Real Journeys. <em>Remarkable Impact.</em>
|
|
</h2>
|
|
<p class="dc-sec5-subtitle">
|
|
Every story is a step towards confidence, every achievement a moment of pride for us.
|
|
</p>
|
|
|
|
<!-- Main Layout Row -->
|
|
<div class="dc-sec5-main-row">
|
|
<!-- Left Column -->
|
|
<div class="dc-sec5-side-col">
|
|
<!-- Card 1: Parent Story -->
|
|
<div class="dc-story-card">
|
|
<div class="dc-card-top">
|
|
<i class="fa fa-users"/> PARENT STORY
|
|
</div>
|
|
<div class="dc-card-stars">
|
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
|
</div>
|
|
<div class="dc-card-body">
|
|
<div class="dc-card-quote-icon">“</div>
|
|
<p class="dc-card-text">
|
|
The academy has been a blessing for our daughter. We've seen her grow in confidence, discipline and happiness. The teachers truly care!
|
|
</p>
|
|
</div>
|
|
<div class="dc-card-divider"></div>
|
|
<div class="dc-card-author">
|
|
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=150&h=150" class="dc-card-author-img" onerror="this.src='/dance_new_theme/static/src/img/hero_img.png'"/>
|
|
<div class="dc-card-author-info">
|
|
<h4>Sneha Iyer</h4>
|
|
<p>Parent of Ananya R.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Student Story -->
|
|
<div class="dc-story-card">
|
|
<div class="dc-card-top">
|
|
<i class="fa fa-graduation-cap"/> STUDENT STORY
|
|
</div>
|
|
<div class="dc-card-stars">
|
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
|
</div>
|
|
<div class="dc-card-body">
|
|
<div class="dc-card-quote-icon">“</div>
|
|
<p class="dc-card-text">
|
|
I enjoy every session and love being on stage. This academy is like my second home. It's where I grow, learn and shine.
|
|
</p>
|
|
</div>
|
|
<div class="dc-card-divider"></div>
|
|
<div class="dc-card-author">
|
|
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=150&h=150" class="dc-card-author-img" onerror="this.src='/dance_new_theme/static/src/img/hero_img.png'"/>
|
|
<div class="dc-card-author-info">
|
|
<h4>Rohan K.</h4>
|
|
<p>Ballet Student</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Column: Featured Story Carousel -->
|
|
<div class="dc-sec5-center-col">
|
|
<!-- Dashed Orbital Ring -->
|
|
<div class="dc-sec5-orbital"></div>
|
|
|
|
<!-- Crown Badge -->
|
|
<div class="dc-sec5-crown">
|
|
<i class="fa fa-trophy"/>
|
|
</div>
|
|
|
|
<!-- Featured Story Label -->
|
|
<div class="dc-sec5-feat-label">
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b388e0'%3E%3Cpath d='M12 2C9.8 5 7 7.2 4 8.4c1.2 3.2 1.6 6.6 1 10C7.8 17 10 15.8 12 14c2 1.8 4.2 3 7 4.4c-.6-3.4-.2-6.8 1-10C17 7.2 14.2 5 12 2z'/%3E%3C/svg%3E" alt="" class="dc-sec5-laurel"/>
|
|
<span>FEATURED STORY</span>
|
|
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b388e0'%3E%3Cpath d='M12 2C9.8 5 7 7.2 4 8.4c1.2 3.2 1.6 6.6 1 10C7.8 17 10 15.8 12 14c2 1.8 4.2 3 7 4.4c-.6-3.4-.2-6.8 1-10C17 7.2 14.2 5 12 2z'/%3E%3C/svg%3E" alt="" class="dc-sec5-laurel" style="transform: scaleX(-1);"/>
|
|
</div>
|
|
|
|
<!-- Student Photo -->
|
|
<div class="dc-sec5-photo-ring">
|
|
<img src="/dance_new_theme/static/src/img/hero_img.png" alt="Ananya R." class="dc-sec5-photo"/>
|
|
</div>
|
|
|
|
<!-- Name and Role -->
|
|
<h3 class="dc-sec5-name">Ananya R.</h3>
|
|
<p class="dc-sec5-role">Bharatanatyam Student</p>
|
|
|
|
<!-- Achievement Badge -->
|
|
<div class="dc-sec5-achieve">
|
|
<i class="fa fa-trophy"/>
|
|
<span>1st Place – National Level</span>
|
|
</div>
|
|
|
|
<!-- Stars -->
|
|
<div class="dc-sec5-stars">
|
|
<i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/><i class="fa fa-star"/>
|
|
</div>
|
|
|
|
<!-- Quote -->
|
|
<div class="dc-sec5-quote">
|
|
<span class="dc-sec5-quote-mark">“</span>From a shy beginner to winning first place at the National Level. This academy shaped my dreams and gave me the wings to fly.”
|
|
</div>
|
|
|
|
<!-- Pagination Dots -->
|
|
<div class="dc-sec5-dots">
|
|
<div class="dc-sec5-dot active"></div>
|
|
<div class="dc-sec5-dot"></div>
|
|
<div class="dc-sec5-dot"></div>
|
|
<div class="dc-sec5-dot"></div>
|
|
<div class="dc-sec5-dot"></div>
|
|
</div>
|
|
|
|
<!-- Navigation Controls -->
|
|
<div class="dc-sec5-nav">
|
|
<button class="dc-sec5-nav-btn" id="dc-prev-story"><i class="fa fa-chevron-left"></i></button>
|
|
<button class="dc-sec5-nav-btn" id="dc-next-story"><i class="fa fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="dc-sec5-side-col">
|
|
<!-- Card 3: Student Story -->
|
|
<div class="dc-story-card">
|
|
<div class="dc-card-top">
|
|
<i class="fa fa-graduation-cap"></i> STUDENT STORY
|
|
</div>
|
|
<div class="dc-card-stars">
|
|
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
|
|
</div>
|
|
<div class="dc-card-body">
|
|
<div class="dc-card-quote-icon">“</div>
|
|
<p class="dc-card-text">
|
|
Every class pushes me to be better. I love performing and learning new choreographies. This is where passion turns into purpose.
|
|
</p>
|
|
</div>
|
|
<div class="dc-card-divider"></div>
|
|
<div class="dc-card-author">
|
|
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150" class="dc-card-author-img" onerror="this.src='/dance_new_theme/static/src/img/hero_img.png'"/>
|
|
<div class="dc-card-author-info">
|
|
<h4>Diya N.</h4>
|
|
<p>Contemporary Student</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Parent Story -->
|
|
<div class="dc-story-card">
|
|
<div class="dc-card-top">
|
|
<i class="fa fa-users"></i> PARENT STORY
|
|
</div>
|
|
<div class="dc-card-stars">
|
|
<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
|
|
</div>
|
|
<div class="dc-card-body">
|
|
<div class="dc-card-quote-icon">“</div>
|
|
<p class="dc-card-text">
|
|
From the first day, we knew this was the right place. The training, support and opportunities here are truly exceptional.
|
|
</p>
|
|
</div>
|
|
<div class="dc-card-divider"></div>
|
|
<div class="dc-card-author">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150" class="dc-card-author-img" onerror="this.src='/dance_new_theme/static/src/img/hero_img.png'"/>
|
|
<div class="dc-card-author-info">
|
|
<h4>Arvind Kumar</h4>
|
|
<p>Parent of Rohan K.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const stories = [
|
|
{
|
|
typeIcon: 'fa-users', typeText: 'PARENT STORY',
|
|
name: 'Sneha Iyer', role: 'Parent of Ananya R.',
|
|
img: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=150&h=150',
|
|
quote: "The academy has been a blessing for our daughter. We've seen her grow in confidence, discipline and happiness. The teachers truly care!",
|
|
achievementHtml: ''
|
|
},
|
|
{
|
|
typeIcon: 'fa-graduation-cap', typeText: 'STUDENT STORY',
|
|
name: 'Rohan K.', role: 'Ballet Student',
|
|
img: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=150&h=150',
|
|
quote: "I enjoy every session and love being on stage. This academy is like my second home. It's where I grow, learn and shine.",
|
|
achievementHtml: ''
|
|
},
|
|
{
|
|
typeIcon: 'fa-graduation-cap', typeText: 'STUDENT STORY',
|
|
name: 'Ananya R.', role: 'Bharatanatyam Student',
|
|
img: '/dance_new_theme/static/src/img/hero_img.png',
|
|
quote: "From a shy beginner to winning first place at the National Level. This academy shaped my dreams and gave me the wings to fly.",
|
|
achievementHtml: '<i class="fa fa-trophy"></i> <span>1st Place &#x2013; National Level</span>'
|
|
},
|
|
{
|
|
typeIcon: 'fa-graduation-cap', typeText: 'STUDENT STORY',
|
|
name: 'Diya N.', role: 'Contemporary Student',
|
|
img: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150',
|
|
quote: "Every class pushes me to be better. I love performing and learning new choreographies. This is where passion turns into purpose.",
|
|
achievementHtml: ''
|
|
},
|
|
{
|
|
typeIcon: 'fa-users', typeText: 'PARENT STORY',
|
|
name: 'Arvind Kumar', role: 'Parent of Rohan K.',
|
|
img: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150',
|
|
quote: "From the first day, we knew this was the right place. The training, support and opportunities here are truly exceptional.",
|
|
achievementHtml: ''
|
|
}
|
|
];
|
|
|
|
let currentOrder = [0, 1, 2, 3, 4];
|
|
|
|
const sec5 = document.querySelector('.dc-sec-5');
|
|
if (!sec5) return;
|
|
|
|
const sideCards = sec5.querySelectorAll('.dc-story-card');
|
|
const centerCard = sec5.querySelector('.dc-sec5-center-col');
|
|
const prevBtn = sec5.querySelector('#dc-prev-story');
|
|
const nextBtn = sec5.querySelector('#dc-next-story');
|
|
const dots = sec5.querySelectorAll('.dc-sec5-dot');
|
|
|
|
function updateDOM() {
|
|
// Add smooth rotating out effect
|
|
sideCards.forEach(card => card.classList.add('dc-card-rotating'));
|
|
if (centerCard) centerCard.classList.add('dc-card-rotating');
|
|
|
|
setTimeout(() => {
|
|
// Update Side Cards (0: TopLeft, 1: BotLeft, 3: TopRight, 4: BotRight)
|
|
const sidePositions = [0, 1, 3, 4];
|
|
sideCards.forEach((card, idx) => {
|
|
if(!card) return;
|
|
const pos = sidePositions[idx];
|
|
const story = stories[currentOrder[pos]];
|
|
const topEl = card.querySelector('.dc-card-top');
|
|
if (topEl) topEl.innerHTML = `<i class="fa ${story.typeIcon}"></i> ${story.typeText}`;
|
|
const textEl = card.querySelector('.dc-card-text');
|
|
if (textEl) textEl.innerText = story.quote;
|
|
const imgEl = card.querySelector('.dc-card-author-img');
|
|
if (imgEl) imgEl.src = story.img;
|
|
const nameEl = card.querySelector('.dc-card-author-info h4');
|
|
if (nameEl) nameEl.innerText = story.name;
|
|
const roleEl = card.querySelector('.dc-card-author-info p');
|
|
if (roleEl) roleEl.innerText = story.role;
|
|
});
|
|
|
|
// Update Center Card
|
|
if (centerCard) {
|
|
const centerStory = stories[currentOrder[2]];
|
|
const cPhoto = centerCard.querySelector('.dc-sec5-photo');
|
|
if (cPhoto) cPhoto.src = centerStory.img;
|
|
const cName = centerCard.querySelector('.dc-sec5-name');
|
|
if (cName) cName.innerText = centerStory.name;
|
|
const cRole = centerCard.querySelector('.dc-sec5-role');
|
|
if (cRole) cRole.innerText = centerStory.role;
|
|
const cQuote = centerCard.querySelector('.dc-sec5-quote');
|
|
if (cQuote) cQuote.innerHTML = `<span class="dc-sec5-quote-mark">&#x201C;</span>${centerStory.quote}&#x201D;`;
|
|
|
|
const achieveBadge = centerCard.querySelector('.dc-sec5-achieve');
|
|
if (achieveBadge) {
|
|
if (centerStory.achievementHtml) {
|
|
achieveBadge.style.display = 'inline-flex';
|
|
achieveBadge.innerHTML = centerStory.achievementHtml;
|
|
} else {
|
|
achieveBadge.style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Update Dots
|
|
dots.forEach((dot, idx) => {
|
|
if(idx === currentOrder[2]) dot.classList.add('active');
|
|
else dot.classList.remove('active');
|
|
});
|
|
|
|
// Trigger smooth rotating in effect
|
|
sideCards.forEach(card => card.classList.remove('dc-card-rotating'));
|
|
if (centerCard) centerCard.classList.remove('dc-card-rotating');
|
|
}, 350);
|
|
}
|
|
|
|
function rotateNext() {
|
|
const newOrder = [];
|
|
newOrder[2] = currentOrder[3]; // Top-Right -> Center
|
|
newOrder[0] = currentOrder[2]; // Center -> Top-Left
|
|
newOrder[1] = currentOrder[0]; // Top-Left -> Bot-Left
|
|
newOrder[4] = currentOrder[1]; // Bot-Left -> Bot-Right
|
|
newOrder[3] = currentOrder[4]; // Bot-Right -> Top-Right
|
|
currentOrder = newOrder;
|
|
updateDOM();
|
|
}
|
|
|
|
function rotatePrev() {
|
|
const newOrder = [];
|
|
newOrder[3] = currentOrder[2]; // Center -> Top-Right
|
|
newOrder[2] = currentOrder[0]; // Top-Left -> Center
|
|
newOrder[0] = currentOrder[1]; // Bot-Left -> Top-Left
|
|
newOrder[1] = currentOrder[4]; // Bot-Right -> Bot-Left
|
|
newOrder[4] = currentOrder[3]; // Top-Right -> Bot-Right
|
|
currentOrder = newOrder;
|
|
updateDOM();
|
|
}
|
|
|
|
if(prevBtn) prevBtn.addEventListener('click', rotatePrev);
|
|
if(nextBtn) nextBtn.addEventListener('click', rotateNext);
|
|
|
|
// Initialize dots properly
|
|
dots.forEach((dot, idx) => {
|
|
if(idx === 2) dot.classList.add('active');
|
|
else dot.classList.remove('active');
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
|
|
<!-- Section 6: Footer -->
|
|
<style>
|
|
.dc-footer-section {
|
|
position: relative;
|
|
width: 100%;
|
|
background: url("/dance_new_theme/static/src/img/footer_bg.png") no-repeat center top;
|
|
background-size: cover;
|
|
overflow: visible;
|
|
z-index: 8;
|
|
}
|
|
.dc-footer-content-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 0 5% 40px 5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Layer 2: Newsletter Card */
|
|
.dc-newsletter-card {
|
|
position: relative;
|
|
z-index: 10;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
background: rgba(255, 255, 255, 0.65);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: 60px;
|
|
padding: 30px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
box-shadow: 0 15px 40px rgba(112, 34, 186, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 30px; /* Space before next layer */
|
|
}
|
|
|
|
.dc-news-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 25px;
|
|
flex: 1;
|
|
}
|
|
|
|
.dc-news-icon-wrapper {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 8px 25px rgba(112, 34, 186, 0.1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dc-news-icon-inner {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.dc-news-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.dc-news-text h3 {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: #171238;
|
|
margin: 0;
|
|
}
|
|
|
|
.dc-news-text p {
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 15px;
|
|
color: #171238;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.dc-news-right {
|
|
flex: 1;
|
|
max-width: 500px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dc-news-form {
|
|
width: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dc-news-input {
|
|
width: 100%;
|
|
height: 60px;
|
|
background: rgba(255, 255, 255, 0.4);
|
|
border: 1px solid rgba(135, 43, 213, 0.2);
|
|
border-radius: 50px;
|
|
padding: 0 160px 0 25px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 15px;
|
|
color: #171238;
|
|
outline: none;
|
|
transition: border-color 0.3s ease, background 0.3s ease;
|
|
}
|
|
|
|
.dc-news-input::placeholder {
|
|
color: rgba(135, 43, 213, 0.5);
|
|
}
|
|
|
|
.dc-news-input:focus {
|
|
border-color: #872bd5;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.dc-news-btn {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 40px;
|
|
padding: 0 30px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.dc-news-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(112, 34, 186, 0.3);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.dc-newsletter-card {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
padding: 30px 20px;
|
|
border-radius: 30px;
|
|
}
|
|
.dc-news-left {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.dc-news-right {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
.dc-news-input {
|
|
padding: 0 130px 0 20px;
|
|
}
|
|
.dc-news-btn {
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.dc-news-form {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.dc-news-input {
|
|
padding: 0 20px;
|
|
text-align: center;
|
|
}
|
|
.dc-news-btn {
|
|
position: static;
|
|
width: 100%;
|
|
height: 50px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Layer 3: Main Grid */
|
|
.dc-footer-grid {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding-top: 40px;
|
|
border-top: 1px solid rgba(135, 43, 213, 0.15); /* Thin divider */
|
|
}
|
|
|
|
.dc-footer-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
/* Vertical Dividers */
|
|
.dc-footer-col:not(:last-child) {
|
|
border-right: 1px solid rgba(135, 43, 213, 0.15);
|
|
}
|
|
|
|
.dc-footer-col-1 { flex: 1.5; padding-left: 0; }
|
|
.dc-footer-col-2 { flex: 1; }
|
|
.dc-footer-col-3 { flex: 1.5; }
|
|
.dc-footer-col-4 { flex: 1.5; align-items: center; text-align: center; }
|
|
.dc-footer-col-5 { flex: 1; padding-right: 0; align-items: center; }
|
|
|
|
/* Headers */
|
|
.dc-footer-header {
|
|
font-family: 'DM Sans', sans-serif;
|
|
color: #7022ba;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
}
|
|
.dc-footer-col-4 .dc-footer-header, .dc-footer-col-5 .dc-footer-header {
|
|
align-self: center;
|
|
}
|
|
|
|
/* Dot Decoration */
|
|
.dc-footer-header::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -12px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #d1b3f2;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: -15px 0 0 -2px rgba(209, 179, 242, 0.4), 15px 0 0 -2px rgba(209, 179, 242, 0.4);
|
|
}
|
|
|
|
/* Column 1: Logo and Text */
|
|
.dc-footer-logo img {
|
|
max-width: 140px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-footer-text {
|
|
color: #171238;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
/* Column 2: Quick Links */
|
|
.dc-quick-links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.dc-quick-links li {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.dc-quick-links li a {
|
|
color: #171238;
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
.dc-quick-links li a:hover {
|
|
color: #7022ba;
|
|
font-weight: 600;
|
|
}
|
|
.dc-quick-links li i {
|
|
color: #872bd5;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Column 3: Contact Us */
|
|
.dc-contact-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.dc-contact-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
.dc-contact-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
box-shadow: 0 5px 15px rgba(112, 34, 186, 0.08);
|
|
flex-shrink: 0;
|
|
}
|
|
.dc-contact-text {
|
|
color: #171238;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
margin-top: 8px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
|
|
/* Column 4: Working Hours */
|
|
.dc-work-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
box-shadow: 0 5px 15px rgba(112, 34, 186, 0.08);
|
|
font-size: 16px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.dc-work-day {
|
|
color: #171238;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
.dc-work-time {
|
|
color: #7022ba;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
}
|
|
.dc-work-divider {
|
|
width: 100px;
|
|
height: 1px;
|
|
background: rgba(135, 43, 213, 0.2);
|
|
position: relative;
|
|
margin: 15px 0;
|
|
}
|
|
.dc-work-divider i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #d1b3f2;
|
|
font-size: 10px;
|
|
background: #fdfbff; /* Fallback match */
|
|
padding: 0 5px;
|
|
}
|
|
|
|
/* Column 5: Follow Us */
|
|
.dc-social-links {
|
|
display: flex;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.dc-social-icon {
|
|
width: 45px;
|
|
height: 45px;
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #7022ba;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
box-shadow: 0 8px 20px rgba(112, 34, 186, 0.1);
|
|
transition: transform 0.3s, color 0.3s, background 0.3s;
|
|
}
|
|
.dc-social-icon:hover {
|
|
background: linear-gradient(135deg, #a346f2 0%, #7022ba 100%);
|
|
color: #ffffff;
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dc-footer-grid { flex-wrap: wrap; }
|
|
.dc-footer-col { flex: 1 1 45%; border-right: none !important; margin-bottom: 40px; padding: 0; align-items: center !important; text-align: center; }
|
|
.dc-footer-header { align-self: center !important; }
|
|
.dc-contact-item { align-items: center; flex-direction: column; text-align: center; }
|
|
.dc-contact-text { margin-top: 0; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.dc-footer-col { flex: 1 1 100%; }
|
|
}
|
|
|
|
/* Layer 4: Bottom Copyright Bar */
|
|
.dc-footer-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 30px 0 20px 0;
|
|
border-top: 1px solid rgba(135, 43, 213, 0.15);
|
|
width: 100%;
|
|
}
|
|
|
|
.dc-copyright-text {
|
|
color: #171238;
|
|
font-size: 13px;
|
|
font-family: 'DM Sans', sans-serif;
|
|
flex: 1;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.dc-footer-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 2;
|
|
text-align: center;
|
|
}
|
|
.dc-footer-center i.fa-pagelines {
|
|
color: #7022ba;
|
|
font-size: 20px;
|
|
}
|
|
.dc-footer-passion {
|
|
font-family: 'Georgia', serif;
|
|
font-style: italic;
|
|
color: #171238;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.dc-footer-passion span {
|
|
color: #d1b3f2;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dc-footer-right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.dc-dancer-badge {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 1px dashed rgba(135, 43, 213, 0.4);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
}
|
|
.dc-dancer-badge img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
/* Rearrange to place Logo above Newsletter */
|
|
.dc-footer-grid {
|
|
display: contents;
|
|
}
|
|
|
|
.dc-footer-col-1 {
|
|
order: -2;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
backdrop-filter: none;
|
|
padding: 0 10px 20px 10px;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.dc-newsletter-card {
|
|
transform: translateY(0);
|
|
order: -1;
|
|
margin-top: 10px;
|
|
margin-bottom: 25px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 30px rgba(112, 34, 186, 0.05);
|
|
padding: 25px 15px;
|
|
}
|
|
|
|
/* Column Cards */
|
|
.dc-footer-col {
|
|
flex: 1 1 100%;
|
|
background: rgba(253, 245, 255, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
|
border-radius: 16px;
|
|
padding: 20px 15px;
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dc-footer-col:not(.dc-footer-col-1) {
|
|
position: relative;
|
|
}
|
|
.dc-footer-col:not(.dc-footer-col-1)::after {
|
|
content: '\f107';
|
|
font-family: 'FontAwesome';
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 18px;
|
|
color: #872bd5;
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
/* Header with Lines and Dots */
|
|
.dc-footer-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
font-size: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.dc-footer-header::before,
|
|
.dc-footer-header::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 4px;
|
|
position: relative;
|
|
box-shadow: none; width: auto; left: auto; bottom: auto; transform: none; border-radius: 0;
|
|
}
|
|
.dc-footer-header::before {
|
|
background: radial-gradient(circle at right, #872bd5 2.5px, transparent 2.5px) right center / 5px 5px no-repeat,
|
|
linear-gradient(to right, transparent, rgba(135,43,213,0.3) 90%, transparent 90%) left center / calc(100% - 10px) 1px no-repeat;
|
|
margin-right: 15px;
|
|
}
|
|
.dc-footer-header::after {
|
|
background: radial-gradient(circle at left, #872bd5 2.5px, transparent 2.5px) left center / 5px 5px no-repeat,
|
|
linear-gradient(to left, transparent, rgba(135,43,213,0.3) 90%, transparent 90%) right center / calc(100% - 10px) 1px no-repeat;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
/* Quick Links */
|
|
.dc-quick-links li {
|
|
border-bottom: 1px solid rgba(135, 43, 213, 0.1);
|
|
padding-bottom: 12px;
|
|
margin-bottom: 12px;
|
|
justify-content: flex-start;
|
|
}
|
|
.dc-quick-links li:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Contact Us */
|
|
.dc-contact-item {
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
text-align: left !important;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid rgba(135, 43, 213, 0.1);
|
|
margin-bottom: 15px;
|
|
}
|
|
.dc-contact-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.dc-contact-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Working Hours */
|
|
.dc-footer-col-4 {
|
|
display: grid;
|
|
grid-template-columns: 40px 1fr;
|
|
grid-column-gap: 15px;
|
|
grid-row-gap: 5px;
|
|
align-items: center;
|
|
text-align: left !important;
|
|
}
|
|
.dc-footer-col-4 .dc-footer-header {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.dc-work-icon {
|
|
grid-column: 1;
|
|
grid-row: 2 / span 5;
|
|
align-self: start;
|
|
margin-top: 5px;
|
|
margin-bottom: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
}
|
|
.dc-work-day, .dc-work-time, .dc-work-divider {
|
|
grid-column: 2;
|
|
}
|
|
.dc-work-divider {
|
|
display: none;
|
|
}
|
|
.dc-work-time {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Footer Bottom (Copyright) */
|
|
.dc-footer-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 20px;
|
|
text-align: center;
|
|
}
|
|
.dc-footer-center {
|
|
display: contents;
|
|
}
|
|
.dc-footer-bottom i.fa-pagelines {
|
|
order: -2;
|
|
font-size: 24px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.dc-copyright-text {
|
|
order: -1;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 10px;
|
|
}
|
|
.dc-footer-passion {
|
|
order: 0;
|
|
font-size: 0.8rem;
|
|
}
|
|
.dc-footer-right {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<section class="dc-footer-section" id="footer">
|
|
<!-- All future content layers go inside this wrapper -->
|
|
<div class="dc-footer-content-wrap">
|
|
<!-- Layer 2: Newsletter Banner -->
|
|
<div class="dc-newsletter-card">
|
|
<div class="dc-news-left">
|
|
<div class="dc-news-icon-wrapper">
|
|
<div class="dc-news-icon-inner">
|
|
<i class="fa fa-envelope-o"/>
|
|
</div>
|
|
</div>
|
|
<div class="dc-news-text">
|
|
<h3>Stay Connected</h3>
|
|
<p>Subscribe to our newsletter for updates on events, workshops and performances.</p>
|
|
</div>
|
|
</div>
|
|
<div class="dc-news-right">
|
|
<form class="dc-news-form" action="#" method="post">
|
|
<input type="email" class="dc-news-input" placeholder="Enter your email address" required="1"/>
|
|
<button type="submit" class="dc-news-btn">
|
|
<span>Subscribe</span>
|
|
<i class="fa fa-arrow-right"/>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layer 3: Main Grid (5 Columns) -->
|
|
<div class="dc-footer-grid">
|
|
<!-- Col 1: Logo -->
|
|
<div class="dc-footer-col dc-footer-col-1">
|
|
<a href="/" class="dc-footer-logo">
|
|
<img src="/dance_new_theme/static/src/img/new_logo.png" alt="Dance Competition School ERP"/>
|
|
</a>
|
|
<p class="dc-footer-text">
|
|
Empowering academies to manage, teach and inspire the next generation of dancers with excellence.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Col 2: Quick Links -->
|
|
<div class="dc-footer-col dc-footer-col-2">
|
|
<h4 class="dc-footer-header">Quick Links</h4>
|
|
<ul class="dc-quick-links">
|
|
<li><i class="fa fa-angle-right"></i><a href="/">Home</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="/aboutus">About Us</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">Programs</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">Events</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">Student Registration</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">Gallery</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">Blog</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="/contactus">Contact Us</a></li>
|
|
<li><i class="fa fa-angle-right"></i><a href="#">FAQ</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Col 3: Contact Us -->
|
|
<div class="dc-footer-col dc-footer-col-3">
|
|
<h4 class="dc-footer-header">Contact Us</h4>
|
|
<div class="dc-contact-list">
|
|
<div class="dc-contact-item">
|
|
<div class="dc-contact-icon"><i class="fa fa-phone"></i></div>
|
|
<div class="dc-contact-text">+91 98765 43210</div>
|
|
</div>
|
|
<div class="dc-contact-item">
|
|
<div class="dc-contact-icon"><i class="fa fa-envelope"></i></div>
|
|
<div class="dc-contact-text">hello@danceschoolerp.com</div>
|
|
</div>
|
|
<div class="dc-contact-item">
|
|
<div class="dc-contact-icon"><i class="fa fa-map-marker"></i></div>
|
|
<div class="dc-contact-text">123, Harmony Road,<br/>Anna Nagar,<br/>Chennai - 600041,<br/>Tamil Nadu, India.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Col 4: Working Hours -->
|
|
<div class="dc-footer-col dc-footer-col-4">
|
|
<h4 class="dc-footer-header">Working Hours</h4>
|
|
<div class="dc-work-icon"><i class="fa fa-clock-o"></i></div>
|
|
<div class="dc-work-day">Mon - Sat</div>
|
|
<div class="dc-work-time">9:00 AM - 8:00 PM</div>
|
|
<div class="dc-work-divider"><i class="fa fa-star"></i></div>
|
|
<div class="dc-work-day">Sunday</div>
|
|
<div class="dc-work-time">10:00 AM - 2:00 PM</div>
|
|
</div>
|
|
|
|
<!-- Col 5: Follow Us -->
|
|
<div class="dc-footer-col dc-footer-col-5">
|
|
<h4 class="dc-footer-header">Follow Us</h4>
|
|
<div class="dc-social-links">
|
|
<a href="#" class="dc-social-icon"><i class="fa fa-instagram"></i></a>
|
|
<a href="#" class="dc-social-icon"><i class="fa fa-facebook"></i></a>
|
|
<a href="#" class="dc-social-icon"><i class="fa fa-youtube-play"></i></a>
|
|
<a href="#" class="dc-social-icon"><i class="fa fa-whatsapp"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layer 4: Copyright Bar -->
|
|
<div class="dc-footer-bottom">
|
|
<div class="dc-copyright-text">
|
|
© 2026 Dance Competition School ERP.<br/>All rights reserved.
|
|
</div>
|
|
<div class="dc-footer-center">
|
|
<i class="fa fa-pagelines"></i>
|
|
<div class="dc-footer-passion">
|
|
<span>✦</span> Built with Passion for Dancers & Dreamers <span>✦</span>
|
|
</div>
|
|
</div>
|
|
<div class="dc-footer-right">
|
|
<div class="dc-dancer-badge">
|
|
<img src="/dance_new_theme/static/src/img/girl.png" alt="Dancer Badge"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</xpath>
|
|
</template>
|
|
</odoo>
|