* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Full-screen series teasers */
.series-teaser-full {
width: 100%;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
cursor: pointer;
transition: transform 0.3s ease;
}
.series-teaser-full:hover {
transform: scale(1.01);
}
.series-teaser-content {
max-width: 800px;
}
.series-teaser-title {
font-size: 3.5rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 16px;
letter-spacing: 1px;
line-height: 1.2;
}
.series-teaser-time {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 12px;
font-weight: 500;
}
.series-teaser-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 24px;
}
.series-teaser-link {
display: inline-block;
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
padding: 12px 32px;
border: 2px solid #ffffff;
border-radius: 30px;
transition: all 0.3s;
text-decoration: none;
}
.series-teaser-link:hover {
background: #ffffff;
color: #1a1a1a;
}
.friday-madness-bg {
background: #DC2626;
}
.monthly-madness-bg {
background: #2563EB;
}

@media (max-width: 768px) {
.series-teaser-title {
font-size: 2.2rem;
}
.series-teaser-full {
min-height: 45vh;
}
}
html,
body {
width: 100%;
overflow-x: hidden;
background: #f5f5f5;
color: #1a1a1a;
font-family: 'Inter', sans-serif;
line-height: 1.6;
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.page {
display: block;
padding-top: 0;
}
/* news ribbon */
.news-ribbon {
width: 100vw;
background: #1a1a1a;
border-top: 2px solid #FFC107;
border-bottom: 2px solid #FFC107;
padding: 12px 0;
overflow: hidden;
margin-left: -50vw;
margin-right: -50vw;
position: relative;
left: 50%;
right: 50%;
}
.news-track {
display: flex;
width: fit-content;
animation: newsScroll 30s linear infinite;
}
.news-ribbon:hover .news-track {
animation-play-state: paused;
}
.news-item {
color: #fff;
font-size: 0.95rem;
font-weight: 600;
white-space: nowrap;
padding: 0 30px;
border-right: 2px solid #FFC107;
}
@keyframes newsScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* header */
.site-header {
background: #ffffff;
position: sticky;
top: 0;
z-index: 100;
width: 100%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.header-container {
max-width: 1400px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-container a {
display: flex;
align-items: center;
}
.logo {
max-width: 40px;
height: auto;
}
.desktop-nav {
display: flex;
gap: 28px;
align-items: center;
}
.desktop-nav a {
color: #333;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.5px;
padding: 5px 0;
position: relative;
transition: color 0.3s;
cursor: pointer;
}
.desktop-nav a:hover,
.desktop-nav a.active {
color: #FFC107;
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: #333;
font-size: 1.8rem;
cursor: pointer;
}
.mobile-nav {
display: none;
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 350px;
height: 100vh;
background: #ffffff;
border-left: 3px solid #FFC107;
z-index: 1000;
transition: right 0.3s;
padding: 20px;
overflow-y: auto;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
}
.mobile-nav.active {
right: 0;
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #FFC107;
}
.mobile-nav-header span {
color: #FFC107;
font-weight: 700;
font-size: 1.2rem;
}
.mobile-menu-close {
background: none;
border: none;
color: #333;
font-size: 1.5rem;
cursor: pointer;
}
.mobile-nav nav {
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-nav a {
color: #333;
font-size: 1.1rem;
font-weight: 500;
padding: 8px 0;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.mobile-nav a:hover {
color: #FFC107;
}
.mobile-nav hr {
border: none;
border-top: 2px solid #FFC107;
margin: 10px 0;
}
/* banner slider */
.banner-slider {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
background: #ffffff;
margin-top: 0;
padding-top: 0;
}
.banner-track {
display: flex;
width: 500%;
animation: scroll 25s linear infinite;
}
.slide {
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
}
.slide img {
width: 100%;
height: auto;
max-height: 75vh;
object-fit: contain;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
25% {
transform: translateX(-20%);
}
45% {
transform: translateX(-20%);
}
50% {
transform: translateX(-40%);
}
70% {
transform: translateX(-40%);
}
75% {
transform: translateX(-60%);
}
95% {
transform: translateX(-60%);
}
100% {
transform: translateX(-80%);
}
}
/* stats */
.stats-fullwidth {
width: 100vw;
background: linear-gradient(135deg, #ffffff, #f0f0f0);
border-top: 2px solid #FFC107;
border-bottom: 2px solid #FFC107;
padding: 16px 0;
margin-left: -50vw;
margin-right: -50vw;
position: relative;
left: 50%;
right: 50%;
}
.stats-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.stat-box {
display: flex;
align-items: center;
gap: 14px;
background: #ffffff;
padding: 14px 28px;
border-radius: 12px;
min-width: 180px;
border: 2px solid #FFC107;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.stat-box:hover {
transform: translateY(-3px);
background: #FFC107;
}
.stat-box:hover .stat-icon,
.stat-box:hover .stat-value,
.stat-box:hover .stat-label {
color: #1a1a1a;
}
.stat-icon {
font-size: 2rem;
color: #FFC107;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
color: #1a1a1a;
}
.stat-label {
font-size: 0.8rem;
color: #FFC107;
text-transform: uppercase;
letter-spacing: 1px;
}
/* hero */
.hero-section {
min-height: 30vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
background: #ffffff;
}
.hero-title {
font-size: 3.2rem;
font-weight: 800;
color: #1a1a1a;
margin-bottom: 16px;
letter-spacing: 1px;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.3rem;
color: #555;
margin-bottom: 20px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-tags {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 500;
color: #555;
}
.hero-tags .dot {
color: #FFC107;
}
.section-title {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #FFC107;
margin-bottom: 30px;
letter-spacing: 1px;
}
.page-title {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #FFC107;
margin-bottom: 30px;
letter-spacing: 1px;
}
/* series teaser */
.series-teaser-section {
padding: 50px 20px;
background: #f8f8f8;
}
.series-teaser-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.series-teaser-card {
padding: 35px;
border: 2px solid #FFC107;
border-radius: 10px;
text-align: center;
transition: transform 0.3s;
background: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.series-teaser-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.friday-teaser {
border-color: #DC2626;
}
.monthly-teaser {
border-color: #2563EB;
}
.series-teaser-card h3 {
font-size: 1.8rem;
color: #1a1a1a;
margin-bottom: 12px;
}
.friday-teaser h3 {
color: #DC2626;
}
.monthly-teaser h3 {
color: #2563EB;
}
.teaser-time {
font-size: 1rem;
color: #555;
margin-bottom: 12px;
}
.teaser-description {
font-size: 1rem;
color: #777;
margin-bottom: 20px;
}
.teaser-link {
color: #FFC107;
font-weight: 600;
font-size: 1rem;
transition: color 0.3s;
cursor: pointer;
}
.teaser-link:hover {
color: #1a1a1a;
}
/* featured work */
.featured-work-section {
padding: 50px 20px;
background: #ffffff;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto 30px;
}
.featured-item {
text-align: center;
cursor: pointer;
}
.featured-image {
width: 100%;
aspect-ratio: 1/1;
border: 2px solid #FFC107;
border-radius: 10px;
overflow: hidden;
margin-bottom: 12px;
background: #f5f5f5;
transition: transform 0.3s;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.featured-item:hover .featured-image {
transform: scale(1.02);
}
.featured-item:hover .featured-image img {
transform: scale(1.08);
}
.featured-item h4 {
color: #1a1a1a;
font-size: 1.1rem;
margin-bottom: 4px;
}
.featured-item p {
color: #777;
font-size: 0.85rem;
}
.view-all-container {
text-align: center;
}
.view-all-link {
display: inline-block;
color: #FFC107;
font-size: 1.1rem;
font-weight: 600;
padding: 10px 28px;
border: 2px solid #FFC107;
border-radius: 30px;
transition: all 0.3s;
cursor: pointer;
background: transparent;
}
.view-all-link:hover {
background: #FFC107;
color: #1a1a1a;
}
/* work gallery */
.work-page {
padding: 30px 20px;
max-width: 1400px;
margin: 0 auto;
}
.gallery-section {
margin-bottom: 40px;
background: #ffffff;
border-radius: 15px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.gallery-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
flex-wrap: wrap;
gap: 12px;
}
.gallery-header h2 {
color: #1a1a1a;
font-size: 1.6rem;
font-weight: 700;
}
.gallery-categories {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.category-tag {
background: #f5f5f5;
color: #555;
border: 1px solid #ddd;
padding: 6px 14px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
}
.category-tag:hover {
background: #FFC107;
color: #1a1a1a;
border-color: #FFC107;
}
.category-tag.active {
background: #FFC107;
color: #1a1a1a;
border-color: #FFC107;
}
.gallery-subheader {
margin: 12px 0 12px;
}
.gallery-subheader h3 {
color: #1a1a1a;
font-size: 1.2rem;
font-weight: 600;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.gallery-item {
aspect-ratio: 1/1;
border: 2px solid #eee;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
position: relative;
background: #f9f9f9;
}
.gallery-item:hover {
border-color: #FFC107;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-nav {
display: flex;
justify-content: center;
gap: 16px;
margin: 8px 0;
}
.gallery-nav button {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.gallery-nav button:hover {
background: #1a1a1a;
color: #fff;
transform: scale(1.05);
}
/* lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.96);
z-index: 1000;
justify-content: center;
align-items: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 85vh;
border: 3px solid #FFC107;
border-radius: 10px;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
color: #333;
font-size: 2rem;
cursor: pointer;
transition: color 0.3s;
}
.lightbox-close:hover {
color: #FFC107;
}
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: #FFC107;
color: #1a1a1a;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
transition: all 0.3s;
}
.lightbox-prev {
left: -60px;
}
.lightbox-next {
right: -60px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
background: #1a1a1a;
color: #fff;
}
.lightbox-counter {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
color: #333;
font-size: 0.9rem;
}
/* about */
.about-page {
padding: 30px 20px;
max-width: 1200px;
margin: 0 auto;
}
.about-section {
margin-bottom: 40px;
background: #ffffff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.about-section h2 {
color: #1a1a1a;
font-size: 1.8rem;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #FFC107;
}
.about-story {
font-size: 1.1rem;
line-height: 1.8;
color: #333;
margin-bottom: 20px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
margin: 20px 0;
}
.value-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 8px;
padding: 16px;
text-align: center;
transition: all 0.3s;
}
.value-item:hover {
border-color: #FFC107;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.value-item h3 {
color: #FFC107;
font-size: 1.1rem;
margin-bottom: 6px;
}
.value-item p {
color: #555;
font-size: 0.85rem;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
margin: 16px 0;
}
.client-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 8px;
padding: 12px;
text-align: center;
transition: all 0.3s;
}
.client-item:hover {
border-color: #FFC107;
background: #fff;
}
.client-item span {
color: #333;
font-weight: 500;
font-size: 0.9rem;
}
.events-list {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 8px;
}
.events-list li {
color: #333;
padding: 6px 0;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
}
.events-list li::before {
content: '•';
color: #FFC107;
font-size: 1.3rem;
}
.rate-card-section {
background: #f8f8f8;
border: 2px solid #FFC107;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
}
.rate-category {
margin-bottom: 25px;
}
.rate-category h3 {
color: #FFC107;
font-size: 1.3rem;
margin-bottom: 12px;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
}
.rate-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.rate-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
.rate-service {
color: #333;
font-size: 0.95rem;
}
.rate-price {
color: #FFC107;
font-weight: 600;
}
.package-card {
background: #ffffff;
border: 1px solid #FFC107;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}
.package-name {
color: #FFC107;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 4px;
}
.package-price {
color: #1a1a1a;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 8px;
}
.package-includes {
color: #555;
font-size: 0.85rem;
line-height: 1.6;
}
.terms-list {
list-style: none;
margin: 16px 0;
}
.terms-list li {
color: #333;
padding: 6px 0;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 8px;
}
.terms-list li::before {
content: '•';
color: #FFC107;
font-size: 1.3rem;
}
.clean-hours-list {
list-style: none;
padding: 0;
margin: 0;
}
.clean-hours-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 1.1rem;
}
.clean-hours-list li:last-child {
border-bottom: none;
}
.clean-hours-list .hours-day {
color: #1a1a1a;
font-weight: 600;
}
.clean-hours-list .hours-time {
color: #FFC107;
font-weight: 600;
}
/* series */
.series-page {
padding: 30px 20px;
max-width: 1200px;
margin: 0 auto;
}
.series-section {
margin-bottom: 40px;
background: #ffffff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.series-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 12px;
flex-wrap: wrap;
}
.series-header h2 {
color: #1a1a1a;
font-size: 2rem;
font-weight: 700;
}
.friday-badge {
background: #DC2626;
color: #fff;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.monthly-badge {
background: #2563EB;
color: #fff;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.music-player {
background: #f8f8f8;
border: 2px solid #FFC107;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
}
.player-track-info {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.player-cover {
width: 70px;
height: 70px;
border: 2px solid #FFC107;
border-radius: 8px;
overflow: hidden;
}
.player-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.player-track-details h3 {
color: #1a1a1a;
font-size: 1.2rem;
margin-bottom: 2px;
}
.player-track-details p {
color: #777;
font-size: 0.8rem;
}
.player-controls {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.player-btn {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.player-btn:hover {
background: #1a1a1a;
color: #fff;
transform: scale(1.05);
}
.player-progress {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 120px;
}
.progress-bar {
flex: 1;
height: 5px;
background: #ddd;
border-radius: 3px;
cursor: pointer;
position: relative;
min-width: 50px;
}
.progress-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 0%;
}
.progress-time {
color: #555;
font-size: 0.8rem;
min-width: 35px;
}
.player-volume {
display: flex;
align-items: center;
gap: 8px;
}
.volume-slider {
width: 70px;
height: 5px;
background: #ddd;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.volume-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 70%;
}
.drops-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 16px;
margin: 16px 0;
}
.drop-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.drop-card:hover {
transform: translateY(-4px);
border-color: #FFC107;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.drop-cover {
width: 100%;
aspect-ratio: 1/1;
position: relative;
background: #f5f5f5;
}
.drop-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.drop-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.drop-card:hover .drop-overlay {
opacity: 1;
}
.drop-play {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
}
.drop-play:hover {
background: #fff;
}
.drop-info {
padding: 12px;
}
.drop-info h4 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 4px;
}
.drop-info p {
color: #777;
font-size: 0.75rem;
margin-bottom: 8px;
}
.drop-btn {
width: 100%;
background: #FFC107;
color: #1a1a1a;
border: none;
padding: 6px;
border-radius: 5px;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
}
.drop-btn:hover {
background: #1a1a1a;
color: #fff;
}
.drop-btn.past {
background: #2563EB;
color: #fff;
}
.drop-btn.past:hover {
background: #1a1a1a;
}
.drop-btn.disabled {
background: #eee;
color: #999;
cursor: not-allowed;
}
.drop-btn.disabled:hover {
background: #eee;
color: #999;
}
.past-drops-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0 12px;
flex-wrap: wrap;
gap: 8px;
}
.past-drops-header h3 {
color: #1a1a1a;
font-size: 1.2rem;
}
.account-prompt {
background: #2563EB;
color: #fff;
padding: 8px 18px;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
display: inline-block;
font-size: 0.9rem;
}
.account-prompt:hover {
background: #1a1a1a;
color: #fff;
}
.monthly-card {
background: #f8f8f8;
border: 2px solid #2563EB;
border-radius: 15px;
padding: 25px;
text-align: center;
}
.monthly-card h3 {
color: #2563EB;
font-size: 1.8rem;
margin-bottom: 12px;
}
.monthly-feature {
font-size: 1.1rem;
color: #333;
margin-bottom: 8px;
}
.monthly-discount {
font-size: 1.6rem;
color: #FFC107;
font-weight: 700;
margin-bottom: 12px;
}
.monthly-slot {
color: #2563EB;
font-size: 1rem;
margin-bottom: 20px;
}
.claim-btn {
background: #2563EB;
color: #fff;
border: none;
padding: 12px 32px;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.claim-btn:hover {
background: #1a1a1a;
color: #fff;
}
.past-badge {
background: #eee;
color: #999;
padding: 2px 10px;
border-radius: 20px;
font-size: 0.65rem;
display: inline-block;
}
/* portal */
.portal-page {
padding: 30px 20px;
max-width: 1200px;
margin: 0 auto;
}
.portal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.portal-header h1 {
color: #FFC107;
font-size: 2rem;
font-weight: 700;
}
.user-welcome {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.user-welcome span {
color: #333;
}
.user-welcome strong {
color: #2563EB;
}
.sign-out-btn {
background: #2563EB;
color: #fff;
padding: 6px 18px;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
border: none;
font-size: 0.9rem;
}
.sign-out-btn:hover {
background: #1a1a1a;
color: #fff;
}
.portal-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
border-bottom: 2px solid #eee;
padding-bottom: 12px;
flex-wrap: wrap;
}
.portal-tab {
background: transparent;
color: #555;
border: none;
padding: 8px 16px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.portal-tab:hover {
color: #2563EB;
}
.portal-tab.active {
color: #2563EB;
}
.portal-tab.active::after {
content: '';
position: absolute;
bottom: -14px;
left: 0;
width: 100%;
height: 3px;
background: #2563EB;
}
/* auth */
.auth-container {
max-width: 420px;
margin: 0 auto;
background: #ffffff;
border: 2px solid #2563EB;
border-radius: 15px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.auth-tabs {
display: flex;
margin-bottom: 24px;
border-bottom: 2px solid #eee;
}
.auth-tab {
flex: 1;
background: transparent;
color: #555;
border: none;
padding: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.auth-tab:hover {
color: #2563EB;
}
.auth-tab.active {
color: #2563EB;
border-bottom: 3px solid #2563EB;
}
.auth-form {
display: none;
}
.auth-form.active {
display: block;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
color: #333;
margin-bottom: 5px;
font-size: 0.85rem;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 10px 14px;
background: #f8f8f8;
border: 2px solid #eee;
border-radius: 8px;
color: #333;
font-size: 0.95rem;
transition: all 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #2563EB;
background: #fff;
}
.auth-submit {
width: 100%;
background: #2563EB;
color: #fff;
border: none;
padding: 12px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 16px;
}
.auth-submit:hover {
background: #1a1a1a;
color: #fff;
}
.auth-divider {
text-align: center;
margin: 16px 0;
color: #999;
position: relative;
}
.auth-divider::before,
.auth-divider::after {
content: '';
position: absolute;
top: 50%;
width: 42%;
height: 1px;
background: #ddd;
}
.auth-divider::before {
left: 0;
}
.auth-divider::after {
right: 0;
}
.auth-benefits {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.auth-benefits h3 {
color: #2563EB;
margin-bottom: 12px;
font-size: 1rem;
}
.auth-benefits ul {
list-style: none;
}
.auth-benefits li {
color: #333;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.auth-benefits li i {
color: #2563EB;
}
/* dashboard */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
margin-top: 16px;
}
.project-card {
background: #ffffff;
border: 1px solid #eee;
border-radius: 10px;
padding: 16px;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.project-card:hover {
border-color: #2563EB;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.project-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap;
gap: 4px;
}
.project-header h3 {
color: #2563EB;
font-size: 1.1rem;
}
.project-status {
padding: 3px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
}
.status-completed {
background: #10B981;
color: #fff;
}
.status-progress {
background: #F59E0B;
color: #fff;
}
.status-pending {
background: #94a3b8;
color: #fff;
}
.project-type {
color: #FFC107;
font-size: 0.85rem;
margin-bottom: 6px;
font-weight: 600;
}
.project-files {
margin: 12px 0;
}
.file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
flex-wrap: wrap;
gap: 4px;
font-size: 0.85rem;
}
.file-item a {
color: #2563EB;
}
.file-item a:hover {
color: #1a1a1a;
}
.file-size {
color: #999;
font-size: 0.7rem;
}
.project-actions {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.project-btn {
flex: 1;
background: #2563EB;
color: #fff;
border: none;
padding: 6px;
border-radius: 5px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s;
text-align: center;
min-width: 80px;
}
.project-btn:hover {
background: #1a1a1a;
color: #fff;
}
/* beat store */
.beat-store-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.beat-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-btn {
background: #f5f5f5;
color: #555;
border: 1px solid #ddd;
padding: 6px 14px;
border-radius: 30px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
}
.filter-btn:hover {
background: #2563EB;
color: #fff;
border-color: #2563EB;
}
.filter-btn.active {
background: #2563EB;
color: #fff;
border-color: #2563EB;
}
.beats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 20px;
margin-top: 16px;
}
.beat-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.beat-card:hover {
transform: translateY(-6px);
border-color: #FFC107;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.beat-cover {
width: 100%;
aspect-ratio: 1/1;
position: relative;
background: #f5f5f5;
}
.beat-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.beat-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.beat-card:hover .beat-overlay {
opacity: 1;
}
.beat-preview {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
}
.beat-preview:hover {
background: #fff;
}
.beat-info {
padding: 12px;
}
.beat-info h4 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 2px;
}
.beat-meta {
color: #999;
font-size: 0.75rem;
margin-bottom: 6px;
}
.beat-price {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 4px;
}
.price-lease {
color: #FFC107;
font-weight: 600;
font-size: 0.8rem;
}
.price-exclusive {
color: #2563EB;
font-weight: 600;
font-size: 0.8rem;
}
.beat-actions {
display: flex;
gap: 4px;
}
.beat-btn {
flex: 1;
background: #FFC107;
color: #1a1a1a;
border: none;
padding: 5px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.beat-btn.exclusive {
background: #2563EB;
color: #fff;
}
.beat-btn:hover {
background: #1a1a1a;
color: #fff;
}
/* purchases */
.purchases-table {
width: 100%;
border-collapse: collapse;
margin-top: 16px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
font-size: 0.9rem;
}
.purchases-table th {
text-align: left;
padding: 12px 10px;
color: #1a1a1a;
border-bottom: 2px solid #FFC107;
background: #f8f8f8;
}
.purchases-table td {
padding: 12px 10px;
border-bottom: 1px solid #f0f0f0;
}
.purchases-table tr:hover td {
background: #fafafa;
}
.purchase-item {
display: flex;
align-items: center;
gap: 8px;
}
.purchase-cover {
width: 40px;
height: 40px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden;
}
.purchase-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.purchase-title {
color: #1a1a1a;
font-weight: 600;
}
.purchase-amount {
color: #FFC107;
font-weight: 600;
}
.purchase-download {
background: #2563EB;
color: #fff;
border: none;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
}
.purchase-download:hover {
background: #1a1a1a;
color: #fff;
}
/* library */
.library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
margin-top: 16px;
}
.library-item {
background: #ffffff;
border: 1px solid #eee;
border-radius: 10px;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.library-item:hover {
border-color: #2563EB;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.library-cover {
width: 100%;
aspect-ratio: 1/1;
background: #f5f5f5;
}
.library-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.library-info {
padding: 12px;
}
.library-info h4 {
color: #1a1a1a;
font-size: 0.95rem;
margin-bottom: 2px;
}
.library-info p {
color: #999;
font-size: 0.7rem;
margin-bottom: 8px;
}
.library-download {
width: 100%;
background: #2563EB;
color: #fff;
border: none;
padding: 6px;
border-radius: 5px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
}
.library-download:hover {
background: #1a1a1a;
color: #fff;
}
/* contact */
.contact-page {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.contact-intro {
text-align: center;
margin-bottom: 40px;
}
.contact-intro h2 {
color: #1a1a1a;
font-size: 2rem;
margin-bottom: 10px;
}
.contact-intro p {
color: #555;
font-size: 1.1rem;
}
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.contact-details h3,
.contact-form-container h3 {
color: #FFC107;
font-size: 1.5rem;
margin-bottom: 20px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.contact-info-item i {
color: #2563EB;
font-size: 1.2rem;
margin-top: 4px;
}
.contact-info-item .info-label {
display: block;
color: #999;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}
.contact-info-item a,
.contact-info-item span {
color: #1a1a1a;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
}
.contact-info-item a:hover {
color: #FFC107;
}
.contact-form .form-group {
margin-bottom: 20px;
}
.contact-form label {
display: block;
color: #333;
margin-bottom: 8px;
font-size: 0.9rem;
font-weight: 500;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 15px;
background: #ffffff;
border: 2px solid #eee;
border-radius: 8px;
color: #333;
font-size: 1rem;
font-family: 'Inter', sans-serif;
transition: all 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: #2563EB;
}
.contact-form textarea {
resize: vertical;
}
/* footer */
.site-footer {
background: #1a1a1a;
border-top: 4px solid #FFC107;
padding: 32px 0 16px;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
position: relative;
left: 50%;
right: 50%;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-contact {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-size: 0.95rem;
}
.contact-item i {
color: #FFC107;
font-size: 1rem;
}
.contact-item a {
color: #fff;
transition: color 0.3s;
}
.contact-item a:hover {
color: #FFC107;
}
.footer-social {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #333;
color: #fff;
border-radius: 50%;
border: 2px solid #FFC107;
font-size: 1rem;
transition: all 0.3s;
text-decoration: none;
}
.social-icon:hover {
background: #FFC107;
color: #1a1a1a;
transform: translateY(-4px);
}
.footer-bottom {
text-align: center;
border-top: 1px solid #333;
padding-top: 16px;
}
.footer-links {
margin-bottom: 10px;
}
.footer-links a {
color: #aaa;
margin: 0 8px;
transition: color 0.3s;
cursor: pointer;
font-size: 0.9rem;
}
.footer-links a:hover {
color: #FFC107;
}
.footer-links span {
color: #FFC107;
}
.copyright {
color: #666;
font-size: 0.8rem;
margin-bottom: 4px;
}
.tagline {
color: #FFC107;
font-size: 0.8rem;
font-style: italic;
}
/* responsive */
@media (max-width: 1024px) {
.hero-title {
font-size: 2.6rem;
}
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
.series-teaser-grid {
grid-template-columns: 1fr;
}
.contact-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.desktop-nav {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 1.6rem;
}
.footer-contact {
flex-direction: column;
align-items: center;
gap: 12px;
}
.stat-box {
min-width: 100%;
}
.stats-container {
flex-direction: column;
align-items: center;
}
.portal-header {
flex-direction: column;
text-align: center;
}
.portal-tabs {
justify-content: center;
}
.purchases-table {
display: block;
overflow-x: auto;
}
.auth-container {
padding: 20px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
.gallery-header {
flex-direction: column;
align-items: stretch;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.logo {
max-width: 45px;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.6rem;
}
.hero-tags {
flex-direction: column;
gap: 4px;
}
.hero-tags .dot {
display: none;
}
.featured-grid {
grid-template-columns: 1fr;
}
.beats-grid {
grid-template-columns: 1fr;
}
.projects-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr 1fr;
}
}
/* custom additions */
.cta-quote {
background: #2563EB;
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-block;
}
.cta-quote:hover {
background: #1a1a1a;
color: #fff;
transform: translateY(-2px);
}
.privacy-page {
max-width: 900px;
margin: 0 auto;
padding: 30px 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.privacy-page h1 {
color: #1a1a1a;
font-size: 2.2rem;
margin-bottom: 8px;
}
.privacy-page .last-updated {
color: #777;
margin-bottom: 30px;
font-style: italic;
}
.privacy-section {
margin-bottom: 30px;
}
.privacy-section h2 {
color: #2563EB;
font-size: 1.4rem;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
}
.privacy-section p,
.privacy-section li {
color: #333;
line-height: 1.7;
}
.privacy-section ul {
padding-left: 20px;
margin: 10px 0;
}
.privacy-section li {
margin-bottom: 4px;
}
.payment-options {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 12px;
padding: 20px;
margin-top: 20px;
}
.payment-options h4 {
color: #2563EB;
margin-bottom: 12px;
}
.card-grid {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.card-option {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.card-option i {
font-size: 1.6rem;
color: #2563EB;
}
.admin-toggle {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0;
flex-wrap: wrap;
}
.admin-toggle select {
padding: 8px;
border-radius: 6px;
border: 1px solid #ddd;
background: #fff;
}
/* =====================================================
SERIES PAGE UPGRADES — Popup Modal & Player
===================================================== */
.volume-mute-btn {
background: none;
border: none;
color: #555;
font-size: 1rem;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}
.volume-mute-btn:hover {
background: #eee;
color: #FFC107;
}
.drop-card.clickable-series-box {
cursor: pointer;
}
.series-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
animation: popupFadeIn 0.25s ease;
}
.series-popup-overlay.active {
display: flex;
}
@keyframes popupFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.series-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
animation: popupSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
border: 2px solid #FFC107;
}
@keyframes popupSlideUp {
from {
transform: translateY(40px) scale(0.96);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.series-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
line-height: 1;
}
.series-popup-close:hover {
background: #FFC107;
color: #1a1a1a;
transform: rotate(90deg);
}
.series-popup-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
min-height: 400px;
}
.series-popup-media {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px 0 0 20px;
position: relative;
overflow: hidden;
}
.series-popup-media::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.series-popup-media img {
width: 100%;
max-width: 320px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 16px;
border: 3px solid #FFC107;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.series-popup-details {
padding: 40px 35px;
display: flex;
flex-direction: column;
}
.popup-badge {
display: inline-block;
background: #FFC107;
color: #1a1a1a;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
width: fit-content;
}
.series-popup-details h2 {
color: #1a1a1a;
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 6px;
line-height: 1.2;
}
.popup-subtitle {
color: #777;
font-size: 1rem;
font-weight: 500;
margin-bottom: 20px;
}
.popup-meta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 24px;
}
.popup-meta-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.popup-meta-item i {
color: #FFC107;
font-size: 1rem;
width: 20px;
text-align: center;
}
.popup-meta-item span {
color: #333;
font-size: 0.9rem;
font-weight: 500;
}
.popup-meta-item .meta-label {
color: #999;
font-size: 0.75rem;
display: block;
margin-bottom: 2px;
}
.popup-meta-item .meta-value {
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 600;
}
.popup-audio-deck {
background: #1a1a1a;
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 24px;
}
.popup-deck-controls {
display: flex;
align-items: center;
gap: 14px;
}
.popup-deck-play-btn {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.popup-deck-play-btn:hover {
background: #fff;
transform: scale(1.08);
}
.popup-deck-play-btn.playing {
background: #DC2626;
color: #fff;
}
.popup-deck-play-btn.playing:hover {
background: #b91c1c;
}
.popup-deck-progress-wrap {
flex: 1;
}
.popup-deck-progress-bar {
width: 100%;
height: 5px;
background: #333;
border-radius: 3px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.popup-deck-progress-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 0%;
transition: width 0.1s linear;
}
.popup-deck-time {
display: flex;
justify-content: space-between;
margin-top: 6px;
}
.popup-deck-time span {
color: #999;
font-size: 0.75rem;
font-family: 'Inter', monospace;
}
.popup-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: auto;
}
.popup-btn {
flex: 1;
min-width: 140px;
padding: 14px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.popup-btn-primary {
background: #FFC107;
color: #1a1a1a;
}
.popup-btn-primary:hover {
background: #1a1a1a;
color: #fff;
transform: translateY(-2px);
}
.popup-btn-secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.popup-btn-secondary:hover {
border-color: #FFC107;
color: #1a1a1a;
transform: translateY(-2px);
}
.popup-btn-blue {
background: #2563EB;
color: #fff;
}
.popup-btn-blue:hover {
background: #1a1a1a;
transform: translateY(-2px);
}
/* =====================================================
DASHBOARD FRIDAY MADNESS SECTION
===================================================== */
.dashboard-friday-section {
background: #ffffff;
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.dashboard-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #FFC107;
flex-wrap: wrap;
gap: 12px;
}
.dashboard-section-title {
display: flex;
align-items: center;
gap: 14px;
}
.friday-icon {
width: 48px;
height: 48px;
background: #DC2626;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.3rem;
}
.dashboard-section-title h2 {
color: #1a1a1a;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
}
.dashboard-section-title p {
color: #999;
font-size: 0.85rem;
margin: 2px 0 0;
}
.dashboard-section-link {
color: #2563EB;
font-weight: 600;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s;
}
.dashboard-section-link:hover {
color: #1a1a1a;
}
.dashboard-friday-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
}
.dashboard-drop-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
cursor: pointer;
}
.dashboard-drop-card:hover {
transform: translateY(-6px);
border-color: #FFC107;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.dashboard-drop-cover {
width: 100%;
aspect-ratio: 1/1;
position: relative;
background: #f5f5f5;
}
.dashboard-drop-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dashboard-drop-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.dashboard-drop-card:hover .dashboard-drop-overlay {
opacity: 1;
}
.dashboard-drop-play {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
}
.dashboard-drop-play:hover {
background: #fff;
transform: scale(1.1);
}
.dashboard-drop-badge {
position: absolute;
top: 10px;
left: 10px;
background: #DC2626;
color: #fff;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 2;
}
.dashboard-drop-info {
padding: 14px;
}
.dashboard-drop-info h4 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 4px;
}
.dashboard-drop-info p {
color: #999;
font-size: 0.8rem;
margin-bottom: 10px;
}
.dashboard-drop-btn {
width: 100%;
background: #FFC107;
color: #1a1a1a;
border: none;
padding: 8px;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s;
}
.dashboard-drop-btn:hover {
background: #1a1a1a;
color: #fff;
}
.dashboard-mini-player {
background: #1a1a1a;
border-radius: 14px;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
flex-wrap: wrap;
}
.mini-player-track {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.mini-player-cover {
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #FFC107;
}
.mini-player-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mini-player-details h4 {
color: #fff;
font-size: 0.95rem;
margin-bottom: 2px;
}
.mini-player-details p {
color: #999;
font-size: 0.75rem;
}
.mini-player-controls {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
min-width: 200px;
}
.mini-player-btn {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.mini-player-btn:hover {
background: #fff;
transform: scale(1.05);
}
.mini-player-progress {
flex: 1;
min-width: 100px;
}
.mini-progress-bar {
width: 100%;
height: 4px;
background: #333;
border-radius: 2px;
cursor: pointer;
position: relative;
}
.mini-progress-fill {
height: 100%;
background: #FFC107;
border-radius: 2px;
width: 0%;
}
.mini-player-time {
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.mini-player-time span {
color: #999;
font-size: 0.7rem;
font-family: 'Inter', monospace;
}
.mini-volume-btn {
background: none;
border: none;
color: #999;
font-size: 0.9rem;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
flex-shrink: 0;
}
.mini-volume-btn:hover {
color: #FFC107;
}
/* =====================================================
STORE PLAYER (Beat Store)
===================================================== */
.store-player {
background: #1a1a1a;
border-radius: 15px;
padding: 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.store-player-track {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.store-player-cover {
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #FFC107;
}
.store-player-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.store-player-details h3 {
color: #fff;
font-size: 1.1rem;
margin-bottom: 2px;
}
.store-player-details p {
color: #999;
font-size: 0.8rem;
}
.store-player-controls {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
min-width: 200px;
}
.store-player-btn {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.store-player-btn:hover {
background: #fff;
transform: scale(1.05);
}
.store-player-progress {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 120px;
}
.store-progress-time {
color: #999;
font-size: 0.75rem;
font-family: 'Inter', monospace;
min-width: 35px;
}
.store-progress-bar {
flex: 1;
height: 5px;
background: #333;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.store-progress-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 0%;
}
.store-player-volume {
display: flex;
align-items: center;
gap: 8px;
}
.store-volume-btn {
background: none;
border: none;
color: #999;
font-size: 0.9rem;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}
.store-volume-btn:hover {
color: #FFC107;
}
.store-volume-slider {
width: 70px;
height: 5px;
background: #333;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.store-volume-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 70%;
}
.beat-genre-tag {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: #FFC107;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.5px;
z-index: 2;
}
/* =====================================================
PURCHASES UPGRADE
===================================================== */
.purchases-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 30px;
}
.purchase-stat-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
gap: 14px;
transition: all 0.3s;
}
.purchase-stat-card:hover {
border-color: #FFC107;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
.purchase-stat-card i {
font-size: 1.8rem;
color: #FFC107;
width: 40px;
text-align: center;
}
.purchase-stat-value {
display: block;
color: #1a1a1a;
font-size: 1.5rem;
font-weight: 700;
}
.purchase-stat-label {
display: block;
color: #999;
font-size: 0.8rem;
}
.purchases-table-wrap {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.purchases-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.purchases-table th {
text-align: left;
padding: 14px 16px;
color: #1a1a1a;
border-bottom: 2px solid #FFC107;
background: #f8f8f8;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.purchases-table td {
padding: 14px 16px;
border-bottom: 1px solid #f0f0f0;
vertical-align: middle;
}
.purchases-table tr:hover td {
background: #fafafa;
}
.purchase-item {
display: flex;
align-items: center;
gap: 12px;
}
.purchase-cover {
width: 48px;
height: 48px;
border: 2px solid #eee;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.purchase-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.purchase-item-info {
display: flex;
flex-direction: column;
}
.purchase-title {
color: #1a1a1a;
font-weight: 600;
font-size: 0.95rem;
}
.purchase-sub {
color: #999;
font-size: 0.75rem;
}
.license-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.license-badge.lease {
background: #FFC107;
color: #1a1a1a;
}
.license-badge.exclusive {
background: #2563EB;
color: #fff;
}
.purchase-amount {
color: #FFC107;
font-weight: 700;
font-size: 1rem;
}
.purchase-download {
background: #2563EB;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.purchase-download:hover {
background: #1a1a1a;
color: #fff;
}
/* =====================================================
RESPONSIVE UPGRADES
===================================================== */
@media (max-width: 768px) {
.series-popup-grid {
grid-template-columns: 1fr;
}
.series-popup-media {
border-radius: 20px 20px 0 0;
padding: 25px;
min-height: 220px;
}
.series-popup-media img {
max-width: 200px;
}
.series-popup-details {
padding: 25px 20px;
}
.series-popup-details h2 {
font-size: 1.5rem;
}
.popup-meta-grid {
grid-template-columns: 1fr;
}
.popup-btn {
min-width: 100%;
}
.purchases-summary {
grid-template-columns: 1fr;
}
.dashboard-friday-grid {
grid-template-columns: repeat(2, 1fr);
}
.store-player {
flex-direction: column;
align-items: stretch;
}
.store-player-controls {
min-width: auto;
}
.dashboard-mini-player {
flex-direction: column;
align-items: stretch;
}
.mini-player-controls {
min-width: auto;
}
}
@media (max-width: 480px) {
.series-popup-window {
border-radius: 16px;
margin: 10px;
max-height: 95vh;
}
.series-popup-media {
padding: 20px;
min-height: 180px;
}
.series-popup-media img {
max-width: 160px;
}
.series-popup-details {
padding: 20px 16px;
}
.popup-audio-deck {
padding: 14px 14px;
}
.popup-deck-play-btn {
width: 44px;
height: 44px;
font-size: 1rem;
}
.dashboard-friday-grid {
grid-template-columns: 1fr;
}
.dashboard-section-header {
flex-direction: column;
align-items: flex-start;
}
}
/* =====================================================
CONTRACTS PAGE STYLES
===================================================== */
.contracts-intro {
text-align: center;
margin-bottom: 30px;
}
.contracts-intro h2 {
color: #1a1a1a;
font-size: 1.8rem;
margin-bottom: 8px;
}
.contracts-intro p {
color: #777;
font-size: 1rem;
}
.contracts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.contract-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 15px;
padding: 24px;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.contract-card:hover {
border-color: #FFC107;
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.contract-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.contract-icon {
width: 48px;
height: 48px;
background: #FFC107;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
font-size: 1.3rem;
}
.contract-icon.exclusive {
background: #2563EB;
color: #fff;
}
.contract-status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
}
.contract-status-badge.active {
background: #10B981;
color: #fff;
}
.contract-status-badge.expired {
background: #eee;
color: #999;
}
.contract-card h3 {
color: #1a1a1a;
font-size: 1.2rem;
margin-bottom: 12px;
}
.contract-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.contract-meta span {
background: #f8f8f8;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
color: #555;
display: flex;
align-items: center;
gap: 6px;
}
.contract-meta span i {
color: #FFC107;
}
.contract-rights-preview {
background: #f8f8f8;
border-radius: 10px;
padding: 14px;
margin-bottom: 16px;
}
.contract-rights-preview h4 {
color: #1a1a1a;
font-size: 0.9rem;
margin-bottom: 8px;
}
.contract-rights-preview ul {
list-style: none;
}
.contract-rights-preview li {
color: #555;
font-size: 0.85rem;
padding: 3px 0;
display: flex;
align-items: center;
gap: 8px;
}
.contract-rights-preview li i {
color: #10B981;
font-size: 0.8rem;
}
.contract-actions {
display: flex;
gap: 8px;
}
.contract-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-align: center;
border: none;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.contract-btn.view-btn {
background: #2563EB;
color: #fff;
}
.contract-btn.view-btn:hover {
background: #1a1a1a;
}
.contract-btn.download-btn {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.contract-btn.download-btn:hover {
border-color: #FFC107;
color: #1a1a1a;
}
.contract-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.contract-popup-overlay.active {
display: flex;
}
.contract-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #FFC107;
}
.contract-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.contract-popup-close:hover {
background: #FFC107;
color: #1a1a1a;
transform: rotate(90deg);
}
.contract-popup-header {
display: flex;
align-items: center;
gap: 16px;
padding: 30px 30px 0;
}
.contract-popup-icon {
width: 56px;
height: 56px;
background: #FFC107;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
font-size: 1.5rem;
}
.contract-popup-header h2 {
color: #1a1a1a;
font-size: 1.6rem;
margin-bottom: 2px;
}
.contract-popup-header p {
color: #999;
font-size: 0.9rem;
}
.contract-popup-body {
padding: 20px 30px;
}
.contract-section {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #eee;
}
.contract-section:last-child {
border-bottom: none;
}
.contract-section h3 {
color: #2563EB;
font-size: 1.1rem;
margin-bottom: 8px;
}
.contract-section p,
.contract-section li {
color: #555;
font-size: 0.9rem;
line-height: 1.7;
}
.contract-section ul {
padding-left: 20px;
}
.contract-section li {
margin-bottom: 4px;
}
.contract-popup-footer {
display: flex;
gap: 12px;
padding: 0 30px 30px;
}
.contract-popup-btn {
flex: 1;
padding: 14px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.contract-popup-btn.primary {
background: #2563EB;
color: #fff;
}
.contract-popup-btn.primary:hover {
background: #1a1a1a;
}
.contract-popup-btn.secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.contract-popup-btn.secondary:hover {
border-color: #FFC107;
}
/* =====================================================
MONTHLY LIBRARY STYLES
===================================================== */
.monthly-library-intro {
text-align: center;
margin-bottom: 30px;
}
.monthly-library-intro h2 {
color: #1a1a1a;
font-size: 1.8rem;
margin-bottom: 8px;
}
.monthly-library-intro p {
color: #777;
font-size: 1rem;
}
.monthly-section {
margin-bottom: 30px;
}
.monthly-section-title {
color: #1a1a1a;
font-size: 1.2rem;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.monthly-section-title i {
color: #F59E0B;
}
.monthly-offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.monthly-offer-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
position: relative;
cursor: pointer;
}
.monthly-offer-card:hover {
border-color: #F59E0B;
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.monthly-offer-card.active {
border-color: #F59E0B;
}
.monthly-offer-card.expired {
opacity: 0.7;
}
.monthly-offer-badge {
position: absolute;
top: 12px;
left: 12px;
background: #F59E0B;
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 2;
}
.monthly-offer-card.expired .monthly-offer-badge {
background: #999;
}
.monthly-offer-cover {
width: 100%;
aspect-ratio: 16/9;
background: #f5f5f5;
}
.monthly-offer-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.monthly-offer-info {
padding: 20px;
}
.monthly-offer-info h4 {
color: #1a1a1a;
font-size: 1.1rem;
margin-bottom: 6px;
}
.monthly-offer-discount {
color: #F59E0B;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 8px;
}
.monthly-offer-discount.expired {
color: #999;
}
.monthly-offer-status {
color: #10B981;
font-size: 0.85rem;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.monthly-offer-status.expired {
color: #999;
}
.monthly-offer-expiry {
color: #DC2626;
font-size: 0.8rem;
margin-bottom: 12px;
}
.monthly-offer-actions {
display: flex;
gap: 8px;
}
.monthly-offer-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
text-align: center;
}
.monthly-offer-btn.primary {
background: #F59E0B;
color: #1a1a1a;
}
.monthly-offer-btn.primary:hover {
background: #1a1a1a;
color: #fff;
}
.monthly-offer-btn.secondary {
background: #f5f5f5;
color: #555;
border: 2px solid #eee;
}
.monthly-offer-btn.secondary:hover {
border-color: #F59E0B;
color: #1a1a1a;
}
/* =====================================================
CLIENT PORTAL / PRIVATE PROJECTS STYLES
===================================================== */
.client-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
border-bottom: 2px solid #eee;
padding-bottom: 12px;
flex-wrap: wrap;
}
.client-tab {
background: transparent;
color: #555;
border: none;
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
position: relative;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
}
.client-tab:hover {
color: #2563EB;
}
.client-tab.active {
color: #2563EB;
}
.client-tab.active::after {
content: '';
position: absolute;
bottom: -14px;
left: 0;
width: 100%;
height: 3px;
background: #2563EB;
}
.client-tab i {
font-size: 0.85rem;
}
.client-privacy-notice {
background: linear-gradient(135deg, #dbeafe, #eff6ff);
border: 2px solid #2563EB;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 14px;
}
.client-privacy-notice i {
color: #2563EB;
font-size: 1.5rem;
flex-shrink: 0;
}
.client-privacy-notice p {
color: #1e40af;
font-size: 0.9rem;
margin: 0;
}
.project-card.private {
border: 2px solid #2563EB;
}
.project-card.private::before {
content: 'PRIVATE';
position: absolute;
top: -1px;
right: -1px;
background: #2563EB;
color: #fff;
padding: 3px 10px;
border-radius: 0 0 0 10px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 1px;
}
.private-files .file-item a {
color: #2563EB;
}
.private-files .file-item a:hover {
color: #1a1a1a;
}
.project-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.project-popup-overlay.active {
display: flex;
}
.project-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 800px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #2563EB;
}
.project-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.project-popup-close:hover {
background: #2563EB;
color: #fff;
transform: rotate(90deg);
}
.project-popup-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
min-height: 400px;
}
.project-popup-media {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px 0 0 20px;
}
.project-popup-media img {
width: 100%;
max-width: 280px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 16px;
border: 3px solid #2563EB;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.project-popup-details {
padding: 35px 30px;
display: flex;
flex-direction: column;
}
.project-popup-badge {
display: inline-block;
background: #2563EB;
color: #fff;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
width: fit-content;
}
.project-popup-details h2 {
color: #1a1a1a;
font-size: 1.7rem;
margin-bottom: 6px;
}
.project-popup-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 16px 0;
}
.project-popup-meta-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px 16px;
}
.project-popup-meta-item .meta-label {
color: #999;
font-size: 0.75rem;
display: block;
margin-bottom: 2px;
}
.project-popup-meta-item .meta-value {
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 600;
}
.project-popup-files {
background: #f8f8f8;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
}
.project-popup-files h4 {
color: #1a1a1a;
font-size: 0.95rem;
margin-bottom: 10px;
}
.project-popup-files .file-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.project-popup-files .file-item:last-child {
border-bottom: none;
}
.project-popup-files .file-item a {
color: #2563EB;
font-size: 0.9rem;
}
.project-popup-files .file-item a:hover {
color: #1a1a1a;
}
.project-popup-actions {
display: flex;
gap: 10px;
margin-top: auto;
}
.project-popup-actions button {
flex: 1;
padding: 12px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
}
.project-popup-actions button.primary {
background: #2563EB;
color: #fff;
}
.project-popup-actions button.primary:hover {
background: #1a1a1a;
}
.project-popup-actions button.secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.project-popup-actions button.secondary:hover {
border-color: #2563EB;
}
/* =====================================================
BEAT STORE — PACK STYLES
===================================================== */
.beat-pack-badge {
position: absolute;
top: 10px;
left: 10px;
background: #8B5CF6;
color: #fff;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.5px;
z-index: 2;
display: flex;
align-items: center;
gap: 4px;
}
.pack-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.pack-popup-overlay.active {
display: flex;
}
.pack-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #8B5CF6;
}
.pack-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.pack-popup-close:hover {
background: #8B5CF6;
color: #fff;
transform: rotate(90deg);
}
.pack-popup-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
min-height: 400px;
}
.pack-popup-media {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px 0 0 20px;
}
.pack-popup-media img {
width: 100%;
max-width: 280px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 16px;
border: 3px solid #8B5CF6;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.pack-popup-details {
padding: 35px 30px;
display: flex;
flex-direction: column;
}
.pack-popup-badge {
display: inline-block;
background: #8B5CF6;
color: #fff;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 14px;
width: fit-content;
}
.pack-popup-details h2 {
color: #1a1a1a;
font-size: 1.7rem;
margin-bottom: 6px;
}
.pack-popup-subtitle {
color: #777;
font-size: 1rem;
margin-bottom: 16px;
}
.pack-popup-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.pack-popup-meta-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.pack-popup-meta-item i {
color: #8B5CF6;
font-size: 1rem;
}
.pack-popup-meta-item span {
color: #333;
font-size: 0.9rem;
font-weight: 500;
}
.pack-samples-section {
background: #f8f8f8;
border-radius: 12px;
padding: 16px;
margin-bottom: 20px;
}
.pack-samples-section h3 {
color: #1a1a1a;
font-size: 0.95rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.pack-samples-section h3 i {
color: #8B5CF6;
}
.pack-samples-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.pack-sample-item {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
padding: 10px 14px;
transition: all 0.3s;
}
.pack-sample-item:hover {
border-color: #8B5CF6;
}
.pack-sample-play {
width: 36px;
height: 36px;
background: #8B5CF6;
color: #fff;
border: none;
border-radius: 50%;
font-size: 0.8rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pack-sample-play:hover {
background: #1a1a1a;
}
.pack-sample-info {
flex: 1;
}
.pack-sample-info h4 {
color: #1a1a1a;
font-size: 0.9rem;
margin-bottom: 2px;
}
.pack-sample-info p {
color: #999;
font-size: 0.75rem;
}
.pack-sample-buy {
background: #FFC107;
color: #1a1a1a;
border: none;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.pack-sample-buy:hover {
background: #1a1a1a;
color: #fff;
}
.pack-popup-actions {
display: flex;
gap: 10px;
margin-top: auto;
}
.pack-popup-actions button {
flex: 1;
padding: 14px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.pack-popup-actions button.primary {
background: #8B5CF6;
color: #fff;
}
.pack-popup-actions button.primary:hover {
background: #1a1a1a;
}
.pack-popup-actions button.secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.pack-popup-actions button.secondary:hover {
border-color: #8B5CF6;
}
.lease-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.lease-popup-overlay.active {
display: flex;
}
.lease-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 650px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #FFC107;
}
.lease-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.lease-popup-close:hover {
background: #FFC107;
color: #1a1a1a;
transform: rotate(90deg);
}
.lease-popup-header {
display: flex;
align-items: center;
gap: 16px;
padding: 30px 30px 0;
}
.lease-popup-icon {
width: 56px;
height: 56px;
background: #FFC107;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
font-size: 1.5rem;
}
.lease-popup-header h2 {
color: #1a1a1a;
font-size: 1.5rem;
margin-bottom: 2px;
}
.lease-popup-header p {
color: #999;
font-size: 0.9rem;
}
.lease-popup-body {
padding: 20px 30px;
}
.lease-type-selector {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.lease-type-btn {
flex: 1;
padding: 12px;
border-radius: 10px;
border: 2px solid #eee;
background: #fff;
color: #555;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}
.lease-type-btn.active {
border-color: #FFC107;
background: #FFC107;
color: #1a1a1a;
}
.lease-type-btn:hover:not(.active) {
border-color: #ccc;
}
.lease-details {
background: #f8f8f8;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
}
.lease-details h3 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 12px;
}
.lease-details ul {
list-style: none;
}
.lease-details li {
color: #555;
font-size: 0.9rem;
padding: 6px 0;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #eee;
}
.lease-details li:last-child {
border-bottom: none;
}
.lease-details li i.fa-check {
color: #10B981;
}
.lease-details li i.fa-times {
color: #DC2626;
}
.lease-payment-section h3 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 12px;
}
.lease-payment-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.lease-payment-btn {
padding: 14px;
border-radius: 10px;
border: 2px solid #eee;
background: #fff;
color: #555;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lease-payment-btn:hover {
border-color: #2563EB;
color: #2563EB;
}
.lease-payment-btn.selected {
border-color: #2563EB;
background: #eff6ff;
color: #2563EB;
}
.lease-popup-footer {
display: flex;
gap: 12px;
padding: 0 30px 30px;
}
.lease-popup-btn {
flex: 1;
padding: 14px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.lease-popup-btn.primary {
background: #2563EB;
color: #fff;
}
.lease-popup-btn.primary:hover {
background: #1a1a1a;
}
.lease-popup-btn.secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.lease-popup-btn.secondary:hover {
border-color: #FFC107;
}
/* =====================================================
PURCHASES — ENHANCED STYLES
===================================================== */
.purchase-stat-card.clickable {
cursor: pointer;
}
.purchase-stat-card.clickable:hover {
border-color: #2563EB;
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.purchase-contract-link {
color: #2563EB;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color 0.3s;
}
.purchase-contract-link:hover {
color: #1a1a1a;
}
.purchase-detail-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.purchase-detail-overlay.active {
display: flex;
}
.purchase-detail-window {
background: #ffffff;
border-radius: 20px;
max-width: 500px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #2563EB;
}
.purchase-detail-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.purchase-detail-close:hover {
background: #2563EB;
color: #fff;
transform: rotate(90deg);
}
.purchase-detail-header {
padding: 30px 30px 0;
}
.purchase-detail-header h2 {
color: #1a1a1a;
font-size: 1.5rem;
}
.purchase-detail-body {
padding: 20px 30px 30px;
}
/* =====================================================
PORTAL PAGE — DASHBOARD GRID & POPUP
===================================================== */
.portal-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.portal-box {
background: #ffffff;
border: 2px solid #eee;
border-radius: 15px;
padding: 24px;
text-align: center;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
cursor: pointer;
position: relative;
overflow: hidden;
}
.portal-box:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.portal-box-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.4rem;
margin: 0 auto 14px;
}
.portal-box h3 {
color: #1a1a1a;
font-size: 1.1rem;
margin-bottom: 6px;
}
.portal-box p {
color: #777;
font-size: 0.85rem;
margin-bottom: 12px;
}
.portal-box-arrow {
color: #ccc;
font-size: 1rem;
transition: all 0.3s;
}
.portal-box:hover .portal-box-arrow {
color: #FFC107;
transform: translateX(4px);
}
.portal-popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
z-index: 2000;
justify-content: center;
align-items: center;
padding: 20px;
}
.portal-popup-overlay.active {
display: flex;
}
.portal-popup-window {
background: #ffffff;
border-radius: 20px;
max-width: 550px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
position: relative;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
border: 2px solid #2563EB;
}
.portal-popup-close {
position: absolute;
top: 16px;
right: 20px;
background: #f5f5f5;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.6rem;
color: #333;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.portal-popup-close:hover {
background: #2563EB;
color: #fff;
transform: rotate(90deg);
}
.portal-popup-grid {
display: grid;
grid-template-columns: 1fr 2fr;
min-height: 300px;
}
.portal-popup-media {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
border-radius: 20px 0 0 20px;
}
.portal-popup-icon-large {
width: 80px;
height: 80px;
background: #2563EB;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2rem;
}
.portal-popup-details {
padding: 30px;
display: flex;
flex-direction: column;
}
.portal-popup-badge {
display: inline-block;
background: #2563EB;
color: #fff;
padding: 4px 14px;
border-radius: 30px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 12px;
width: fit-content;
}
.portal-popup-details h2 {
color: #1a1a1a;
font-size: 1.5rem;
margin-bottom: 6px;
}
.portal-popup-details p {
color: #777;
font-size: 0.95rem;
margin-bottom: 16px;
}
.portal-popup-features {
margin-bottom: 20px;
}
.portal-popup-features ul {
list-style: none;
}
.portal-popup-features li {
color: #555;
font-size: 0.9rem;
padding: 6px 0;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #f0f0f0;
}
.portal-popup-features li i {
color: #10B981;
}
.portal-popup-actions {
display: flex;
gap: 10px;
margin-top: auto;
}
.portal-popup-actions a,
.portal-popup-actions button {
flex: 1;
padding: 12px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.portal-popup-actions .primary {
background: #2563EB;
color: #fff;
}
.portal-popup-actions .primary:hover {
background: #1a1a1a;
}
.portal-popup-actions .secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.portal-popup-actions .secondary:hover {
border-color: #2563EB;
}
/* =====================================================
DASHBOARD QUICK STATS
===================================================== */
.dashboard-quick-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 30px;
}
.quick-stat-card {
background: #ffffff;
border: 2px solid #eee;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.quick-stat-card:hover {
border-color: #2563EB;
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.quick-stat-card i {
font-size: 1.8rem;
color: #2563EB;
margin-bottom: 8px;
}
.quick-stat-value {
display: block;
color: #1a1a1a;
font-size: 1.4rem;
font-weight: 700;
}
.quick-stat-label {
display: block;
color: #999;
font-size: 0.8rem;
}
/* =====================================================
DASHBOARD MONTHLY TEASER
===================================================== */
.dashboard-monthly-teaser {
background: #ffffff;
border-radius: 15px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.monthly-icon {
width: 48px;
height: 48px;
background: #F59E0B;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.3rem;
}
.monthly-teaser-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
background: #f8f8f8;
border: 2px solid #F59E0B;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s;
}
.monthly-teaser-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
.monthly-teaser-cover {
width: 100%;
height: 100%;
min-height: 150px;
}
.monthly-teaser-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.monthly-teaser-info {
padding: 24px;
}
.monthly-teaser-info h3 {
color: #1a1a1a;
font-size: 1.3rem;
margin-bottom: 8px;
}
.monthly-teaser-discount {
color: #F59E0B;
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 6px;
}
.monthly-teaser-slots {
color: #2563EB;
font-size: 0.9rem;
margin-bottom: 14px;
}
.monthly-teaser-btn {
background: #F59E0B;
color: #1a1a1a;
border: none;
padding: 10px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.monthly-teaser-btn:hover {
background: #1a1a1a;
color: #fff;
}
/* =====================================================
RESPONSIVE UPGRADES
===================================================== */
@media (max-width: 768px) {
.contracts-grid {
grid-template-columns: 1fr;
}
.monthly-offers-grid {
grid-template-columns: 1fr;
}
.pack-popup-grid,
.project-popup-grid {
grid-template-columns: 1fr;
}
.pack-popup-media,
.project-popup-media {
border-radius: 20px 20px 0 0;
min-height: 200px;
}
.portal-popup-grid {
grid-template-columns: 1fr;
}
.portal-popup-media {
border-radius: 20px 20px 0 0;
min-height: 120px;
}
.dashboard-quick-stats {
grid-template-columns: repeat(2, 1fr);
}
.monthly-teaser-card {
grid-template-columns: 1fr;
}
.lease-payment-options {
grid-template-columns: 1fr;
}
.client-tabs {
justify-content: center;
}
.contract-popup-footer,
.lease-popup-footer,
.pack-popup-actions,
.project-popup-actions,
.portal-popup-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.dashboard-quick-stats {
grid-template-columns: 1fr;
}
.portal-dashboard-grid {
grid-template-columns: 1fr;
}
.contract-actions {
flex-direction: column;
}
.monthly-offer-actions {
flex-direction: column;
}
}
/* =====================================================
SERIES PAGE — GLOBAL SEARCH BAR
===================================================== */
.series-global-search {
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
border: 2px solid #FFC107;
border-radius: 50px;
padding: 12px 24px;
margin-bottom: 30px;
transition: all 0.3s;
max-width: 600px;
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.series-global-search:focus-within {
border-color: #1a1a1a;
box-shadow: 0 6px 25px rgba(255, 193, 7, 0.2);
transform: translateY(-2px);
}
.series-global-search i {
color: #FFC107;
font-size: 1.1rem;
}
.series-global-search input {
flex: 1;
border: none;
background: transparent;
color: #1a1a1a;
font-size: 1rem;
font-family: 'Inter', sans-serif;
outline: none;
}
.series-global-search input::placeholder {
color: #aaa;
}
/* =====================================================
PORTAL PAGE — SMALLER ICONS
===================================================== */
.portal-box-icon {
width: 42px !important;
height: 42px !important;
border-radius: 10px !important;
font-size: 1rem !important;
margin-bottom: 10px !important;
}
.portal-box {
padding: 18px !important;
}
.portal-box h3 {
font-size: 1rem !important;
margin-bottom: 4px !important;
}
.portal-box p {
font-size: 0.8rem !important;
margin-bottom: 8px !important;
}
/* =====================================================
PORTAL PAGE — SIDE BY SIDE AUTH
===================================================== */
.portal-auth-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 30px;
align-items: start;
}
.portal-auth-left {
background: #ffffff;
border: 2px solid #2563EB;
border-radius: 15px;
padding: 28px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.portal-auth-right {
background: #f8f8f8;
border: 2px solid #eee;
border-radius: 15px;
padding: 28px;
}
.portal-auth-right .auth-benefits {
margin-top: 0;
background: transparent;
border: none;
padding: 0;
}
/* =====================================================
PORTAL POPUP — SEARCH INSIDE
===================================================== */
.portal-popup-search {
display: flex;
align-items: center;
gap: 10px;
background: #f8f8f8;
border: 2px solid #eee;
border-radius: 50px;
padding: 10px 18px;
margin-bottom: 16px;
width: 100%;
transition: all 0.3s;
}
.portal-popup-search:focus-within {
border-color: #2563EB;
}
.portal-popup-search i {
color: #999;
font-size: 0.9rem;
}
.portal-popup-search input {
flex: 1;
border: none;
background: transparent;
color: #1a1a1a;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
outline: none;
}
.portal-popup-search input::placeholder {
color: #aaa;
}
/* =====================================================
POPUP ACTIONS BUTTON STYLING
===================================================== */
.portal-popup-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.portal-popup-actions a,
.portal-popup-actions button {
padding: 12px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.portal-popup-actions a.primary {
background: #2563EB;
color: #fff;
}
.portal-popup-actions a.primary:hover {
background: #1a1a1a;
}
.portal-popup-actions button.secondary {
background: #f5f5f5;
color: #333;
border: 2px solid #eee;
}
.portal-popup-actions button.secondary:hover {
border-color: #2563EB;
}
/* =====================================================
POPUP META ITEM FIX
===================================================== */
.popup-meta-item {
background: #f8f8f8;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 10px;
}
.popup-meta-item i {
color: #FFC107;
font-size: 1rem;
width: 20px;
text-align: center;
}
.popup-meta-item .meta-label {
color: #999;
font-size: 0.75rem;
display: block;
margin-bottom: 2px;
}
.popup-meta-item .meta-value {
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 600;
}
/* =====================================================
RESPONSIVE FIXES
===================================================== */
@media (max-width: 768px) {
.portal-auth-wrapper {
grid-template-columns: 1fr;
}
.series-global-search {
max-width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.portal-box-icon {
width: 38px !important;
height: 38px !important;
font-size: 0.9rem !important;
}
}
@media (max-width: 480px) {
.portal-auth-wrapper {
gap: 20px;
}
.portal-auth-left,
.portal-auth-right {
padding: 18px;
}
}
/* =====================================================
MODERN PAYMENT METHODS - REDESIGNED
===================================================== */
.payment-methods-section {
background: #ffffff;
border-radius: 16px;
padding: 24px;
margin-top: 30px;
border: 1px solid #e8edf2;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.payment-methods-section h4 {
color: #1a1a1a;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.payment-methods-section h4 i {
color: #2563EB;
font-size: 1.1rem;
}
.payment-methods-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.payment-method {
display: flex;
align-items: center;
gap: 8px;
background: #f8fafc;
border: 1px solid #e8edf2;
border-radius: 10px;
padding: 10px 16px;
transition: all 0.25s ease;
cursor: default;
}
.payment-method:hover {
border-color: #2563EB;
background: #f0f7ff;
transform: translateY(-1px);
}
.payment-method.featured {
background: #2563EB;
border-color: #2563EB;
}
.payment-method.featured .payment-method-name {
color: #fff;
}
.payment-method.featured .payment-method-icon i {
color: #fff;
}
.payment-method.featured .payment-method-badge {
background: rgba(255,255,255,0.2);
color: #fff;
}
.payment-method.featured:hover {
background: #1d4ed8;
border-color: #1d4ed8;
}
.payment-method-icon i {
font-size: 1.2rem;
color: #6b7280;
}
.payment-method-name {
font-size: 0.8rem;
font-weight: 500;
color: #1a1a1a;
}
.payment-method-badge {
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
background: #dbeafe;
color: #2563EB;
padding: 2px 8px;
border-radius: 20px;
}
.payment-secure-badge {
margin-top: 14px;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
color: #6b7280;
}
.payment-secure-badge i {
color: #10b981;
font-size: 0.85rem;
}
/* =====================================================
MODERN SEARCH BAR - PORTAL
===================================================== */
.portal-global-search {
display: flex;
align-items: center;
background: #ffffff;
border: 2px solid #e8edf2;
border-radius: 12px;
padding: 0 16px;
margin-bottom: 24px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
max-width: 100%;
}
.portal-global-search:focus-within {
border-color: #2563EB;
box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
}
.portal-global-search i {
color: #9ca3af;
font-size: 0.9rem;
margin-right: 12px;
}
.portal-global-search input {
flex: 1;
border: none;
background: transparent;
color: #1a1a1a;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
outline: none;
padding: 14px 0;
}
.portal-global-search input::placeholder {
color: #9ca3af;
font-weight: 400;
}
.portal-search-btn {
background: transparent;
border: none;
color: #9ca3af;
font-size: 1rem;
cursor: pointer;
padding: 10px 0 10px 12px;
transition: color 0.3s;
display: flex;
align-items: center;
}
.portal-search-btn:hover {
color: #2563EB;
}
/* =====================================================
SLIDER PLACEHOLDER - HOME PAGE
===================================================== */
.desktop-slide { display: block; }
.tablet-slide { display: none; }
.mobile-slide { display: none; }
.banner-slider {
width: 100vw;
height: 100vh;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
background: #1a1a1a;
}
.banner-track {
display: flex;
width: 500%;
height: 100%;
animation: scroll 25s linear infinite;
}
.slide {
width: 100vw;
height: 100vh;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1a1a1a;
position: relative;
}
.slide-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.slide-img[src*="slider-placeholder"] {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}
.slide-img[src*="slider-placeholder-1"] {
background: linear-gradient(135deg, #1a1a1a, #2d1b69);
}
.slide-img[src*="slider-placeholder-2"] {
background: linear-gradient(135deg, #1a1a1a, #6b1b1b);
}
.slide-img[src*="slider-placeholder-3"] {
background: linear-gradient(135deg, #1a1a1a, #1b4d6b);
}
.slide-img[src*="slider-placeholder-4"] {
background: linear-gradient(135deg, #1a1a1a, #4d1b6b);
}
@keyframes scroll {
0% { transform: translateX(0); }
20% { transform: translateX(0); }
25% { transform: translateX(-20%); }
45% { transform: translateX(-20%); }
50% { transform: translateX(-40%); }
70% { transform: translateX(-40%); }
75% { transform: translateX(-60%); }
95% { transform: translateX(-60%); }
100% { transform: translateX(-80%); }
}
@media (max-width: 1024px) {
.desktop-slide { display: none; }
.tablet-slide { display: block; }
.mobile-slide { display: none; }
}
@media (max-width: 768px) {
.desktop-slide { display: none; }
.tablet-slide { display: none; }
.mobile-slide { display: block; }
}
/* =====================================================
SETTINGS PAGE STYLES
===================================================== */
.settings-container {
max-width: 800px;
margin: 0 auto;
}
.settings-section {
background: #ffffff;
border-radius: 16px;
padding: 28px 32px;
margin-bottom: 24px;
border: 1px solid #e8edf2;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.settings-section h2 {
color: #1a1a1a;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.settings-section h2 i {
color: #2563EB;
font-size: 1.1rem;
}
.settings-section.danger {
border-color: #fecaca;
}
.settings-section.danger h2 i {
color: #dc2626;
}
.settings-form .form-group {
margin-bottom: 16px;
}
.settings-form .form-group label {
display: block;
color: #374151;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 5px;
}
.settings-form .form-group input,
.settings-form .form-group select {
width: 100%;
padding: 10px 14px;
border: 2px solid #e8edf2;
border-radius: 10px;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
transition: all 0.3s;
background: #fafbfc;
color: #1a1a1a;
}
.settings-form .form-group input:focus,
.settings-form .form-group select:focus {
outline: none;
border-color: #2563EB;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}
.settings-save-btn {
background: #2563EB;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.settings-save-btn:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}
.terms-box {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
border: 1px solid #e8edf2;
max-height: 400px;
overflow-y: auto;
}
.terms-content h3 {
color: #1a1a1a;
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
.terms-content h4 {
color: #2563EB;
font-size: 0.9rem;
font-weight: 600;
margin-top: 14px;
margin-bottom: 6px;
}
.terms-content p {
color: #4b5563;
font-size: 0.85rem;
line-height: 1.7;
margin-bottom: 4px;
}
.terms-signature {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e8edf2;
}
.terms-signature label {
display: flex;
align-items: center;
gap: 10px;
color: #374151;
font-size: 0.85rem;
margin-bottom: 12px;
cursor: pointer;
}
.terms-signature input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #2563EB;
cursor: pointer;
}
.danger-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.danger-btn {
padding: 10px 20px;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
border: 2px solid #e8edf2;
background: #ffffff;
color: #374151;
display: inline-flex;
align-items: center;
gap: 8px;
}
.danger-btn:hover {
border-color: #6b7280;
background: #f8fafc;
}
.danger-btn.delete {
border-color: #fecaca;
color: #dc2626;
}
.danger-btn.delete:hover {
background: #fef2f2;
border-color: #dc2626;
}
.settings-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2563EB;
font-weight: 500;
font-size: 0.9rem;
transition: all 0.3s;
padding: 10px 20px;
border-radius: 10px;
border: 2px solid #e8edf2;
}
.settings-back-btn:hover {
border-color: #2563EB;
background: #f0f7ff;
}
/* =====================================================
PORTAL PROFILE CARD
===================================================== */
.portal-profile-card {
background: linear-gradient(135deg, #ffffff, #f8f8f8);
border: 2px solid #FFC107;
border-radius: 15px;
padding: 24px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: #2563EB;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.8rem;
font-weight: 700;
flex-shrink: 0;
}
.profile-info {
flex: 1;
}
.profile-info h3 {
color: #1a1a1a;
font-size: 1.4rem;
margin-bottom: 4px;
}
.profile-info p {
color: #777;
font-size: 0.9rem;
margin-bottom: 2px;
}
.profile-info p i {
color: #FFC107;
width: 18px;
}
.profile-badge {
display: inline-block;
background: #FFC107;
color: #1a1a1a;
padding: 2px 14px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 4px;
}
.profile-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.profile-btn {
padding: 8px 20px;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: 2px solid #2563EB;
background: transparent;
color: #2563EB;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.profile-btn:hover {
background: #2563EB;
color: #fff;
}
.profile-btn.signout {
border-color: #DC2626;
color: #DC2626;
}
.profile-btn.signout:hover {
background: #DC2626;
color: #fff;
}
/* =====================================================
PORTAL SIDEBAR - ADMIN PANEL STYLE
(Blue arrow removed. Collapsed = icons only, like admin.)
===================================================== */
.portal-layout {
display: flex;
gap: 0;
min-height: 80vh;
background: #f5f7fa;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
position: relative;
}
.portal-sidebar {
width: 270px;
min-height: 80vh;
background: #ffffff;
border-right: 1px solid #e8edf2;
flex-shrink: 0;
padding: 24px 16px;
display: flex;
flex-direction: column;
overflow-y: auto;
transition: width 0.35s ease, padding 0.35s ease, margin 0.35s ease;
position: relative;
z-index: 10;
}
/* Collapsed: narrow rail, icons only (same as admin panel) */
.portal-sidebar.collapsed {
width: 70px;
padding: 16px 8px;
margin: 0;
overflow: hidden;
border-right: 1px solid #e8edf2;
flex: 0 0 70px;
min-width: 70px;
}
/* Toggle button: small admin-style collapse button at the top */
.sidebar-toggle-btn {
position: relative;
top: auto;
left: auto;
transform: none;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid #e8edf2;
border-radius: 8px;
cursor: pointer;
z-index: 25;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
box-shadow: none;
color: #555;
margin: 0 0 12px auto;
}
.sidebar-toggle-btn i {
font-size: 0.8rem;
transition: transform 0.35s ease;
}
.sidebar-toggle-btn:hover {
background: #f0f7ff;
border-color: #2563EB;
color: #2563EB;
width: 28px;
box-shadow: none;
}
/* Collapsed: hide text, keep icons visible */
.portal-sidebar.collapsed .sidebar-profile .profile-info,
.portal-sidebar.collapsed .sidebar-profile .profile-badge,
.portal-sidebar.collapsed .sidebar-link span {
display: none;
}
.portal-sidebar.collapsed .sidebar-profile {
text-align: center;
padding-bottom: 12px;
border-bottom: none;
margin-bottom: 8px;
}
.portal-sidebar.collapsed .sidebar-profile .profile-avatar {
width: 44px;
height: 44px;
font-size: 1rem;
margin: 0 auto;
}
.portal-sidebar.collapsed .sidebar-link {
justify-content: center;
padding: 12px 8px;
}
.portal-sidebar.collapsed .sidebar-link i {
width: auto;
margin: 0;
font-size: 1.1rem;
}
.portal-sidebar.collapsed .sidebar-footer {
border-top: none;
padding-top: 4px;
}
/* Sidebar Profile */
.sidebar-profile {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid #e8edf2;
margin-bottom: 16px;
}
.sidebar-profile .profile-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: #2563EB;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.6rem;
font-weight: 700;
margin: 0 auto 12px;
}
.sidebar-profile .profile-info h3 {
color: #1a1a1a;
font-size: 1.1rem;
margin-bottom: 2px;
}
.sidebar-profile .profile-info p {
color: #777;
font-size: 0.8rem;
margin-bottom: 2px;
}
.sidebar-profile .profile-info p i {
color: #FFC107;
width: 16px;
font-size: 0.75rem;
}
.sidebar-profile .profile-badge {
display: inline-block;
background: #FFC107;
color: #1a1a1a;
padding: 2px 12px;
border-radius: 20px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 4px;
}
/* Sidebar Navigation */
.sidebar-nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
color: #555;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
text-decoration: none;
cursor: pointer;
}
.sidebar-link i {
width: 20px;
text-align: center;
font-size: 1rem;
color: #999;
transition: color 0.25s;
}
.sidebar-link:hover {
background: #f0f7ff;
color: #2563EB;
}
.sidebar-link:hover i {
color: #2563EB;
}
.sidebar-link.active {
background: #2563EB;
color: #fff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.sidebar-link.active i {
color: #fff;
}
/* Sidebar Footer */
.sidebar-footer {
border-top: 1px solid #e8edf2;
padding-top: 12px;
margin-top: 4px;
}
.sidebar-footer .sidebar-link {
color: #DC2626;
}
.sidebar-footer .sidebar-link i {
color: #DC2626;
}
.sidebar-footer .sidebar-link:hover {
background: #fef2f2;
color: #DC2626;
}
/* Main Content */
.portal-main-content {
flex: 1;
padding: 30px 35px;
background: #f5f7fa;
min-height: 80vh;
}
.portal-main-content #pageContent h2 {
color: #1a1a1a;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 6px;
}
.portal-main-content #pageContent > p {
color: #777;
font-size: 0.95rem;
margin-bottom: 16px;
}
.welcome-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
}
.welcome-section h2 {
font-size: 1.8rem;
margin-bottom: 8px;
}
.welcome-section p {
color: #999;
font-size: 1.1rem;
}
/* =====================================================
RESPONSIVE FIXES FOR SIDEBAR TOGGLE
===================================================== */
@media (max-width: 768px) {
.portal-sidebar:not(.collapsed) {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
max-height: 100vh;
z-index: 100;
border-radius: 0;
padding-top: 20px;
box-shadow: 4px 0 30px rgba(0,0,0,0.15);
flex: 0 0 280px;
min-width: 280px;
}
.portal-sidebar.collapsed {
width: 0;
min-width: 0;
flex: 0 0 0;
padding: 0;
overflow: hidden;
border: none;
}
/* On mobile only, keep a small blue edge tab so the sidebar can be reopened */
.portal-sidebar.collapsed .sidebar-toggle-btn {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 38px;
background: #2563EB;
border: none;
border-radius: 0 8px 8px 0;
box-shadow: 2px 0 12px rgba(37, 99, 235, 0.3);
color: #fff;
margin: 0;
z-index: 101;
}
.portal-sidebar.collapsed .sidebar-toggle-btn i {
font-size: 0.5rem;
color: #fff;
}
.sidebar-toggle-btn:hover {
width: 20px;
}
.portal-main-content {
padding: 20px 16px;
min-height: 70vh;
}
}
@media (max-width: 480px) {
.portal-sidebar.collapsed .sidebar-toggle-btn {
width: 16px;
height: 34px;
}
.portal-sidebar.collapsed .sidebar-toggle-btn i {
font-size: 0.45rem;
}
.portal-main-content {
padding: 16px 12px;
}
.portal-main-content #pageContent h2 {
font-size: 1.2rem;
}
}
/* =====================================================
BEAT STORE PLAYER
===================================================== */
.store-player {
background: #1a1a1a;
border-radius: 15px;
padding: 20px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.store-player-track {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.store-player-cover {
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #FFC107;
}
.store-player-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.store-player-details h3 {
color: #fff;
font-size: 1.1rem;
margin-bottom: 2px;
}
.store-player-details p {
color: #999;
font-size: 0.8rem;
}
.store-player-controls {
flex: 1;
display: flex;
align-items: center;
gap: 14px;
min-width: 200px;
}
.store-player-btn {
background: #FFC107;
color: #1a1a1a;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
flex-shrink: 0;
}
.store-player-btn:hover {
background: #fff;
transform: scale(1.05);
}
.store-player-progress {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 120px;
}
.store-progress-time {
color: #999;
font-size: 0.75rem;
font-family: 'Inter', monospace;
min-width: 35px;
}
.store-progress-bar {
flex: 1;
height: 5px;
background: #333;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.store-progress-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 0%;
}
.store-player-volume {
display: flex;
align-items: center;
gap: 8px;
}
.store-volume-btn {
background: none;
border: none;
color: #999;
font-size: 0.9rem;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}
.store-volume-btn:hover {
color: #FFC107;
}
.store-volume-slider {
width: 70px;
height: 5px;
background: #333;
border-radius: 3px;
cursor: pointer;
position: relative;
}
.store-volume-fill {
height: 100%;
background: #FFC107;
border-radius: 3px;
width: 70%;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 768px) {
.portal-sidebar {
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100vh;
max-height: 100vh;
z-index: 100;
border-radius: 0;
padding-top: 20px;
transition: transform 0.35s ease;
transform: translateX(0);
box-shadow: 4px 0 30px rgba(0,0,0,0.15);
}
.portal-sidebar.collapsed {
width: 0;
min-width: 0;
padding: 0;
overflow: hidden;
border: none;
transform: none;
}
.portal-main-content {
padding: 20px 16px;
min-height: 70vh;
}
.welcome-section {
min-height: 200px;
}
.welcome-section h2 {
font-size: 1.3rem;
}
.store-player {
flex-direction: column;
align-items: stretch;
}
.store-player-controls {
min-width: auto;
}
}
@media (max-width: 480px) {
.portal-main-content {
padding: 16px 12px;
}
.portal-main-content #pageContent h2 {
font-size: 1.2rem;
}
}
/* =====================================================
ABOUT PAGE - STORY SECTION WITH IMAGE
===================================================== */
.story-section {
padding: 0;
overflow: hidden;
background: #ffffff;
}
.story-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 0;
align-items: center;
min-height: 320px;
}
.story-image {
width: 100%;
height: 100%;
min-height: 300px;
overflow: hidden;
}
.story-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-text {
padding: 40px 40px 40px 30px;
}
.story-text h2 {
color: #1a1a1a;
font-size: 1.8rem;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 3px solid #FFC107;
}
.story-text .about-story {
font-size: 1.2rem;
font-weight: 600;
color: #FFC107;
margin-bottom: 12px;
}
.story-text p {
color: #333;
font-size: 1.05rem;
line-height: 1.8;
}
/* =====================================================
ABOUT PAGE - WHAT WE DO BANNER
===================================================== */
.what-we-do-section h2 {
color: #1a1a1a;
font-size: 1.8rem;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 3px solid #FFC107;
}
.what-we-do-banner {
width: 100%;
margin: 16px 0 24px;
border-radius: 12px;
overflow: hidden;
border: 2px solid #FFC107;
}
.what-we-do-banner img {
width: 100%;
height: auto;
display: block;
min-height: 100px;
object-fit: cover;
}
.what-we-do-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 10px;
}
.service-column h3 {
color: #FFC107;
font-size: 1.2rem;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 2px solid #eee;
}
.service-column ul {
list-style: none;
}
.service-column li {
color: #333;
margin-bottom: 8px;
font-size: 0.95rem;
}
/* =====================================================
ABOUT PAGE - CLIENTS WITH LOGOS
===================================================== */
.clients-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
margin: 16px 0;
}
.client-item {
background: #ffffff;
border: 2px solid #eee;
border-radius: 10px;
padding: 14px 12px;
text-align: center;
transition: all 0.3s;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-height: 100px;
justify-content: center;
}
.client-item:hover {
border-color: #FFC107;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.client-item img {
max-width: 60px;
max-height: 50px;
object-fit: contain;
display: block;
}
.client-item span {
color: #333;
font-weight: 500;
font-size: 0.85rem;
}
/* =====================================================
RESPONSIVE - ABOUT PAGE
===================================================== */
@media (max-width: 992px) {
.story-layout {
grid-template-columns: 1fr;
}
.story-image {
min-height: 200px;
}
.story-text {
padding: 30px 24px;
}
.what-we-do-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.story-text h2 {
font-size: 1.4rem;
}
.story-text p {
font-size: 0.95rem;
}
.what-we-do-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.what-we-do-banner img {
min-height: 60px;
}
.clients-grid {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.client-item {
min-height: 80px;
padding: 12px 8px;
}
.client-item img {
max-width: 40px;
max-height: 35px;
}
}
@media (max-width: 480px) {
.story-text {
padding: 20px 16px;
}
.story-text .about-story {
font-size: 1rem;
}
.clients-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.client-item {
min-height: 70px;
padding: 10px 6px;
}
}
/* =====================================================
NEWS PAGE STYLES
===================================================== */
.news-page {
padding: 30px 20px;
max-width: 1200px;
margin: 0 auto;
}
.news-hero {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
border-radius: 15px;
margin-bottom: 40px;
border: 2px solid #FFC107;
}
.news-hero h1 {
color: #FFC107;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
}
.news-hero p {
color: #aaa;
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.news-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
}
.news-main {
display: flex;
flex-direction: column;
gap: 30px;
}
.news-card {
background: #ffffff;
border-radius: 15px;
overflow: hidden;
border: 2px solid #eee;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.news-card:hover {
border-color: #FFC107;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.news-card-image {
width: 100%;
height: 220px;
background: #f0f0f0;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card-content {
padding: 24px;
}
.news-card-meta {
display: flex;
gap: 16px;
font-size: 0.8rem;
color: #999;
margin-bottom: 10px;
}
.news-card-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.news-card-meta i {
color: #FFC107;
}
.news-card h2 {
color: #1a1a1a;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 10px;
}
.news-card h2 a {
color: #1a1a1a;
transition: color 0.3s;
}
.news-card h2 a:hover {
color: #FFC107;
}
.news-card p {
color: #555;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 16px;
}
.news-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
border-top: 1px solid #eee;
}
.news-card-footer .read-more {
color: #2563EB;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: color 0.3s;
}
.news-card-footer .read-more:hover {
color: #FFC107;
}
.news-card-footer .social-share {
display: flex;
gap: 10px;
}
.news-card-footer .social-share a {
color: #999;
font-size: 0.9rem;
transition: color 0.3s;
}
.news-card-footer .social-share a:hover {
color: #FFC107;
}
/* Comments Section */
.comments-section {
background: #f8f8f8;
border-radius: 12px;
padding: 20px;
margin-top: 16px;
}
.comments-section h4 {
color: #1a1a1a;
font-size: 1rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.comments-section h4 i {
color: #FFC107;
}
.comment-item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.comment-item:last-child {
border-bottom: none;
}
.comment-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #2563EB;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
.comment-body {
flex: 1;
}
.comment-body .comment-author {
font-weight: 600;
color: #1a1a1a;
font-size: 0.85rem;
}
.comment-body .comment-date {
color: #999;
font-size: 0.7rem;
margin-left: 8px;
}
.comment-body p {
color: #555;
font-size: 0.85rem;
margin-top: 4px;
}
.comment-form {
margin-top: 12px;
display: flex;
gap: 10px;
}
.comment-form input {
flex: 1;
padding: 10px 14px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.3s;
}
.comment-form input:focus {
border-color: #2563EB;
}
.comment-form button {
background: #2563EB;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}
.comment-form button:hover {
background: #1a1a1a;
}
/* Sidebar */
.news-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
.sidebar-widget {
background: #ffffff;
border-radius: 15px;
padding: 24px;
border: 2px solid #eee;
}
.sidebar-widget h3 {
color: #1a1a1a;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #FFC107;
}
.sidebar-widget ul {
list-style: none;
}
.sidebar-widget ul li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.sidebar-widget ul li:last-child {
border-bottom: none;
}
.sidebar-widget ul li a {
color: #333;
font-size: 0.9rem;
transition: color 0.3s;
}
.sidebar-widget ul li a:hover {
color: #FFC107;
}
.sidebar-widget ul li span {
color: #999;
font-size: 0.75rem;
display: block;
}
.social-feed {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.social-feed-item {
background: #f8f8f8;
border-radius: 10px;
padding: 16px;
text-align: center;
transition: all 0.3s;
border: 1px solid transparent;
}
.social-feed-item:hover {
border-color: #FFC107;
transform: translateY(-2px);
}
.social-feed-item i {
font-size: 1.8rem;
margin-bottom: 6px;
}
.social-feed-item .fb { color: #1877F2; }
.social-feed-item .ig { color: #E4405F; }
.social-feed-item .tt { color: #000; }
.social-feed-item .yt { color: #FF0000; }
.social-feed-item .wa { color: #25D366; }
.social-feed-item .ds { color: #5865F2; }
.social-feed-item span {
display: block;
font-size: 0.7rem;
color: #777;
}
/* =====================================================
SMALLER NEWS RIBBON
===================================================== */
.news-ribbon {
padding: 6px 0 !important;
}
.news-item {
font-size: 0.75rem !important;
padding: 0 20px !important;
}
/* =====================================================
SMALLER STATS
===================================================== */
.stats-fullwidth {
padding: 10px 0 !important;
}
.stat-box {
padding: 8px 20px !important;
min-width: 120px !important;
gap: 10px !important;
}
.stat-icon {
font-size: 1.2rem !important;
}
.stat-value {
font-size: 1.2rem !important;
}
.stat-label {
font-size: 0.6rem !important;
}
/* =====================================================
RESPONSIVE NEWS PAGE
===================================================== */
@media (max-width: 992px) {
.news-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.news-hero h1 {
font-size: 1.8rem;
}
.news-card-image {
height: 160px;
}
.social-feed {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 480px) {
.news-card-footer {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.news-card-footer .social-share {
justify-content: center;
}
.comment-form {
flex-direction: column;
}
.social-feed {
grid-template-columns: 1fr 1fr;
}
}
/* =====================================================
CENTORO LIVE CHAT WIDGET — CONTACT PAGE ONLY
===================================================== */
.centoro-chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: #2563EB;
    border: 3px solid #FFC107;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease;
    animation: chatPulse 2s infinite;
}
.centoro-chat-fab:hover {
    transform: scale(1.1);
    background: #1d4ed8;
}
.centoro-chat-fab .chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #DC2626;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
@keyframes chatPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 8px 35px rgba(255, 193, 7, 0.6); }
}

.centoro-chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: #fff;
    border: 2px solid #FFC107;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: chatSlideUp 0.3s ease;
}
.centoro-chat-window.active {
    display: flex;
}
@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.centoro-chat-header {
    background: #1a1a1a;
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #FFC107;
}
.centoro-chat-header .chat-logo {
    width: 36px;
    height: 36px;
    background: #2563EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.centoro-chat-header-info h4 {
    color: #FFC107;
    font-size: 1rem;
    margin: 0 0 2px;
    font-weight: 700;
}
.centoro-chat-header-info p {
    color: #10B981;
    font-size: 0.75rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.centoro-chat-header-info p::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.centoro-chat-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #999;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}
.centoro-chat-close:hover {
    color: #FFC107;
    background: rgba(255, 193, 7, 0.1);
}

.centoro-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8f8f8;
}
.centoro-chat-body::-webkit-scrollbar {
    width: 6px;
}
.centoro-chat-body::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.centoro-chat-msg {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    max-width: 85%;
}
.centoro-chat-msg.bot {
    align-items: flex-start;
}
.centoro-chat-msg.user {
    align-items: flex-end;
    margin-left: auto;
}
.centoro-chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
}
.centoro-chat-msg.bot .centoro-chat-bubble {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #eee;
    border-bottom-left-radius: 4px;
}
.centoro-chat-msg.user .centoro-chat-bubble {
    background: #2563EB;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.centoro-chat-time {
    font-size: 0.65rem;
    color: #999;
    margin-top: 4px;
    padding: 0 4px;
}

.centoro-chat-form {
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.centoro-chat-field {
    margin-bottom: 10px;
}
.centoro-chat-field label {
    display: block;
    font-size: 0.75rem;
    color: #555;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.centoro-chat-field input,
.centoro-chat-field select,
.centoro-chat-field textarea {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    background: #fafbfc;
    color: #1a1a1a;
    transition: all 0.2s;
}
.centoro-chat-field input:focus,
.centoro-chat-field select:focus,
.centoro-chat-field textarea:focus {
    outline: none;
    border-color: #2563EB;
    background: #fff;
}
.centoro-chat-field textarea {
    resize: none;
    min-height: 60px;
}

.centoro-chat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.centoro-chat-send {
    width: 100%;
    background: #2563EB;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.centoro-chat-send:hover {
    background: #1a1a1a;
}
.centoro-chat-send:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.centoro-chat-powered {
    text-align: center;
    font-size: 0.65rem;
    color: #bbb;
    padding: 6px;
    background: #fafbfc;
    border-top: 1px solid #f0f0f0;
}
.centoro-chat-powered strong {
    color: #FFC107;
}

.centoro-chat-status {
    text-align: center;
    padding: 14px;
    background: #f0fdf4;
    border-radius: 10px;
    margin: 8px 0;
    color: #166534;
    font-size: 0.85rem;
    border: 1px solid #bbf7d0;
}
.centoro-chat-status i {
    color: #10B981;
    margin-right: 6px;
}

/* Mobile */
@media (max-width: 480px) {
    .centoro-chat-fab {
        bottom: 16px;
        right: 16px;
        width: 54px;
        height: 54px;
        font-size: 1.3rem;
    }
    .centoro-chat-window {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* =====================================================
IMPRESSUM SECTION - NEW ADDITION
===================================================== */
.impressum-section {
    scroll-margin-top: 100px;
}
.impressum-section h2 {
    color: #1a1a1a;
    font-size: 1.8rem;
    border-bottom: 2px solid #FFC107;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.impressum-section h3 {
    color: #2563EB;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.impressum-section p {
    color: #333;
    line-height: 1.8;
}
.impressum-section .impressum-divider {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid #FFC107;
}

/* Responsive Impressum */
@media (max-width: 768px) {
    .impressum-section > div {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .impressum-section {
        margin: 20px 16px !important;
        padding: 20px 16px !important;
    }
    .impressum-section h2 {
        font-size: 1.4rem !important;
    }
}

/* =====================================================
FIX: SLIDER FULL WIDTH - REMOVE BLACK BARS
(Added at end to override without breaking anything)
===================================================== */
.banner-slider,
.slide,
.slide-img,
.desktop-slide {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.banner-slider {
  position: relative !important;
  overflow: hidden !important;
}

.slide-img {
  object-fit: cover !important;
  object-position: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

body, html {
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}