/* ======================================== FANSBOOK - Main Stylesheet ======================================== Contains all styles for the entire website */ /* ======================================== THEME SYSTEM IMPORT ======================================== */ @import url('https://fonts.cdnfonts.com/css/outfit'); /* ======================================== CSS CUSTOM PROPERTIES (Variables) ======================================== */ :root { /* Original design variables - will be overridden by theme system */ --primary-dark: #1a1a1a; --secondary-dark: #2a2a2a; --accent-pink: #e91e63; --accent-blue: #2196f3; --accent-purple: #9c27b0; --gradient-primary: linear-gradient(270deg, #A61651 0%, #01ADF1 100%); --gradient-pink: linear-gradient(135deg, #e91e63 0%, #c2185b 100%); --text-light: #ffffff; --text-muted: #b0b0b0; } /* ======================================== GLOBAL IMAGE HEIGHT ADJUSTMENT Adds a single variable to uniformly increase image heights across the site. - Adjust `--img-height-scale` to increase/decrease the height multiplier. - Add class `no-img-scale` to any image to opt-out from the global scaling. ======================================== */ :root { --img-height-scale: 1.12; /* 1.0 = no change, 1.12 = +12% height */ } img:not(.no-img-scale) { /* margin-top: 10px; margin-bottom: 10px; height: 150px; width: 150px; border: 2px solid; */ transform-origin: center center; -webkit-transform-origin: center center; -webkit-transform: scaleY(var(--img-height-scale)); transform: scaleY(var(--img-height-scale)); transition: transform 160ms ease; display: inline-block; /* ensure transform applies consistently */ } /* Slightly reduce scaling on very small screens to avoid overflow */ @media (max-width: 480px) { :root { --img-height-scale: 1.1; --img-width-scale: 1.0; } } /* If an image is placed inside an element that expects exact dimensions, add .no-img-scale to opt-out (e.g., avatars, icons) */ .no-img-scale { -webkit-transform: none !important; transform: none !important; } /* ======================================== GLOBAL STYLES ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; } body { font-family: 'Arial', sans-serif; background-color: var(--primary-dark); color: var(--text-light); line-height: 1.6; transition: background-color var(--transition-normal), color var(--transition-normal); min-height: 100vh; display: flex; flex-direction: column; } /* Ensure main content takes up available space to push footer to bottom */ #main-content { flex: 1 0 auto; } /* ======================================== GLOBAL PROFILE IMAGE CIRCULAR STYLING Ensures all profile images across the project are perfectly circular ======================================== */ .user-avatar, .pfp, .pfp img, img.pfp, .profile-avatar, .profile-avatar img, .avatar-image, .creator-avatar, .creator-avatar img, .comment-avatar, .table-avatar, .requester-avatar, .profilePic, #header-profile-image, #header-profile-image-pfp, #model-profile-image, [class*="avatar"], [class*="profile-image"], [class*="pfp"] img, img[class*="pfp"] { width: 50px !important; height: 50px !important; min-width: 50px !important; min-height: 50px !important; max-width: 50px !important; max-height: 50px !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; margin-bottom: 8px; object-fit: cover !important; border: 2px solid var(--border-color); transition: border-color 0.3s ease; overflow: hidden !important; display: block !important; flex-shrink: 0 !important; /* Ensure proper colors and brightness - no filters */ filter: none !important; opacity: 1 !important; visibility: visible !important; object-position: center center !important; } /* User avatar with specific size (40px) - respect inline width/height attributes */ .user-avatar[width="40"], .user-avatar[height="40"], img.user-avatar[width="40"], img.user-avatar[height="40"], .user-avatar.rounded-circle[width="40"], .user-avatar.rounded-circle[height="40"] { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; max-width: 40px !important; max-height: 40px !important; } /* User profile link avatar - larger size for better UX */ .user-profile-link .user-avatar, .user-profile-link img.user-avatar, .user-profile-link .user-avatar.rounded-circle, .user-profile-link img.user-avatar.rounded-circle, .user-profile-link .user-avatar.loaded, .user-profile-link img.user-avatar.loaded { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; object-fit: cover !important; object-position: center center !important; border-radius: 50% !important; filter: none !important; opacity: 1 !important; visibility: visible !important; -webkit-filter: none !important; -moz-filter: none !important; -ms-filter: none !important; -o-filter: none !important; } /* Ensure loaded class doesn't override user-avatar filters */ .user-avatar.loaded, img.user-avatar.loaded, .user-avatar.rounded-circle.loaded, img.user-avatar.rounded-circle.loaded { filter: none !important; opacity: 1 !important; visibility: visible !important; -webkit-filter: none !important; -moz-filter: none !important; -ms-filter: none !important; -o-filter: none !important; } /* Chat page profile images - Ensure perfectly circular */ .user-profile-img, img.user-profile-img, .user_img, .user_img_msg, .rounded-circle.user_img { border-radius: 100% !important; -webkit-border-radius: 100% !important; -moz-border-radius: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; overflow: hidden !important; display: block !important; flex-shrink: 0 !important; } /* Ensure parent containers maintain circular shape */ .pfp, .profile-avatar, .creator-avatar { border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Exception: Settings page .pfp container should be rectangular (flex container) */ .mainSection.settings .pfp, .mainSection.settings .dashboard .pfp { border-radius: 12px !important; overflow: visible !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 15px !important; padding: 12px 20px !important; background: #1a1d29 !important; border: 1px solid #2d3142 !important; margin-bottom: 20px !important; height: auto !important; min-height: auto !important; max-height: none !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; line-height: normal !important; } [data-theme="light"] .mainSection.settings .pfp, [data-theme="light"] .mainSection.settings .dashboard .pfp { background: #ffffff !important; border-color: #e0e0e0 !important; } /* Profile Image Placeholders - Ensure all default/placeholder images are circular */ img[src*="profilePic.png"], img[src*="profilePic"], img[src*="default-male.jpg"], img[src*="default-female.jpg"], img[src*="default-user.jpg"], img[src*="default-avatar"], img[src*="default-male"], img[src*="default-female"], img[src*="placeholder"], img[src*="FRONT_DEFAULT_IMAGE"], img.default-image, img[class*="default"], img[class*="placeholder"], img[src*="newImages/profilePic"] { border-radius: 50% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; overflow: hidden !important; } /* Exception: Cover images and cover placeholders should NOT be circular */ .coverPhoto img, .coverPhoto img[src*="default"], .coverPhoto img[src*="placeholder"], .coverPhoto img[src*="FRONT_DEFAULT_IMAGE"], .coverPhoto img[src*="default-cover"], .coverPhoto img[data-original], img.cover, .cover, .coverPhoto .cover, .coverPhoto > img, .coverPhoto img.cover, .mainSection .coverPhoto img, .mainSection .coverPhoto .cover, #cover-image, #cover-photo-container img, #cover-photo-container img[src*="default"], #cover-photo-container img[src*="default-cover"], [class*="cover"] img:not(.profilePic):not([class*="pfp"]):not([class*="avatar"]), [class*="coverPhoto"] img:not(.profilePic):not([class*="pfp"]):not([class*="avatar"]), [id*="cover"] img:not(.profilePic):not([class*="pfp"]):not([class*="avatar"]) { border-radius: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; overflow: hidden !important; width: 100% !important; height: 100% !important; } /* Exception: Creator page placeholder images should NOT be circular */ .creator-card .creator-image img[src*="default"], .creator-image img[src*="default"], .creators-main .creator-image img[src*="default"], .creators-main .creator-card .creator-image img[src*="default"], .creator-card .creator-image img[data-original], .creator-image img[data-original] { border-radius: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; overflow: hidden !important; } /* Ensure placeholder images inside profile containers are circular */ .pfp img[src*="profilePic"], .pfp img[src*="default"], .pfp img[src*="placeholder"], .pfp img[src*="newImages/profilePic"], .profile-avatar img[src*="default"], .profile-avatar img[src*="placeholder"], .creator-avatar img[src*="default"], .creator-avatar img[src*="placeholder"], .profilePic[src*="default"], .profilePic[src*="profilePic"], .profilePic[src*="placeholder"] { border-radius: 50% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; overflow: hidden !important; width: 100% !important; height: 100% !important; } /* Exception: Creator page images should NOT be circular (revert to original styling) */ .creator-card .creator-image, .creator-card .creator-image img, .creator-image, .creator-image img, .creators-main .creator-image, .creators-main .creator-image img, .creators-main .creator-card .creator-image, .creators-main .creator-card .creator-image img { border-radius: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; overflow: hidden !important; } /* Restore original creator-image styling */ .creator-image { position: relative; aspect-ratio: 3/4; overflow: hidden; } .creator-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; border-radius: 0 !important; aspect-ratio: auto !important; } /* Ensure all profile image containers with placeholders are circular */ .pfp:has(img[src*="profilePic"]), .pfp:has(img[src*="default"]), .pfp:has(img[src*="placeholder"]), .profile-avatar:has(img[src*="default"]), .profile-avatar:has(img[src*="placeholder"]) { border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Exception: Creator page images should NOT be circular (revert to original styling) */ .creator-card .creator-image, .creator-card .creator-image img, .creator-image, .creator-image img, .creators-main .creator-image, .creators-main .creator-image img, .creators-main .creator-card .creator-image, .creators-main .creator-card .creator-image img { border-radius: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; overflow: hidden !important; } /* Exception: Creator page placeholder images should NOT be circular */ .creator-card .creator-image img[src*="default"], .creator-image img[src*="default"], .creators-main .creator-image img[src*="default"], .creators-main .creator-card .creator-image img[src*="default"], .creator-card .creator-image img[data-original], .creator-image img[data-original] { border-radius: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; overflow: hidden !important; } /* Base comment-avatar styling */ .comment-avatar { border-radius: 50% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; overflow: hidden !important; } /* ======================================== NAVIGATION STYLES ======================================== */ .navbar { background-color: var(--bg-primary) !important; padding: 1rem 0; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--border-color); } .navbar-brand { font-size: 1.5rem; font-weight: bold; color: var(--text-primary) !important; } .navbar-brand img { height: 40px; width: 300px; } .brand-text { color: var(--text-light); } .nav-link { color: var(--text-primary) !important; margin: 0 1rem; font-weight: 500; transition: color var(--transition-normal); } .nav-link:hover, .nav-link.active { color: var(--theme-accent) !important; } .login-btn { background: var(--gradient-primary); border: none; padding: 0.5rem 1.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4); } /* Custom hamburger menu styling */ .navbar-toggler { border: none; padding: 0.25rem 0.5rem; } .navbar-toggler:focus, .navbar-toggler:focus-visible, .navbar-toggler:active, .navbar-toggler:active:focus { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } /* Remove focus from navbar toggler button */ #navbarToggler:focus, #navbarToggler:focus-visible, #navbarToggler:active, #navbarToggler:active:focus, .navbar-toggler#navbarToggler:focus, .navbar-toggler#navbarToggler:focus-visible, .navbar-toggler#navbarToggler:active, .navbar-toggler#navbarToggler:active:focus { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } /* Remove focus from navbar toggler in dark mode as well */ [data-theme="dark"] .navbar-toggler:focus, [data-theme="dark"] .navbar-toggler:focus-visible, [data-theme="dark"] .navbar-toggler:active, [data-theme="dark"] .navbar-toggler:active:focus, [data-theme="dark"] #navbarToggler:focus, [data-theme="dark"] #navbarToggler:focus-visible, [data-theme="dark"] #navbarToggler:active, [data-theme="dark"] #navbarToggler:active:focus { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } .navbar-toggler-icon { background-image: none; width: 25px; height: 2px; background-color: var(--text-light); position: relative; transition: all 0.3s ease; } .navbar-toggler-icon::before, .navbar-toggler-icon::after { content: ''; position: absolute; width: 25px; height: 2px; background-color: var(--text-light); transition: all 0.3s ease; } .navbar-toggler-icon::before { top: -8px; } .navbar-toggler-icon::after { top: 8px; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { transform: rotate(45deg); top: 0; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { transform: rotate(-45deg); top: 0; } .navbar.scrolled { background: rgba(26, 26, 26, 0.95) !important; backdrop-filter: blur(10px); } /* ======================================== BUTTON STYLES ======================================== */ .btn-gradient { background: var(--gradient-primary); border: none; color: white; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 400; text-decoration: none; display: inline-block; transition: all 0.3s ease; position: relative; z-index: 2; } .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(33, 150, 243, 0.3); color: white; animation: pulse 1.5s infinite; } /* ======================================== BUTTON STYLES ======================================== */ .join-btn-gradient { background: var(--gradient-primary); border: none; color: white; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 400; text-decoration: none; display: inline-block; transition: all 0.3s ease; position: relative; z-index: 2; } .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.3); color: white; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; } .btn-outline-light:hover { background-color: rgba(255, 255, 255, 0.1); border-color: white; color: white; transform: translateY(-2px); } /* ======================================== HERO SECTION (Landing Page) ======================================== */ .hero-section { padding: 0; background: var(--primary-dark); background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; position: relative; overflow: visible; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; } /* Ensure hero section is NOT a modal - override any modal styles */ .hero-section { position: relative !important; z-index: 1 !important; display: flex !important; } .hero-section.modal, .hero-section[class*="modal"], .hero-section[role="dialog"] { position: relative !important; z-index: 1 !important; display: flex !important; background: var(--primary-dark) !important; background-image: url('../images/hero-bg.jpg') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* Hide modal backdrop when hero section is visible and not in a real modal */ body:has(.hero-section:not(.modal):not([class*="modal"])) .modal-backdrop:not(.show), .hero-section ~ .modal-backdrop:not(.show) { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .hero-section .btn-gradient{ width: 256px; } .hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(26, 26, 26, 0.7); z-index: 1; } .hero-section .container { position: relative; z-index: 2; width: 100%; } .hero-logo-container { display: flex; justify-content: center; align-items: center; margin-bottom: 2rem; position: relative; z-index: 2; } .hero-logo { max-width: 300px; height: auto; max-height: 120px; object-fit: contain; } @media screen and (max-width: 768px) { .hero-logo { max-width: 220px; max-height: 90px; } } @media screen and (max-width: 480px) { .hero-logo { max-width: 180px; max-height: 70px; } } .hero-title { font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 400; margin-bottom: .7rem; line-height: 1.2; position: relative; z-index: 2; text-align: center; } .hero-subtitle { font-size: 1rem; font-family: 'Outfit', sans-serif; margin-bottom: 1.5rem; position: relative; z-index: 2; text-align: center; } /* ======================================== CREATORS SECTION (Landing Page) ======================================== */ .creators-section { justify-content: center; overflow: hidden; padding: 100px 0; background: var(--primary-dark); } .creators-section .middle{ min-width: 232px; } .creators-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .creator-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--accent-blue); transition: transform 0.3s ease; } .creator-avatar:hover { transform: scale(1.1); } .creator-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ======================================== GENERAL SECTION STYLES ======================================== */ .section-title { font-size: 3rem; font-weight: 400; margin-bottom: 1.5rem; line-height: 1.2; } .section-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem; } .feature-title { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; line-height: 1.2; } .feature-description { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } /* ======================================== MODEL ACCESS SECTION ======================================== */ .model-access-section { background: var(--gradient-pink); color: white; } .model-image { height: 800px; overflow: hidden; } .model-image img { width: 100%; height: 100%; object-fit: cover; } .content-area { padding: 15rem; height: 100%; width: 100%; } /* ======================================== MEMBER FEATURES SECTION ======================================== */ .member-features-section { padding: 60px 0; background: var(--primary-dark); } .feature-toggle { margin-bottom: 3rem; } .toggle-btn { background: transparent; border: 2px solid var(--accent-blue); color: var(--accent-blue); padding: 0.75rem 2rem; margin: 0 0.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; } .toggle-btn.active, .toggle-btn:hover { background: var(--accent-blue); color: white; } .feature-tabs { display: flex; justify-content: center; gap: 2.8rem; margin-bottom: 2rem; border-bottom: 1px solid #B4B4B4; width: max-content; margin-left: auto; margin-right: auto; } .tab-item { padding: .7rem; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s ease; font-size: 20px; color: white; } .tab-item.active, .tab-item:hover { color: white; background: var(--bg-secondary); border-bottom-color: var(--accent-pink, #A61651); transition: border-color var(--transition-normal, 0.3s ease); } .tab-pane { display: none; } .tab-pane.active { display: block; } .feature-list { list-style: none; padding: 0; } .feature-list li { padding: 0.75rem 0; font-size: 1.1rem; display: flex; align-items: center; } .feature-illustration { display: flex; justify-content: center; align-items: center; height: 400px; } .illustration-container { position: relative; width: 100%; max-width: 300px; } .illustration-container img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } /* ======================================== FAQ SECTION ======================================== */ .faq-section { padding: 90px 0; padding-top: 10px; background: var(--primary-dark); } .accordion-item { background: var(--secondary-dark); margin-bottom: 1rem; border-radius: 10px; overflow: hidden; } .accordion-button { background: var(--secondary-dark); color: var(--text-light); border: none; padding: 1.5rem; font-size: 1.1rem; font-weight: 600; } .accordion-button:not(.collapsed) { background: var(--secondary-dark); color: var(--accent-blue); box-shadow: none; } .accordion-button:focus, .accordion-button:focus-visible, .accordion-button:focus-within, .accordion-button:active:focus, .accordion-button:active:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } .accordion-button::after { filter: brightness(0) invert(1); } .accordion-body { background: var(--secondary-dark); color: var(--text-muted); } /* ======================================== TESTIMONIALS SECTION ======================================== */ .testimonials-section { padding: 60px 0; } .testimonials-section .section-title{ color: white !important; text-align: left !important; margin-bottom: 40px !important; font-size: 3rem; } .testimonials-section .container{ padding: 0; width: 95%; max-width: 1125px; } .testimonials-section .section-title::before{ width: 117px; content: ""; display: flex; margin-bottom: 17px; height: 6px; background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%); background-image: linear-gradient(270deg, #A61651 0%, #01ADF1 100%); border-radius: 3px; } .testimonial-card { background: var(--text-light); padding: 2rem; padding: 22px 32px 18px; border-radius: 15px; height: 100%; border: 1px solid rgb(0, 0, 0); transition: transform 0.3s ease; } .testimonial-card .ratings{ gap : 10px; margin-bottom: 21px; } .testimonial-content p{ font-style: normal !important; } .testimonial-card .author-info h5{ font-size: 1rem; margin-bottom: 0; line-height: 1; } .testimonial-card .author-info p{ font-size: 12px; color: var(--text-muted); } .testimonial-card .author-avatar{ border: 1px solid #A61651 } /* CONTACT SECTION */ .contact-hero { padding: 150px 0 100px; background: var(--primary-dark); background-image: url('../images/hero-bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; position: relative; overflow: hidden; } .contact-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-primary); z-index: 1; } .contact-hero .container { position: relative; z-index: 2; } .contact-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; position: relative; z-index: 2; } .contact-subtitle { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 2rem; position: relative; z-index: 2; } /* Contact Form Section */ .contact-form-section { padding: 40px 0 80px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); } /* .contact-form-container { border-radius: 20px; padding: 50px 40px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } */ /* Form Groups */ .contact-form .form-group { margin-bottom: 30px; } .contact-form .form-label { color: var(--text-light); font-weight: 600; font-size: 1rem; margin-bottom: 12px; display: block; letter-spacing: 0.5px; } /* Form Inputs */ .contact-input, .contact-textarea { background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: var(--text-light); font-size: 1rem; padding: 16px 20px; transition: all 0.3s ease; backdrop-filter: blur(10px); } .contact-input::placeholder, .contact-textarea::placeholder { color: var(--text-muted); font-weight: 400; } .contact-input:focus, .contact-textarea:focus { background: rgba(255, 255, 255, 0.12); border-color: var(--accent-blue, #00d4ff); transition: border-color var(--transition-normal, 0.3s ease); box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25); color: var(--text-light); outline: none; } .contact-textarea { resize: vertical; min-height: 140px; font-family: inherit; } /* Submit Button */ .form-submit { text-align: center; margin-top: 40px; } .contact-submit-btn { background: linear-gradient(135deg, #00d4ff 0%, #ff006b 100%); border: none; border-radius: 50px; color: var(--text-light); font-size: 1.1rem; font-weight: 600; padding: 16px 40px; min-width: 200px; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3); position: relative; overflow: hidden; } .contact-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(0, 212, 255, 0.4); background: linear-gradient(135deg, #00b8e6 0%, #e6005f 100%); } .contact-submit-btn:active { transform: translateY(0); } .contact-submit-btn i { transition: transform 0.3s ease; } .contact-submit-btn:hover i { transform: translateX(5px); } /* Loading State */ .contact-submit-btn.loading { pointer-events: none; opacity: 0.8; } .contact-submit-btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid #ffffff; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* End CONTACT SECTION */ .testimonials-title { color: var(--text-light); } .testimonial-card:hover { transform: translateY(-5px); } .testimonial-content { margin-bottom: 2rem; } .testimonial-content p { font-style: italic; color: var(--primary-dark); line-height: 1.6; } .testimonial-author { display: flex; align-items: center; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; margin-right: 1rem; object-fit: cover; } .author-info h5 { margin-bottom: 0.25rem; color: var(--primary-dark); } .author-info span { color: var(--primary-dark); font-size: 0.9rem; } /* ======================================== GALLERY SECTION ======================================== */ .gallery-section { padding: 66px 0; background: var(--primary-dark); position: relative; } .gallery-section .arrows{ display: flex; width: 100%; align-items: center; justify-content: space-between; position: absolute; top: 60%; left: 0; transform: translateY(-50%); z-index: 10; pointer-events: none; padding: 0 10px; } .gallery-section .arrows button{ background: transparent; border: 0; pointer-events: auto; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; outline: none !important; box-shadow: none !important; } .gallery-section .arrows button img{ width: 40px; height: 40px; transition: opacity 0.3s ease, filter 0.3s ease; filter: brightness(0) invert(1); } .gallery-section .arrows button:hover img{ opacity: 0.7; } .gallery-section .arrows button.prev{ transform: rotate(-180deg); } /* Remove focus from gallery navigation buttons */ .gallery-section .arrows button:focus, .gallery-section .arrows button.prev:focus, .gallery-section .arrows button.next:focus, .gallery-section .arrows button:focus-visible, .gallery-section .arrows button.prev:focus-visible, .gallery-section .arrows button.next:focus-visible, .gallery-section .arrows button:active, .gallery-section .arrows button.prev:active, .gallery-section .arrows button.next:active { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } /* Remove focus from carousel control buttons (prev/next) */ .carousel-control-prev:focus, .carousel-control-next:focus, .carousel-control-prev:focus-visible, .carousel-control-next:focus-visible, button.carousel-control-prev:focus, button.carousel-control-next:focus, button.carousel-control-prev:focus-visible, button.carousel-control-next:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } /* Remove focus from generic prev/next buttons */ button.prev:focus, button.next:focus, button.prev:focus-visible, button.next:focus-visible, .prev:focus, .next:focus, .prev:focus-visible, .next:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 3rem; } .gallery-item { aspect-ratio: 3/4; border-radius: 15px; overflow: hidden; transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.05); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } /* ======================================== CTA SECTION ======================================== */ .cta-section { padding: 70px 0; /* background: var(--secondary-dark); */ } .cta-title { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; } .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-description { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; } /* ======================================== FOOTER ======================================== */ .footer { padding: 4rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background: var(--primary-dark); position: relative; width: 100%; flex-shrink: 0; margin-top: auto; display: block !important; /* Override theme.css footer { display: none } */ } .footer .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .footer-brand { margin-bottom: 1.5rem; } .footer-brand img { height: auto; width: auto; max-width: 150px; max-height: 60px; object-fit: contain; } .footer-title { color: var(--text-light); margin-bottom: 1.5rem; font-weight: 600; font-size: 1.125rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem; } .footer-links li i { color: var(--text-muted); margin-top: 0.25rem; flex-shrink: 0; width: 16px; text-align: center; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; font-size: 0.9375rem; line-height: 1.5; } .footer-links a:hover { color: var(--accent-blue); } .social-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; align-items: center; } /* Remove underlines from all social links */ .social-links a, .social-links a:hover, .social-links a:focus, .social-links a:active, .social-links a:visited { text-decoration: none !important; border: none !important; border-bottom: none !important; outline: none !important; } .social-links a::after, .social-links a::before, .social-links a:hover::after, .social-links a:hover::before, .social-links a:focus::after, .social-links a:focus::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } /* Ensure X (Twitter) icon displays correctly */ .fa-x-twitter, .fa-brands.fa-x-twitter, i.fa-x-twitter, i.fa-brands.fa-x-twitter, .social-link .fa-x-twitter, .social-link .fa-brands.fa-x-twitter, .social-links a .fa-x-twitter, .social-links a .fa-brands.fa-x-twitter, .social-links a i.fa-x-twitter, .social-links a i.fa-brands.fa-x-twitter, .social-links a i.fa-brands.fa-x-twitter.social-link { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; font-weight: 400 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-style: normal !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-size: 1.125rem !important; color: var(--text-light) !important; width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; position: static !important; margin: 0 !important; padding: 0 !important; } /* Force X icon content - Unicode for Font Awesome 6.4+ x-twitter */ .fa-x-twitter:before, .fa-brands.fa-x-twitter:before, i.fa-x-twitter:before, i.fa-brands.fa-x-twitter:before, .social-links a i.fa-x-twitter:before, .social-links a i.fa-brands.fa-x-twitter:before { content: "\e61b" !important; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* Ensure X icon is visible in social links */ .social-links a i.fa-x-twitter, .social-links a i.fa-brands.fa-x-twitter { position: relative !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* Global rule to remove underlines from all social media links */ .footer_social_media a, .footer_social_media li a, .social-links a, .social-link, a .social-link, a[href*="facebook"], a[href*="twitter"], a[href*="instagram"], a[href*="youtube"], a[href*="snapchat"] { text-decoration: none !important; border: none !important; border-bottom: none !important; outline: none !important; } /* ======================================== SOCIAL MEDIA LINKS - UNIFIED STYLING Common styling for all pages (home, marketplace, creators, etc.) All social media CSS is consolidated here ======================================== */ /* Remove pseudo-elements that interfere with styling */ .footer_social_media a::after, .footer_social_media a::before, .footer_social_media li a::after, .footer_social_media li a::before, .social-links a::after, .social-links a::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } .social-links a { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; background: var(--secondary-dark) !important; color: var(--text-light) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; transition: all 0.3s ease !important; position: relative !important; border: none !important; border-bottom: none !important; } /* Icon styling - ensure icons are visible */ .social-links a i, .social-links a .fab, .social-links a .fa-brands, .social-links a .social-link, i.social-link, .fab.social-link, .fa-brands.social-link { font-size: 1.125rem !important; color: white !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; position: static !important; margin: 0 !important; padding: 0 !important; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } /* Social media brand background colors */ .social-links a[href*="facebook"] i, .social-links a .fa-facebook-f, .social-links a .fab.fa-facebook-f { color: white !important; } .social-links a[href*="facebook"] { background: #1877F2 !important; /* Facebook blue */ } .social-links a[href*="instagram"] i, .social-links a .fa-instagram, .social-links a .fab.fa-instagram { color: white !important; } .social-links a[href*="instagram"] { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; /* Instagram gradient */ } .social-links a[href*="youtube"] i, .social-links a .fa-youtube, .social-links a .fab.fa-youtube { color: white !important; } .social-links a[href*="youtube"] { background: #FF0000 !important; /* YouTube red */ } .social-links a[href*="twitter"] i, .social-links a .fa-x-twitter, .social-links a .fa-brands.fa-x-twitter, .social-links a[href*="x.com"] i { color: white !important; } .social-links a[href*="twitter"], .social-links a[href*="x.com"] { background: #000000 !important; /* X/Twitter black */ } .social-links a[href*="snapchat"] i, .social-links a .fa-snapchat-ghost, .social-links a .fab.fa-snapchat-ghost { color: white !important; } .social-links a[href*="snapchat"] { background: #FFFC00 !important; /* Snapchat yellow */ } /* Fix SVG overflow in social links - Common for all pages */ .footer .social-links a, .social-links a { max-width: 40px !important; max-height: 40px !important; overflow: hidden !important; } .footer .social-links a svg, .footer .social-links a .svg-inline--fa, .social-links a svg, .social-links a .svg-inline--fa { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: block !important; margin: 0 auto !important; } .footer .social-links a svg.svg-inline--fa, .social-links a svg.svg-inline--fa { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; } /* Hover states - slightly darker backgrounds */ .social-links a[href*="facebook"]:hover { background: #166FE5 !important; } .social-links a[href*="instagram"]:hover { background: linear-gradient(45deg, #d8842a 0%, #d0582c 25%, #c6213a 50%, #b61d5a 75%, #a61475 100%) !important; } .social-links a[href*="youtube"]:hover { background: #E60000 !important; } .social-links a[href*="twitter"]:hover, .social-links a[href*="x.com"]:hover { background: #1a1a1a !important; } .social-links a[href*="snapchat"]:hover { background: #E6E600 !important; } /* Ensure icons stay white on hover */ .social-links a:hover i, .social-links a:hover .fab, .social-links a:hover .fa-brands, .social-links a:hover .social-link { color: white !important; } /* Specific styling for X icon to ensure it's visible */ .social-links a i.fa-x-twitter, .social-links a i.fa-brands.fa-x-twitter, .social-links a .fa-x-twitter, .social-links a .fa-brands.fa-x-twitter { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; font-weight: 400 !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 1.125rem !important; color: white !important; } .social-links a::after, .social-links a::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } .social-links a:hover { transform: translateY(-2px) !important; text-decoration: none !important; border-bottom: none !important; } .social-links a:hover .social-link, .social-links a:hover i, .social-links a:hover .fab, .social-links a:hover .fa-brands { color: white !important; visibility: visible !important; opacity: 1 !important; } .social-links a:hover::after, .social-links a:hover::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } /* When social-link is on the icon element itself, override container styles */ .social-links a i.social-link, .social-links a .fab.social-link, .social-links a .fa-brands.social-link, .social-links a i.fab.social-link, .social-links a i.fa-brands.social-link, i.social-link, .fab.social-link, .fa-brands.social-link { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 1.125rem !important; width: auto !important; height: auto !important; min-width: auto !important; min-height: auto !important; background: transparent !important; border-radius: 0 !important; position: static !important; margin: 0 !important; padding: 0 !important; flex: none !important; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 5 Free" !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } /* Ensure all Font Awesome icons in social links are visible */ .social-links a i.fab, .social-links a i.fa-brands, .social-links a .fab, .social-links a .fa-brands { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } .footer-divider { border-color: rgba(255, 255, 255, 0.1); margin: 2rem 0 1rem; border-top: 1px solid; border-bottom: none; border-left: none; border-right: none; } .copyright { color: var(--text-muted); margin: 0; font-size: 0.875rem; text-align: center; } /* Footer Responsive Design */ @media (max-width: 991.98px) { .footer { padding: 3rem 0 1.5rem; } .footer-brand img { max-width: 120px; max-height: 50px; } .footer-title { font-size: 1rem; margin-bottom: 1rem; } .footer-links li { margin-bottom: 0.625rem; } .footer-links a { font-size: 0.875rem; } .social-link { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 1rem; } .footer-divider { margin: 1.5rem 0 1rem; } } @media (max-width: 767.98px) { .footer { padding: 2.5rem 0 1.5rem; } .footer .container { padding: 0 20px; } .footer .row { text-align: center !important; } .footer .col-lg-3, .footer .col-md-6 { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-brand { text-align: center !important; margin-bottom: 2rem; width: 100%; display: flex !important; justify-content: center !important; align-items: center !important; } .footer-brand a { display: flex !important; justify-content: center !important; align-items: center !important; } .footer-brand img { max-width: 100px; max-height: 40px; margin: 0 auto !important; } .footer-title { font-size: 1rem; margin-bottom: 1rem; text-align: center !important; width: 100%; } .footer-links { text-align: center !important; width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-links li { justify-content: center !important; align-items: center !important; margin-bottom: 0.5rem; text-align: center !important; width: 100%; } .footer-links a { font-size: 0.875rem; text-align: center !important; } .footer .social-links, .social-links { display: flex !important; justify-content: center !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; margin: 0 auto !important; flex-wrap: wrap !important; } .footer .social-links a, .social-links a { display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; border: none !important; border-bottom: none !important; } .footer .social-links a::after, .footer .social-links a::before, .social-links a::after, .social-links a::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } .footer .social-link, .social-link { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; } .footer-divider { margin: 1.5rem 0 1rem; } .copyright { font-size: 0.8125rem; text-align: center !important; width: 100%; } } @media (max-width: 575.98px) { .footer { padding: 2rem 0 1rem; } .footer .container { padding: 0 15px; } .footer .row { text-align: center !important; } .footer .col-lg-3, .footer .col-md-6 { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.5rem !important; } .footer-brand { text-align: center !important; width: 100%; display: flex !important; justify-content: center !important; align-items: center !important; } .footer-brand a { display: flex !important; justify-content: center !important; align-items: center !important; } .footer-brand img { max-width: 80px; max-height: 35px; margin: 0 auto !important; } .footer-title { font-size: 0.9375rem; margin-bottom: 0.875rem; text-align: center !important; width: 100%; } .footer-links { text-align: center !important; width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-links li { justify-content: center !important; align-items: center !important; margin-bottom: 0.5rem; text-align: center !important; width: 100%; } .footer-links a { font-size: 0.8125rem; text-align: center !important; } .footer .social-links, .social-links { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; flex-wrap: wrap !important; gap: 0.75rem !important; } .footer .social-links a, .social-links a { display: flex !important; align-items: center !important; justify-content: center !important; } .footer .social-link, .social-link { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; font-size: 0.9375rem !important; margin: 0 !important; } .footer-divider { margin: 1.25rem 0 0.875rem; } .copyright { font-size: 0.75rem; line-height: 1.6; text-align: center !important; width: 100%; } } /* Footer Theme Consistency */ [data-theme="light"] .footer { background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="light"] .footer-title { color: #212529; } [data-theme="light"] .footer-links a { color: #6c757d; } [data-theme="light"] .footer-links a:hover { color: var(--accent-blue); } [data-theme="light"] .footer-links li i { color: #6c757d; } [data-theme="light"] .social-link { background: #f8f9fa; color: #212529; border: 1px solid #dee2e6; } [data-theme="light"] .social-link:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); } /* ======================================== SOCIAL MEDIA - THEME MODE SUPPORT Brand colors work in both light and dark modes ======================================== */ /* Brand background colors - work in both light and dark mode */ [data-theme="light"] .footer .social-links a[href*="facebook"], [data-theme="dark"] .footer .social-links a[href*="facebook"], .footer .social-links a[href*="facebook"], [data-theme="light"] .social-links a[href*="facebook"], [data-theme="dark"] .social-links a[href*="facebook"] { background: #1877F2 !important; /* Facebook blue */ } [data-theme="light"] .footer .social-links a[href*="instagram"], [data-theme="dark"] .footer .social-links a[href*="instagram"], .footer .social-links a[href*="instagram"], [data-theme="light"] .social-links a[href*="instagram"], [data-theme="dark"] .social-links a[href*="instagram"] { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; /* Instagram gradient */ } [data-theme="light"] .footer .social-links a[href*="youtube"], [data-theme="dark"] .footer .social-links a[href*="youtube"], .footer .social-links a[href*="youtube"], [data-theme="light"] .social-links a[href*="youtube"], [data-theme="dark"] .social-links a[href*="youtube"] { background: #FF0000 !important; /* YouTube red */ } [data-theme="light"] .footer .social-links a[href*="twitter"], [data-theme="light"] .footer .social-links a[href*="x.com"], [data-theme="dark"] .footer .social-links a[href*="twitter"], [data-theme="dark"] .footer .social-links a[href*="x.com"], .footer .social-links a[href*="twitter"], .footer .social-links a[href*="x.com"], [data-theme="light"] .social-links a[href*="twitter"], [data-theme="light"] .social-links a[href*="x.com"], [data-theme="dark"] .social-links a[href*="twitter"], [data-theme="dark"] .social-links a[href*="x.com"] { background: #000000 !important; /* X/Twitter black */ } [data-theme="light"] .footer .social-links a[href*="snapchat"], [data-theme="dark"] .footer .social-links a[href*="snapchat"], .footer .social-links a[href*="snapchat"], [data-theme="light"] .social-links a[href*="snapchat"], [data-theme="dark"] .social-links a[href*="snapchat"] { background: #FFFC00 !important; /* Snapchat yellow */ } /* Icon colors - white in both light and dark mode for all social links */ [data-theme="light"] .footer .social-links a i, [data-theme="light"] .footer .social-links a .fab, [data-theme="light"] .footer .social-links a .fa-brands, [data-theme="light"] .footer .social-links a .svg-inline--fa, [data-theme="light"] .footer .social-links a svg, [data-theme="light"] .footer .social-links a svg path, [data-theme="light"] .footer .social-links a svg.svg-inline--fa path, [data-theme="light"] .footer .social-links a .svg-inline--fa path, [data-theme="dark"] .footer .social-links a i, [data-theme="dark"] .footer .social-links a .fab, [data-theme="dark"] .footer .social-links a .fa-brands, [data-theme="dark"] .footer .social-links a .svg-inline--fa, [data-theme="dark"] .footer .social-links a svg, [data-theme="dark"] .footer .social-links a svg path, [data-theme="dark"] .footer .social-links a svg.svg-inline--fa path, [data-theme="dark"] .footer .social-links a .svg-inline--fa path, .footer .social-links a i, .footer .social-links a .fab, .footer .social-links a .fa-brands, .footer .social-links a .svg-inline--fa, .footer .social-links a svg, .footer .social-links a svg path, .footer .social-links a svg.svg-inline--fa path, .footer .social-links a .svg-inline--fa path, [data-theme="light"] .social-links a i, [data-theme="light"] .social-links a .fab, [data-theme="light"] .social-links a .fa-brands, [data-theme="light"] .social-links a .svg-inline--fa, [data-theme="light"] .social-links a svg, [data-theme="light"] .social-links a svg path, [data-theme="dark"] .social-links a i, [data-theme="dark"] .social-links a .fab, [data-theme="dark"] .social-links a .fa-brands, [data-theme="dark"] .social-links a .svg-inline--fa, [data-theme="dark"] .social-links a svg, [data-theme="dark"] .social-links a svg path { color: white !important; fill: white !important; } /* Specific Twitter/X icon color rules for light mode - ensure white icons */ [data-theme="light"] .footer .social-links a[href*="twitter"] i, [data-theme="light"] .footer .social-links a[href*="twitter"] .fab, [data-theme="light"] .footer .social-links a[href*="twitter"] .fa-brands, [data-theme="light"] .footer .social-links a[href*="twitter"] .fa-x-twitter, [data-theme="light"] .footer .social-links a[href*="twitter"] .svg-inline--fa, [data-theme="light"] .footer .social-links a[href*="twitter"] svg, [data-theme="light"] .footer .social-links a[href*="twitter"] svg path, [data-theme="light"] .footer .social-links a[href*="x.com"] i, [data-theme="light"] .footer .social-links a[href*="x.com"] .fab, [data-theme="light"] .footer .social-links a[href*="x.com"] .fa-brands, [data-theme="light"] .footer .social-links a[href*="x.com"] .fa-x-twitter, [data-theme="light"] .footer .social-links a[href*="x.com"] .svg-inline--fa, [data-theme="light"] .footer .social-links a[href*="x.com"] svg, [data-theme="light"] .footer .social-links a[href*="x.com"] svg path, [data-theme="light"] .social-links a[href*="twitter"] i, [data-theme="light"] .social-links a[href*="twitter"] .fab, [data-theme="light"] .social-links a[href*="twitter"] .fa-brands, [data-theme="light"] .social-links a[href*="twitter"] .fa-x-twitter, [data-theme="light"] .social-links a[href*="twitter"] .svg-inline--fa, [data-theme="light"] .social-links a[href*="twitter"] svg, [data-theme="light"] .social-links a[href*="twitter"] svg path, [data-theme="light"] .social-links a[href*="x.com"] i, [data-theme="light"] .social-links a[href*="x.com"] .fab, [data-theme="light"] .social-links a[href*="x.com"] .fa-brands, [data-theme="light"] .social-links a[href*="x.com"] .fa-x-twitter, [data-theme="light"] .social-links a[href*="x.com"] .svg-inline--fa, [data-theme="light"] .social-links a[href*="x.com"] svg, [data-theme="light"] .social-links a[href*="x.com"] svg path, [data-theme="light"] .social-links a[href*="twitter"] i::before, [data-theme="light"] .social-links a[href*="twitter"] .fab::before, [data-theme="light"] .social-links a[href*="twitter"] .fa-brands::before, [data-theme="light"] .social-links a[href*="x.com"] i::before, [data-theme="light"] .social-links a[href*="x.com"] .fab::before, [data-theme="light"] .social-links a[href*="x.com"] .fa-brands::before { color: white !important; fill: white !important; } /* Light mode - ensure brand colors override any gray backgrounds */ [data-theme="light"] .social-links a i, [data-theme="light"] .social-links a .fab, [data-theme="light"] .social-links a .fa-brands, [data-theme="light"] .social-links a i::before, [data-theme="light"] .social-links a .fab::before, [data-theme="light"] .social-links a .fa-brands::before { background: transparent !important; } /* ======================================== HEADER NAVIGATION - REMOVE FOCUS IN LIGHT MODE ======================================== */ /* Remove focus styles from header navigation in light mode */ [data-theme="light"] .navbar-nav .nav-link:focus, [data-theme="light"] .navbar-nav .nav-link:focus-visible, [data-theme="light"] .navbar-nav .nav-link:focus-within, [data-theme="light"] .navbar-nav .nav-item .nav-link:focus, [data-theme="light"] .navbar-nav .nav-item .nav-link:focus-visible, [data-theme="light"] .navbar-nav .nav-item .nav-link:focus-within, [data-theme="light"] header .navbar-nav .nav-link:focus, [data-theme="light"] header .navbar-nav .nav-link:focus-visible, [data-theme="light"] .main-header .navbar-nav .nav-link:focus, [data-theme="light"] .main-header .navbar-nav .nav-link:focus-visible, [data-theme="light"] .navbar .nav-link:focus, [data-theme="light"] .navbar .nav-link:focus-visible, [data-theme="light"] .navbar .nav-link:focus-within, [data-theme="light"] .navbar .nav-item:focus, [data-theme="light"] .navbar .nav-item:focus-visible, [data-theme="light"] .navbar .nav-item:focus-within, [data-theme="light"] .navbar .nav-item .nav-link:focus, [data-theme="light"] .navbar .nav-item .nav-link:focus-visible, [data-theme="light"] .navbar .nav-item .nav-link:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from navbar brand (logo) in light mode */ [data-theme="light"] .navbar-brand:focus, [data-theme="light"] .navbar-brand:focus-visible, [data-theme="light"] .navbar-brand:focus-within, [data-theme="light"] header .navbar-brand:focus, [data-theme="light"] header .navbar-brand:focus-visible, [data-theme="light"] .navbar .navbar-brand:focus, [data-theme="light"] .navbar .navbar-brand:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from navbar toggler (mobile menu button) in light mode */ [data-theme="light"] .navbar-toggler:focus, [data-theme="light"] .navbar-toggler:focus-visible, [data-theme="light"] .navbar-toggler:focus-within, [data-theme="light"] header .navbar-toggler:focus, [data-theme="light"] header .navbar-toggler:focus-visible, [data-theme="light"] .navbar .navbar-toggler:focus, [data-theme="light"] .navbar .navbar-toggler:focus-visible, [data-theme="light"] #navbarToggler:focus, [data-theme="light"] #navbarToggler:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; } /* Remove focus from mobile menu close button in light mode */ [data-theme="light"] .mobile-menu-close:focus, [data-theme="light"] .mobile-menu-close:focus-visible, [data-theme="light"] .mobile-menu-close:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; } /* Remove focus from user profile nav elements in light mode */ [data-theme="light"] .user-profile-nav:focus, [data-theme="light"] .user-profile-nav:focus-visible, [data-theme="light"] .user-profile-nav:focus-within, [data-theme="light"] .user-profile-nav *:focus, [data-theme="light"] .user-profile-nav *:focus-visible, [data-theme="light"] .user-profile-nav *:focus-within, [data-theme="light"] .user-profile-link:focus, [data-theme="light"] .user-profile-link:focus-visible, [data-theme="light"] .user-profile-link:focus-within, [data-theme="light"] .user-name:focus, [data-theme="light"] .user-name:focus-visible, [data-theme="light"] .user-name:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from all navigation container elements in light mode */ [data-theme="light"] .navbar:focus, [data-theme="light"] .navbar:focus-visible, [data-theme="light"] .navbar:focus-within, [data-theme="light"] .navbar-collapse:focus, [data-theme="light"] .navbar-collapse:focus-visible, [data-theme="light"] .navbar-collapse:focus-within, [data-theme="light"] #navbarNav:focus, [data-theme="light"] #navbarNav:focus-visible, [data-theme="light"] #navbarNav:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } /* Remove focus from data-theme-navbar elements in light mode */ [data-theme="light"] [data-theme-navbar] .navbar-brand:focus, [data-theme="light"] [data-theme-navbar] .navbar-brand:focus-visible, [data-theme="light"] [data-theme-navbar] .navbar-brand:focus-within, [data-theme="light"] [data-theme-navbar] .nav-link:focus, [data-theme="light"] [data-theme-navbar] .nav-link:focus-visible, [data-theme="light"] [data-theme-navbar] .nav-link:focus-within, [data-theme="light"] [data-theme-navbar] .nav-item:focus, [data-theme="light"] [data-theme-navbar] .nav-item:focus-visible, [data-theme="light"] [data-theme-navbar] .nav-item:focus-within, [data-theme="light"] [data-theme-navbar] .navbar-toggler:focus, [data-theme="light"] [data-theme-navbar] .navbar-toggler:focus-visible, [data-theme="light"] [data-theme-navbar] .user-name:focus, [data-theme="light"] [data-theme-navbar] .user-name:focus-visible, [data-theme="light"] [data-theme-navbar] .user-profile-link:focus, [data-theme="light"] [data-theme-navbar] .user-profile-link:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* ======================================== REMOVE FOCUS FROM HEADER NAVIGATION AND PROFILE - BOTH THEMES ======================================== */ /* Remove focus from header navigation in dark mode */ [data-theme="dark"] .navbar-nav .nav-link:focus, [data-theme="dark"] .navbar-nav .nav-link:focus-visible, [data-theme="dark"] .navbar-nav .nav-link:focus-within, [data-theme="dark"] .navbar-nav .nav-item .nav-link:focus, [data-theme="dark"] .navbar-nav .nav-item .nav-link:focus-visible, [data-theme="dark"] .navbar-nav .nav-item .nav-link:focus-within, [data-theme="dark"] header .navbar-nav .nav-link:focus, [data-theme="dark"] header .navbar-nav .nav-link:focus-visible, [data-theme="dark"] .main-header .navbar-nav .nav-link:focus, [data-theme="dark"] .main-header .navbar-nav .nav-link:focus-visible, [data-theme="dark"] .navbar .nav-link:focus, [data-theme="dark"] .navbar .nav-link:focus-visible, [data-theme="dark"] .navbar .nav-link:focus-within, [data-theme="dark"] .navbar .nav-item:focus, [data-theme="dark"] .navbar .nav-item:focus-visible, [data-theme="dark"] .navbar .nav-item:focus-within, [data-theme="dark"] .navbar .nav-item .nav-link:focus, [data-theme="dark"] .navbar .nav-item .nav-link:focus-visible, [data-theme="dark"] .navbar .nav-item .nav-link:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from navbar brand (logo) in dark mode */ [data-theme="dark"] .navbar-brand:focus, [data-theme="dark"] .navbar-brand:focus-visible, [data-theme="dark"] .navbar-brand:focus-within, [data-theme="dark"] header .navbar-brand:focus, [data-theme="dark"] header .navbar-brand:focus-visible, [data-theme="dark"] .navbar .navbar-brand:focus, [data-theme="dark"] .navbar .navbar-brand:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from navbar toggler (mobile menu button) in dark mode */ [data-theme="dark"] .navbar-toggler:focus, [data-theme="dark"] .navbar-toggler:focus-visible, [data-theme="dark"] .navbar-toggler:focus-within, [data-theme="dark"] header .navbar-toggler:focus, [data-theme="dark"] header .navbar-toggler:focus-visible, [data-theme="dark"] .navbar .navbar-toggler:focus, [data-theme="dark"] .navbar .navbar-toggler:focus-visible, [data-theme="dark"] #navbarToggler:focus, [data-theme="dark"] #navbarToggler:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; } /* Remove focus from user profile nav elements in dark mode */ [data-theme="dark"] .user-profile-nav:focus, [data-theme="dark"] .user-profile-nav:focus-visible, [data-theme="dark"] .user-profile-nav:focus-within, [data-theme="dark"] .user-profile-nav *:focus, [data-theme="dark"] .user-profile-nav *:focus-visible, [data-theme="dark"] .user-profile-nav *:focus-within, [data-theme="dark"] .user-profile-link:focus, [data-theme="dark"] .user-profile-link:focus-visible, [data-theme="dark"] .user-profile-link:focus-within, [data-theme="dark"] .user-profile-link *:focus, [data-theme="dark"] .user-profile-link *:focus-visible, [data-theme="dark"] .user-profile-link *:focus-within, [data-theme="dark"] .user-name:focus, [data-theme="dark"] .user-name:focus-visible, [data-theme="dark"] .user-name:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } /* Remove focus from header dropdown and profile dropdown in both themes */ .headerdropdown:focus, .headerdropdown:focus-visible, .headerdropdown:focus-within, .headerdropdown *:focus, .headerdropdown *:focus-visible, .headerdropdown *:focus-within, /* Comprehensive dropdownButton focus removal - all contexts */ .dropdownButton:focus, .dropdownButton:focus-visible, .dropdownButton:focus-within, .dropdownButton:active:focus, .dropdownButton:active:focus-visible, .dropdown .dropdownButton:focus, .dropdown .dropdownButton:focus-visible, .dropdown .dropdownButton:focus-within, .dropdown .dropdownButton:active:focus, .dropdown .dropdownButton:active:focus-visible, .post .postHeader .dropdownButton:focus, .post .postHeader .dropdownButton:focus-visible, .post .postHeader .dropdownButton:focus-within, .post .postHeader .dropdownButton:active:focus, .post .postHeader .dropdownButton:active:focus-visible, .postHeader .dropdownButton:focus, .postHeader .dropdownButton:focus-visible, .postHeader .dropdownButton:focus-within, .postHeader .dropdownButton:active:focus, .postHeader .dropdownButton:active:focus-visible, .mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus, .mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus-visible, .mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:focus-within, .mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:active:focus, .mainSection .post .postHeader .time .postOptions .dropdown .dropdownButton:active:focus-visible, .forgotpassword_area .post.gallery .postHeader .dropdownButton:focus, .forgotpassword_area .post.gallery .postHeader .dropdownButton:focus-visible, .forgotpassword_area .post.gallery .postHeader .dropdownButton:focus-within, .forgotpassword_area .post.gallery .postHeader .dropdownButton:active:focus, .forgotpassword_area .post.gallery .postHeader .dropdownButton:active:focus-visible, .mainSection.publicProfile .post .postHeader .dropdownButton:focus, .mainSection.publicProfile .post .postHeader .dropdownButton:focus-visible, .mainSection.publicProfile .post .postHeader .dropdownButton:focus-within, .mainSection.publicProfile .post .postHeader .dropdownButton:active:focus, .mainSection.publicProfile .post .postHeader .dropdownButton:active:focus-visible, .chat .dropdownButton:focus, .chat .dropdownButton:focus-visible, .chat .dropdownButton:focus-within, .chat .dropdownButton:active:focus, .chat .dropdownButton:active:focus-visible, .contact-header-bar .dropdownButton:focus, .contact-header-bar .dropdownButton:focus-visible, .contact-header-bar .dropdownButton:focus-within, .contact-header-bar .dropdownButton:active:focus, .contact-header-bar .dropdownButton:active:focus-visible, .mobileHeader .dropdownButton:focus, .mobileHeader .dropdownButton:focus-visible, .mobileHeader .dropdownButton:focus-within, .mobileHeader .dropdownButton:active:focus, .mobileHeader .dropdownButton:active:focus-visible, .mobile-user-profile:focus, .mobile-user-profile:focus-visible, .mobile-user-profile:focus-within, .mobile-user-profile *:focus, .mobile-user-profile *:focus-visible, .mobile-user-profile *:focus-within, [data-theme="light"] .headerdropdown:focus, [data-theme="light"] .headerdropdown:focus-visible, [data-theme="light"] .headerdropdown:focus-within, [data-theme="light"] .headerdropdown *:focus, [data-theme="light"] .headerdropdown *:focus-visible, [data-theme="light"] .headerdropdown *:focus-within, [data-theme="light"] .dropdownButton:focus, [data-theme="light"] .dropdownButton:focus-visible, [data-theme="light"] .dropdownButton:focus-within, [data-theme="light"] .dropdownButton:active:focus, [data-theme="light"] .dropdownButton:active:focus-visible, [data-theme="light"] .dropdown .dropdownButton:focus, [data-theme="light"] .dropdown .dropdownButton:focus-visible, [data-theme="light"] .dropdown .dropdownButton:focus-within, [data-theme="light"] .dropdown .dropdownButton:active:focus, [data-theme="light"] .dropdown .dropdownButton:active:focus-visible, [data-theme="light"] .post .postHeader .dropdownButton:focus, [data-theme="light"] .post .postHeader .dropdownButton:focus-visible, [data-theme="light"] .post .postHeader .dropdownButton:focus-within, [data-theme="light"] .post .postHeader .dropdownButton:active:focus, [data-theme="light"] .post .postHeader .dropdownButton:active:focus-visible, [data-theme="light"] .postHeader .dropdownButton:focus, [data-theme="light"] .postHeader .dropdownButton:focus-visible, [data-theme="light"] .postHeader .dropdownButton:focus-within, [data-theme="light"] .postHeader .dropdownButton:active:focus, [data-theme="light"] .postHeader .dropdownButton:active:focus-visible, [data-theme="light"] .mobileHeader .dropdownButton:focus, [data-theme="light"] .mobileHeader .dropdownButton:focus-visible, [data-theme="light"] .mobileHeader .dropdownButton:focus-within, [data-theme="light"] .mobileHeader .dropdownButton:active:focus, [data-theme="light"] .mobileHeader .dropdownButton:active:focus-visible, [data-theme="light"] .mobile-user-profile:focus, [data-theme="light"] .mobile-user-profile:focus-visible, [data-theme="light"] .mobile-user-profile:focus-within, [data-theme="light"] .mobile-user-profile *:focus, [data-theme="light"] .mobile-user-profile *:focus-visible, [data-theme="light"] .mobile-user-profile *:focus-within, [data-theme="dark"] .headerdropdown:focus, [data-theme="dark"] .headerdropdown:focus-visible, [data-theme="dark"] .headerdropdown:focus-within, [data-theme="dark"] .headerdropdown *:focus, [data-theme="dark"] .headerdropdown *:focus-visible, [data-theme="dark"] .headerdropdown *:focus-within, [data-theme="dark"] .dropdownButton:focus, [data-theme="dark"] .dropdownButton:focus-visible, [data-theme="dark"] .dropdownButton:focus-within, [data-theme="dark"] .dropdownButton:active:focus, [data-theme="dark"] .dropdownButton:active:focus-visible, [data-theme="dark"] .dropdown .dropdownButton:focus, [data-theme="dark"] .dropdown .dropdownButton:focus-visible, [data-theme="dark"] .dropdown .dropdownButton:focus-within, [data-theme="dark"] .dropdown .dropdownButton:active:focus, [data-theme="dark"] .dropdown .dropdownButton:active:focus-visible, [data-theme="dark"] .post .postHeader .dropdownButton:focus, [data-theme="dark"] .post .postHeader .dropdownButton:focus-visible, [data-theme="dark"] .post .postHeader .dropdownButton:focus-within, [data-theme="dark"] .post .postHeader .dropdownButton:active:focus, [data-theme="dark"] .post .postHeader .dropdownButton:active:focus-visible, [data-theme="dark"] .postHeader .dropdownButton:focus, [data-theme="dark"] .postHeader .dropdownButton:focus-visible, [data-theme="dark"] .postHeader .dropdownButton:focus-within, [data-theme="dark"] .postHeader .dropdownButton:active:focus, [data-theme="dark"] .postHeader .dropdownButton:active:focus-visible, [data-theme="dark"] .mobileHeader .dropdownButton:focus, [data-theme="dark"] .mobileHeader .dropdownButton:focus-visible, [data-theme="dark"] .mobileHeader .dropdownButton:focus-within, [data-theme="dark"] .mobileHeader .dropdownButton:active:focus, [data-theme="dark"] .mobileHeader .dropdownButton:active:focus-visible, [data-theme="dark"] .mobile-user-profile:focus, [data-theme="dark"] .mobile-user-profile:focus-visible, [data-theme="dark"] .mobile-user-profile:focus-within, [data-theme="dark"] .mobile-user-profile *:focus, [data-theme="dark"] .mobile-user-profile *:focus-visible, [data-theme="dark"] .mobile-user-profile *:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; background: transparent !important; } /* Remove focus from all navigation container elements in dark mode */ [data-theme="dark"] .navbar:focus, [data-theme="dark"] .navbar:focus-visible, [data-theme="dark"] .navbar:focus-within, [data-theme="dark"] .navbar-collapse:focus, [data-theme="dark"] .navbar-collapse:focus-visible, [data-theme="dark"] .navbar-collapse:focus-within, [data-theme="dark"] #navbarNav:focus, [data-theme="dark"] #navbarNav:focus-visible, [data-theme="dark"] #navbarNav:focus-within { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } /* Remove focus from data-theme-navbar elements in dark mode */ [data-theme="dark"] [data-theme-navbar] .navbar-brand:focus, [data-theme="dark"] [data-theme-navbar] .navbar-brand:focus-visible, [data-theme="dark"] [data-theme-navbar] .navbar-brand:focus-within, [data-theme="dark"] [data-theme-navbar] .nav-link:focus, [data-theme="dark"] [data-theme-navbar] .nav-link:focus-visible, [data-theme="dark"] [data-theme-navbar] .nav-link:focus-within, [data-theme="dark"] [data-theme-navbar] .nav-item:focus, [data-theme="dark"] [data-theme-navbar] .nav-item:focus-visible, [data-theme="dark"] [data-theme-navbar] .nav-item:focus-within, [data-theme="dark"] [data-theme-navbar] .navbar-toggler:focus, [data-theme="dark"] [data-theme-navbar] .navbar-toggler:focus-visible, [data-theme="dark"] [data-theme-navbar] .user-name:focus, [data-theme="dark"] [data-theme-navbar] .user-name:focus-visible, [data-theme="dark"] [data-theme-navbar] .user-profile-link:focus, [data-theme="dark"] [data-theme-navbar] .user-profile-link:focus-visible { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; border: none !important; text-decoration: none !important; } [data-theme="light"] .footer-divider { border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .copyright { color: #6c757d; } [data-theme="dark"] .footer { background: var(--primary-dark); border-top: 1px solid rgba(255, 255, 255, 0.1); } /* ======================================== CREATORS PAGE STYLES ======================================== */ .creators-main { padding-top: 120px; background: var(--primary-dark); min-height: 100vh; } /* Search Section */ .search-section { margin-bottom: 2rem; } .search-bar { position: relative; max-width: 500px; margin: 0 auto; } .search-input { width: 100%; padding: 1rem 1rem 1rem 3rem; background: var(--secondary-dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 25px; color: var(--text-light); font-size: 1rem; transition: all 0.3s ease; } .search-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); background: var(--secondary-dark); color: var(--text-light); } .search-input::placeholder { color: var(--text-muted); } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1rem; } /* Filters Section */ .filters-section { margin-bottom: 3rem; } .filter-group { align-items: center; } .filter-item { position: relative; } .filter-btn { background: var(--secondary-dark); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-light); padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 500; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .filter-btn:hover, .filter-btn:focus { background: var(--accent-blue); border-color: var(--accent-blue); color: white; } .filter-btn::after { display: none; } .dropdown-menu { background: var(--secondary-dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 0.5rem 0; margin-top: 0.5rem; min-width: 200px; } .dropdown-item { color: var(--text-light); padding: 0.75rem 1.5rem; transition: all 0.3s ease; } .dropdown-item:hover, .dropdown-item:focus { background: var(--accent-blue); color: white; } .filters-btn { background: transparent; border: 2px solid var(--accent-blue); color: var(--accent-blue); padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; width: 100%; } .filters-btn:hover { background: var(--accent-blue); color: white; } /* Creator Cards */ .creators-grid { margin-bottom: 3rem; } .creator-card { background: var(--secondary-dark); border-radius: 20px; overflow: hidden; transition: all 0.3s ease; height: 100%; border: 1px solid rgba(255, 255, 255, 0.05); } .creator-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); border-color: var(--accent-blue); } .creator-image { position: relative; aspect-ratio: 3/4; overflow: hidden; height: 400px; min-height: 400px; max-height: 400px; } .creator-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; display: block; } .creator-card:hover .creator-image img { transform: scale(1.05); } .status-badges { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: flex-start; } .badge { padding: 0.4rem 0.8rem; border-radius: 15px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-live { background: #ff4757; color: white; animation: pulse-live 2s infinite; } .badge-new { background: #2ed573; color: white; } .badge-top { background: #ffa502; color: white; } .badge-verified { background: rgba(33, 150, 243, 0.9); color: white; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; padding: 0; } .creator-info { padding: 1.5rem; } .creator-name { font-size: 1.25rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.5rem; text-decoration: none !important; } /* Creator name link - no underline */ .creator-name-link { text-decoration: none !important; color: inherit; display: inline-block; } .creator-name-link:hover { text-decoration: none !important; } .creator-name-link:focus { text-decoration: none !important; } .creator-name-link:visited { text-decoration: none !important; } .creator-name-link .creator-name { text-decoration: none !important; } .creator-name-link:hover .creator-name { text-decoration: none !important; } /* Global rule: All creator names should have no underline */ a.creator-name-link, .creator-name-link a, .creator-name-link h1, .creator-name-link h2, .creator-name-link h3, .creator-name-link h4, .creator-name-link h5, .creator-name-link h6 { text-decoration: none !important; } a.creator-name-link:hover, .creator-name-link:hover a, .creator-name-link:hover h1, .creator-name-link:hover h2, .creator-name-link:hover h3, .creator-name-link:hover h4, .creator-name-link:hover h5, .creator-name-link:hover h6 { text-decoration: none !important; } .creator-status { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; } .creator-price { font-size: 1.1rem; font-weight: 600; color: var(--accent-blue); margin-bottom: 1.5rem; } .creator-actions { display: flex; gap: 0.75rem; } .btn-follow { background: var(--secondary-dark); border: 2px solid rgba(255, 255, 255, 0.2); color: var(--text-light); padding: 0.6rem 1.2rem; border-radius: 25px; font-weight: 600; font-size: 0.9rem; flex: 1; transition: all 0.3s ease; } .btn-follow:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: var(--text-light); transform: translateY(-2px); } /* Unfollow button - Dark Mode - No red color */ button#favoriteButton.unfollow-state, button.favoriteButton.unfollow-state, button#favoriteButton[data-state="unfollow"], button.favoriteButton[data-state="unfollow"], .btn-follow.unfollow-state, button.btn-follow[data-state="unfollow"] { background: var(--secondary-dark) !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; color: var(--text-light) !important; } button#favoriteButton.unfollow-state:hover, button.favoriteButton.unfollow-state:hover, button#favoriteButton[data-state="unfollow"]:hover, button.favoriteButton[data-state="unfollow"]:hover, .btn-follow.unfollow-state:hover, button.btn-follow[data-state="unfollow"]:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: var(--text-light) !important; } .btn-message { background: var(--accent-blue); border: 2px solid var(--accent-blue); color: white; padding: 0.6rem 1.2rem; border-radius: 25px; font-weight: 600; font-size: 0.9rem; flex: 1; transition: all 0.3s ease; } .btn-message:hover { background: #1976d2; border-color: var(--theme-accent-hover, #1976d2); transition: border-color var(--transition-normal, 0.3s ease); color: white; transform: translateY(-2px); } /* Load More Section */ .load-more-section { padding: 2rem 0; } /* ======================================== ANIMATIONS ======================================== */ .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); } 100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); } } @keyframes pulse-live { 0% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 71, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); } } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Creator card animation */ .creator-card { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease forwards; } .creator-card:nth-child(1) { animation-delay: 0.1s; } .creator-card:nth-child(2) { animation-delay: 0.2s; } .creator-card:nth-child(3) { animation-delay: 0.3s; } .creator-card:nth-child(4) { animation-delay: 0.4s; } .creator-card:nth-child(5) { animation-delay: 0.5s; } .creator-card:nth-child(6) { animation-delay: 0.6s; } .creator-card:nth-child(7) { animation-delay: 0.7s; } .creator-card:nth-child(8) { animation-delay: 0.8s; } /* ======================================== LIGHTBOX STYLES ======================================== */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; } .lightbox-content { position: relative; max-width: 90%; max-height: 90%; } .lightbox-content img { width: 100%; height: 100%; object-fit: contain; } .lightbox-close { position: absolute; top: -40px; right: 0; color: white; font-size: 2rem; cursor: pointer; z-index: 10000; } /* ======================================== UTILITY CLASSES ======================================== */ .loaded { opacity: 1 !important; } img { opacity: 1 !important; transition: opacity 0.3s ease; } .filter-group.show-mobile { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--secondary-dark); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; padding: 1rem; z-index: 1000; gap: 1rem; } /* ======================================== RESPONSIVE DESIGN ======================================== */ /* Tablet Styles */ @media (max-width: 768px) { .hero-title { font-size: 2.5rem; text-align: center; } .hero-subtitle { text-align: center; } .section-title { font-size: 2.5rem; } .feature-title { font-size: 2.5rem; } .cta-title { font-size: 2.5rem; } .content-area { padding: 2rem; } .creators-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .creator-avatar { width: 60px; height: 60px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .feature-tabs { flex-direction: column; gap: 0; } .tab-item { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-right: none; } .illustration-container img { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .model-access-section .row { flex-direction: column-reverse; } .model-image { height: 400px; } /* Creators Page Mobile */ .creators-main { padding-top: 100px; } .search-section { margin-bottom: 1.5rem; padding: 0 1rem; } .filters-section { margin-bottom: 2rem; padding: 0 1rem; } .filter-group { flex-direction: column; gap: 1rem !important; align-items: stretch; } .filter-btn { width: 100%; justify-content: space-between; } .filters-toggle { margin-top: 1rem; } .creators-grid { padding: 0 1rem; } .creator-card { margin-bottom: 1rem; } .creator-actions { flex-direction: row; gap: 0.5rem; } .btn-follow, .btn-message { flex: 1; text-align: center; font-size: 0.85rem; padding: 0.5rem 0.8rem; } .status-badges { top: 0.75rem; left: 0.75rem; right: 0.75rem; } .creator-info { padding: 1rem; } .creator-name { font-size: 1.1rem; } .creator-price { font-size: 1rem; } .creators-grid .row { margin: 0; } .creators-grid .col-xl-3 { padding: 0 0.5rem; margin-bottom: 1rem; } } /* Mobile Styles */ @media (max-width: 576px) { .hero-title { font-size: 2rem; } .section-title { font-size: 2rem; } .feature-title { font-size: 2rem; } .cta-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .feature-description { font-size: 1rem; } .cta-description { font-size: 1rem; } .content-area { padding: 1.5rem; } .gallery-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 1.5rem; } /* Creators Page Small Mobile */ .search-input { padding: 0.875rem 0.875rem 0.875rem 2.5rem; font-size: 0.9rem; } .search-icon { left: 0.875rem; font-size: 0.9rem; } .filter-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; } .filters-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; } .creator-image { aspect-ratio: 4/5; height: 350px; min-height: 350px; max-height: 350px; } .badge { font-size: 0.7rem; padding: 0.3rem 0.6rem; } .badge-verified { width: 1.75rem; height: 1.75rem; } .creators-grid .col-xl-3, .creators-grid .col-lg-4, .creators-grid .col-md-6, .creators-grid .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .creator-actions { flex-direction: column; gap: 0.4rem; } .btn-follow, .btn-message { width: 100%; font-size: 0.8rem; padding: 0.5rem; } } /* Extra Small Mobile */ @media (max-width: 480px) { .creators-grid .col-xl-3, .creators-grid .col-lg-4, .creators-grid .col-md-6, .creators-grid .col-sm-6 { flex: 0 0 100%; max-width: 100%; } .creator-card { max-width: 300px; margin: 0 auto 1rem; } .creator-image { height: 300px; min-height: 300px; max-height: 300px; } } /* Desktop Hover Effects */ @media (min-width: 769px) { .creator-card { cursor: pointer; } .creator-card:hover .creator-name { color: var(--accent-blue); } .creator-card:hover .creator-price { transform: scale(1.05); } } /* ======================================== PROFILE PAGE STYLES ======================================== */ /* Profile Header */ .profile-header { position: relative; padding-top: 74px; background: var(--primary-dark); } .profile-bg { position: absolute; top: 0; left: 0; right: 0; height: 300px; overflow: hidden; } .profile-bg-image { width: 100%; height: 100%; object-fit: cover; filter: blur(10px); transform: scale(1.1); } .profile-bg-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(26,26,26,0.3) 0%, rgba(26,26,26,0.9) 100%); } .profile-info { position: relative; z-index: 2; padding: 2rem 0; display: flex; align-items: center; gap: 2rem; } .profile-avatar { position: relative; flex-shrink: 0; } .avatar-image { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--text-light); object-fit: cover; } .online-indicator { position: absolute; bottom: 8px; right: 8px; width: 20px; height: 20px; background: #2ed573; border: 3px solid var(--text-light); border-radius: 50%; } .profile-details { flex: 1; } .profile-name { font-size: 2.5rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.5rem; } .profile-username { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1.5rem; } .profile-stats { display: flex; gap: 3rem; } .stat-item { text-align: center; } .stat-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-light); } .stat-label { display: block; color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Profile Content */ .profile-content { padding: 2rem 0; background: var(--primary-dark); } /* Content Tabs */ .content-tabs { margin-bottom: 2rem; } .nav-tabs { border-bottom: 1px solid rgba(255,255,255,0.1); } .nav-tabs .nav-link { background: none; border: none; color: var(--text-muted); font-weight: 600; padding: 1rem 2rem; transition: all 0.3s ease; } .nav-tabs .nav-link.active { color: var(--accent-blue); border-bottom: 2px solid var(--accent-blue); background: none; } .nav-tabs .nav-link:hover { color: var(--accent-blue); border-color: transparent; } /* Post Cards */ .post-card { background: var(--secondary-dark); border-radius: 15px; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.05); } .post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .post-author { display: flex; align-items: center; gap: 0.75rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .author-name { color: var(--text-light); margin: 0; font-size: 0.95rem; font-weight: 600; } .post-time { color: var(--text-muted); font-size: 0.85rem; } .btn-options { background: none; border: none; color: var(--text-muted); padding: 0.5rem; border-radius: 50%; transition: all 0.3s ease; } .btn-options:hover { background: rgba(255,255,255,0.1); color: var(--text-light); } .post-text { color: var(--text-light); line-height: 1.6; margin-bottom: 1rem; } /* Video Container */ .video-container { position: relative; border-radius: 15px; overflow: hidden; aspect-ratio: 16/9; } .video-thumbnail { width: 100%; height: 100%; object-fit: cover; } .video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; } .play-button { width: 60px; height: 60px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; color: var(--primary-dark); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; margin-left: 3px; /* Center the play icon */ } .play-button:hover { background: var(--text-light); transform: scale(1.1); } .video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); color: var(--text-light); padding: 0.25rem 0.5rem; border-radius: 5px; font-size: 0.8rem; } .video-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.3); } .progress-bar { height: 100%; background: var(--accent-blue); transition: width 0.3s ease; } /* Post Actions */ .post-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.1); } .action-buttons { display: flex; gap: 2rem; } .action-btn { background: none; border: none; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; transition: all 0.3s ease; padding: 0.5rem 0; } .action-btn:hover { color: var(--accent-blue); } .action-btn.liked { color: var(--accent-pink, #ff4757); transition: color var(--transition-normal, 0.3s ease); } .action-btn.liked:hover { color: var(--accent-pink, #ff3742); transition: color var(--transition-normal, 0.3s ease); } /* Photo Grid */ .photos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .photo-item { aspect-ratio: 1; border-radius: 10px; overflow: hidden; } .photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .photo-item:hover img { transform: scale(1.05); } .post-photo { width: 100%; border-radius: 10px; margin-top: 1rem; } /* Videos Grid */ .videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .video-item { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; } .video-item img { width: 100%; height: 100%; object-fit: cover; } .video-item .play-button { width: 50px; height: 50px; font-size: 1rem; } /* Subscription Sidebar */ .subscription-sidebar { position: sticky; top: 100px; } .sidebar-title { color: var(--text-light); font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; } .subscription-card { background: var(--secondary-dark); border-radius: 15px; padding: 1.5rem; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: all 0.3s ease; } .subscription-card:hover { border-color: var(--accent-blue); transform: translateY(-5px); } .subscription-price { margin-bottom: 1rem; } .price { font-size: 2rem; font-weight: 700; color: var(--text-light); margin-right: 0.5rem; } .period { color: var(--text-muted); font-size: 1rem; } .subscription-package { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; text-transform: capitalize; } .btn-subscribe { background: var(--gradient-primary); border: none; color: white; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; width: 100%; transition: all 0.3s ease; } .btn-subscribe:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3); color: white; } /* ======================================== PROFILE PAGE RESPONSIVE DESIGN ======================================== */ @media (max-width: 768px) { .profile-info { flex-direction: column; text-align: center; gap: 1rem; } .profile-name { font-size: 2rem; } .profile-stats { justify-content: center; gap: 2rem; } .avatar-image { width: 100px; height: 100px; } .nav-tabs .nav-link { padding: 0.75rem 1rem; font-size: 0.9rem; } .action-buttons { gap: 1rem; } .action-btn { font-size: 0.8rem; } .subscription-sidebar { position: static; margin-top: 2rem; } .photos-grid { grid-template-columns: repeat(2, 1fr); } .videos-grid { grid-template-columns: 1fr; } .video-item .play-button { width: 40px; height: 40px; } } @media (max-width: 576px) { .profile-header { padding-top: 74px; } .profile-bg { height: 200px; } .profile-info { padding: 1rem 0; } .profile-name { font-size: 1.8rem; } .profile-stats { gap: 1.5rem; } .stat-number { font-size: 1.2rem; } .post-card { padding: 1rem; } .subscription-card { padding: 1rem; } .price { font-size: 1.5rem; } .photos-grid { grid-template-columns: 1fr; } } /* ======================================== ENHANCED PROFILE PAGE STYLES ======================================== */ /* Profile Action Buttons */ .profile-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; } .profile-actions .btn { padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; } .subscribe-btn { background: var(--gradient-primary); border: none; } .subscribe-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4); } .message-btn, .more-btn { border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .message-btn:hover, .more-btn:hover { border-color: var(--accent-blue); background: rgba(33, 150, 243, 0.2); transform: translateY(-2px); } .more-btn { padding: 0.75rem; min-width: auto; } /* Enhanced Profile Navigation */ .profile-nav .nav-link { background: none; border: none; color: var(--text-muted); font-weight: 600; padding: 1rem 1.5rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 0.5rem; border-radius: 10px 10px 0 0; } .profile-nav .nav-link.active { color: var(--accent-blue); background: var(--secondary-dark); border-bottom: 2px solid var(--accent-blue); } .profile-nav .nav-link:hover { color: var(--accent-blue); background: rgba(33, 150, 243, 0.1); } /* Gallery Grid with Overlay */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .gallery-item { position: relative; aspect-ratio: 1; border-radius: 15px; overflow: hidden; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay i { color: white; font-size: 2rem; } /* Video Grid Enhancement */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .video-item { background: var(--secondary-dark); border-radius: 15px; overflow: hidden; transition: transform 0.3s ease; } .video-item:hover { transform: translateY(-5px); } .video-wrapper { position: relative; aspect-ratio: 16/9; } .video-info { padding: 1rem; } .video-info h6 { color: var(--text-light); margin-bottom: 0.5rem; font-weight: 600; } .video-info p { color: var(--text-muted); font-size: 0.9rem; margin: 0; } /* Live Content Placeholder */ .live-content { text-align: center; padding: 4rem 2rem; } .live-placeholder i { font-size: 4rem; color: var(--text-muted); margin-bottom: 1rem; } .live-placeholder h4 { color: var(--text-light); margin-bottom: 0.5rem; } .live-placeholder p { color: var(--text-muted); } /* Custom Offers */ .offers-content { display: grid; gap: 1.5rem; } .offer-card { background: var(--secondary-dark); border-radius: 15px; padding: 2rem; border: 1px solid rgba(255,255,255,0.05); transition: all 0.3s ease; } .offer-card:hover { border-color: var(--accent-blue); transform: translateY(-5px); } .offer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .offer-header h5 { color: var(--text-light); margin: 0; font-weight: 600; } .offer-price { color: var(--accent-blue); font-size: 1.5rem; font-weight: 700; } .offer-description { color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; } .offer-card .btn { background: var(--gradient-primary); border: none; padding: 0.75rem 2rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; } .offer-card .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4); } /* About Content */ .about-content { background: var(--secondary-dark); border-radius: 15px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.05); } .about-content h5 { color: var(--text-light); margin-bottom: 1rem; font-weight: 600; } .about-content p { color: var(--text-muted); line-height: 1.6; } .about-stats { margin-top: 2rem; } .stat-box { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; text-align: center; } .stat-box h6 { color: var(--text-light); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; } .stat-box p { color: var(--text-muted); margin: 0; font-size: 0.9rem; } /* Enhanced Subscription Sidebar */ .subscription-sidebar { position: sticky; top: 100px; background: var(--secondary-dark); border-radius: 20px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.05); } /* ======================================== LIVE CREATORS PAGE STYLES ======================================== */ .live-main { padding-top: 100px; background: var(--primary-dark); min-height: 100vh; width: 100%; overflow-x: hidden; } /* Ensure container is responsive */ .live-main .container { width: 100%; max-width: 100%; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* Ensure rows are responsive */ .live-main .row { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; } .live-main .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* Mobile: Stack columns */ @media (max-width: 767px) { .live-main .row { flex-direction: column; } .live-main .col-lg-3, .live-main .col-lg-9, .live-main .col-md-4, .live-main .col-md-8, .live-main .col-12 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } /* Tablet: Adjust column widths */ @media (min-width: 768px) and (max-width: 991px) { .live-main .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .live-main .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } } /* Live Header */ .live-header { padding: 3rem 0 2rem 0; } .live-title { font-size: 2.5rem; font-weight: 700; color: var(--text-light); margin-bottom: 1rem; } .live-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 0; max-width: 600px; margin-left: auto; margin-right: auto; } /* Filters Sidebar */ .filters-sidebar { background: var(--secondary-dark); border-radius: 20px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.05); position: sticky; top: 120px; margin-bottom: 2rem; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; min-width: 0; } .filters-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } .filter-toggle { display: none; } .filter-toggle i { transition: transform 0.3s ease; } .filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); } .filters-header h5 { color: var(--text-light); margin: 0; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } .filters-actions { display: flex; gap: 0.5rem; width: 100%; box-sizing: border-box; margin-top: 1rem; } .apply-filters { background: var(--gradient-primary); border: none; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; min-height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; white-space: nowrap; box-sizing: border-box; } .reset-filters { border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-muted); padding: 0.5rem 1rem; border-radius: 20px; font-weight: 600; min-height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; white-space: nowrap; box-sizing: border-box; } .reset-filters:hover { border-color: var(--accent-blue); color: var(--accent-blue); } .filter-groups { display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .filter-group { display: flex; /* flex-direction: column; */ gap: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .filter-group .filters-actions { width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 1rem; min-width: 0; } .filter-label { color: var(--text-light); font-weight: 600; font-size: 0.95rem; margin-bottom: 0; } .filter-options { display: flex; flex-direction: column; gap: 0.75rem; } .form-check { display: flex; align-items: center; gap: 0.5rem; } .form-check-input { background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 4px; margin: 0; } .form-check-input:checked { background-color: var(--theme-accent); border-color: var(--theme-accent); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); } .form-check-label { color: var(--text-muted); font-size: 0.9rem; cursor: pointer; margin: 0; } .form-select { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: var(--text-light); padding: 0.75rem 2.5rem 0.75rem 1rem; font-size: 0.9rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Creator page filter selects - ensure proper arrow alignment */ .creators-main .filter-select, .creators-main .form-select.filter-select { padding-right: 2.5rem !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; text-overflow: ellipsis !important; overflow: hidden !important; white-space: nowrap !important; } .form-select:focus { background-color: rgba(255, 255, 255, 0.1); border-color: var(--accent-blue); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); color: var(--text-light); } .form-select option { background-color: var(--secondary-dark); color: var(--text-light); } /* Live Creators Grid */ .live-creators-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; } .live-creator-card { background: var(--secondary-dark); border-radius: 20px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.05); position: relative; transition: all 0.3s ease; } .live-creator-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(33, 150, 243, 0.2); } .live-badge { position: absolute; top: 1rem; left: 1rem; background: #ff4757; color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; animation: livePulse 2s infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .live-badge i { font-size: 0.6rem; animation: liveCircle 1s infinite; } @keyframes liveCircle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } .creator-info { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; margin-top: 2rem; } .creator-card-info{ display: flex; align-items: center; gap: 0rem; margin-bottom: 1.5rem; margin-top: 0rem; flex-direction: column; } .creator-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-blue); } .creator-details { flex: 1; } .creator-name { color: var(--text-light); font-weight: 600; margin-bottom: 0.25rem; font-size: 1.1rem; text-decoration: none !important; } .creator-username { color: var(--text-muted); margin: 0; font-size: 0.9rem; } .live-stats { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } .stat-item { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.9rem; } .stat-item i { color: var(--accent-blue); width: 16px; text-align: center; } /* Specific styling for statistics IDs */ #like_count_txt, #feed_count_txt, #photo_count_txt, #video_count_txt { color: #ffffff !important; font-weight: 600 !important; } [data-theme="light"] #like_count_txt, [data-theme="light"] #feed_count_txt, [data-theme="light"] #photo_count_txt, [data-theme="light"] #video_count_txt { color: #212529 !important; } [data-theme="dark"] #like_count_txt, [data-theme="dark"] #feed_count_txt, [data-theme="dark"] #photo_count_txt, [data-theme="dark"] #video_count_txt { color: #ffffff !important; } /* Force white color for statistics on black background - maximum specificity */ .model-stats span, .model-stats span b, .model-stats span strong, .model-stats #like_count_txt, .model-stats #feed_count_txt, .model-stats #photo_count_txt, .model-stats #video_count_txt { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* Theme-aware text styling - consistent with website */ .model-username, .model-username h5, .heading-title_join-live, .title_lastseen, .last-seen-content, .last-seen-content span, .last-seen-content strong, h1, h2, h3, h4, h5, h6, .card-title, .video-brodacasting, .user_info h4, .stream-placeholder h4, .model_broadcast_contents h4, .about_live_stream h4, .obs-streaming-panel h5, .obs-streaming-panel h6, .card-header h5, .card-body h6, p, span, div, label, .form-group h3, .is_available_private_cls h3, .is_extend_private_cls h3, .policy-lable, .text-muted, .badge { color: var(--text-primary, #001b2b) !important; } /* Light theme text overrides */ [data-theme="light"] .model-username, [data-theme="light"] .model-username h5, [data-theme="light"] .heading-title_join-live, [data-theme="light"] .title_lastseen, [data-theme="light"] .last-seen-content, [data-theme="light"] .last-seen-content span, [data-theme="light"] .last-seen-content strong, [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, [data-theme="light"] .card-title, [data-theme="light"] .video-brodacasting, [data-theme="light"] .user_info h4, [data-theme="light"] .stream-placeholder h4, [data-theme="light"] .model_broadcast_contents h4, [data-theme="light"] .about_live_stream h4, [data-theme="light"] .obs-streaming-panel h5, [data-theme="light"] .obs-streaming-panel h6, [data-theme="light"] .card-header h5, [data-theme="light"] .card-body h6, [data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] div, [data-theme="light"] label, [data-theme="light"] .form-group h3, [data-theme="light"] .is_available_private_cls h3, [data-theme="light"] .is_extend_private_cls h3, [data-theme="light"] .policy-lable, [data-theme="light"] .text-muted, [data-theme="light"] .badge { color: #212529 !important; } /* Make all text and icons inside the streaming player white in light mode */ /* All text white in light mode */ [data-theme="light"] .load_more_chat, [data-theme="light"] .video-brodacasting, [data-theme="light"] .stream-placeholder i, [data-theme="light"] .stream-placeholder h3, [data-theme="light"] .stream-placeholder h4, [data-theme="light"] .stream-placeholder p, [data-theme="light"] .model_broadcast_contents h4, [data-theme="light"] .about_live_stream h4, [data-theme="light"] .streaming-options .stream-option-card h5, [data-theme="light"] .streaming-options .stream-option-card p, [data-theme="light"] .streaming-options .stream-option-card .option-icon i, [data-theme="light"] .obs-streaming-panel h5, [data-theme="light"] .obs-streaming-panel h6{ color: white !important; } /* Exclude the OBS Settings button */ [data-theme="light"] .stream-option-card .btn-outline-light { color: initial !important; /* keeps default button text color */ } /* Exclude the Ready to Stream badge */ [data-theme="light"] #stream-status-badge { color: initial !important; } [data-theme="light"] .streaming-options .stream-option-card .option-steps, [data-theme="light"] .streaming-options .stream-option-card .option-steps li { color: white !important; } /* Dark theme text overrides - ensure white text on dark backgrounds */ [data-theme="dark"] .model-username, [data-theme="dark"] .model-username h5, [data-theme="dark"] .heading-title_join-live, [data-theme="dark"] .title_lastseen, [data-theme="dark"] .last-seen-content, [data-theme="dark"] .last-seen-content span, [data-theme="dark"] .last-seen-content strong, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .card-title, [data-theme="dark"] .video-brodacasting, [data-theme="dark"] .user_info h4, [data-theme="dark"] .stream-placeholder h4, [data-theme="dark"] .model_broadcast_contents h4, [data-theme="dark"] .about_live_stream h4, [data-theme="dark"] .obs-streaming-panel h5, [data-theme="dark"] .obs-streaming-panel h6, [data-theme="dark"] .card-header h5, [data-theme="dark"] .card-body h6, [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div, [data-theme="dark"] label, [data-theme="dark"] .form-group h3, [data-theme="dark"] .is_available_private_cls h3, [data-theme="dark"] .is_extend_private_cls h3, [data-theme="dark"] .policy-lable, [data-theme="dark"] .text-muted, [data-theme="dark"] .badge { color: #ffffff !important; } /* Website-consistent button styling */ .btn-go-live { background: var(--gradient-primary, linear-gradient(270deg, #A61651 0%, #01ADF1 100%)) !important; border: none !important; color: white !important; padding: 0.75rem 2rem !important; border-radius: 25px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; } .btn-go-live:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important; color: white !important; } .btn-cancel { background: transparent !important; border: 2px solid var(--accent-blue, #2196f3) !important; color: var(--accent-blue, #2196f3) !important; padding: 0.75rem 2rem !important; border-radius: 25px !important; font-weight: 600 !important; transition: all 0.3s ease !important; } .btn-cancel:hover { background: var(--accent-blue, #2196f3) !important; color: white !important; transform: translateY(-2px) !important; } /* Light theme button overrides */ [data-theme="light"] .btn-go-live { background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important; color: white !important; } [data-theme="light"] .btn-cancel { border-color: #2196f3 !important; color: #2196f3 !important; } [data-theme="light"] .btn-cancel:hover { background: #2196f3 !important; color: white !important; } /* Form elements - theme aware */ .form-control { background-color: var(--bg-secondary, rgba(255, 255, 255, 0.1)) !important; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.3)) !important; color: var(--text-light, #ffffff) !important; } .form-control:focus { background-color: var(--bg-secondary, rgba(255, 255, 255, 0.15)) !important; border-color: var(--accent-blue, #2196f3) !important; box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25) !important; color: var(--text-light, #ffffff) !important; } .form-control::placeholder { color: var(--text-muted, rgba(255, 255, 255, 0.7)) !important; } /* Light theme form overrides */ [data-theme="light"] .form-control { background-color: #ffffff !important; border-color: #dee2e6 !important; color: #212529 !important; } [data-theme="light"] .form-control:focus { background-color: #ffffff !important; border-color: #2196f3 !important; color: #212529 !important; } [data-theme="light"] .form-control::placeholder { color: #6c757d !important; } /* Card styling - theme aware */ .card, .card-header, .card-body { background-color: var(--secondary-dark, rgba(0, 0, 0, 0.8)) !important; color: var(--text-light, #ffffff) !important; border-color: var(--border-color, rgba(255, 255, 255, 0.2)) !important; } /* Light theme card overrides */ [data-theme="light"] .card, [data-theme="light"] .card-header, [data-theme="light"] .card-body { background-color: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; } .join-live-btn a i { font-size: 16px !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; display: inline-block !important; text-align: center !important; vertical-align: middle !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; font-style: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; color: inherit !important; } .join-live-btn a i.fas { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; } .join-live-btn a i.fa-pencil-alt:before { content: "\f303" !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900 !important; } /* Fallback if Font Awesome is not loaded */ .join-live-btn a i.fa-pencil-alt:before { content: "✏" !important; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; font-weight: normal !important; } /* Join Live Session Button - Match btn-gradient Design */ .join-live-btn { display: inline-block !important; margin: 0 !important; padding: 0 !important; } /* Override all conflicting styles with maximum specificity */ .join-live-btn a, a.join-live-btn, .btn.join-live-btn, .join-live-btn.btn { display: inline-block !important; background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important; border: none !important; color: white !important; padding: 0.75rem 2rem !important; border-radius: 25px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s ease !important; position: relative !important; z-index: 2 !important; cursor: pointer !important; min-height: 44px !important; min-width: 44px !important; line-height: 1.2 !important; text-align: center !important; font-size: 14px !important; box-shadow: 0 4px 15px rgba(166, 22, 81, 0.3) !important; } .join-live-btn a:hover, a.join-live-btn:hover, .btn.join-live-btn:hover, .join-live-btn.btn:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(166, 22, 81, 0.4) !important; color: white !important; text-decoration: none !important; background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important; } .join-live-btn a:active, a.join-live-btn:active, .btn.join-live-btn:active, .join-live-btn.btn:active { transform: translateY(0px) !important; box-shadow: 0 4px 15px rgba(166, 22, 81, 0.2) !important; } .join-live-btn a:focus, a.join-live-btn:focus, .btn.join-live-btn:focus, .join-live-btn.btn:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(166, 22, 81, 0.3) !important; } /* Override specific conflicting styles */ .edit_profile_bg_box .join-live-btn a { background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important; color: white !important; border-radius: 25px !important; width: auto !important; height: auto !important; padding: 0.75rem 2rem !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(166, 22, 81, 0.3) !important; } .edit_profile_bg_box .join-live-btn a:hover { background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(166, 22, 81, 0.4) !important; color: white !important; } /* Dark mode overrides */ [data-theme="dark"] .join-live-btn a, [data-theme="dark"] a.join-live-btn, [data-theme="dark"] .btn.join-live-btn, [data-theme="dark"] .join-live-btn.btn { background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important; color: white !important; } [data-theme="dark"] .join-live-btn a:hover, [data-theme="dark"] a.join-live-btn:hover, [data-theme="dark"] .btn.join-live-btn:hover, [data-theme="dark"] .join-live-btn.btn:hover { background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important; color: white !important; } /* Light mode overrides */ [data-theme="light"] .join-live-btn a, [data-theme="light"] a.join-live-btn, [data-theme="light"] .btn.join-live-btn, [data-theme="light"] .join-live-btn.btn { background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%) !important; color: #ffffff !important; border: none !important; } [data-theme="light"] .join-live-btn a:hover, [data-theme="light"] a.join-live-btn:hover, [data-theme="light"] .btn.join-live-btn:hover, [data-theme="light"] .join-live-btn.btn:hover { background: linear-gradient(270deg, #8B1248 0%, #0198D4 100%) !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(166, 22, 81, 0.4) !important; } /* Upcoming Lives Section */ .upcoming-lives { padding: 4rem 0; background: var(--secondary-dark); border-radius: 30px 30px 0 0; margin-top: 2rem; } .section-header { margin-bottom: 3rem; } .section-title { font-size: 2rem; font-weight: 400; color: var(--text-light); margin-bottom: 1rem; } .section-subtitle { font-size: 1rem; color: var(--text-muted); margin: 0; } .upcoming-table-container { max-width: 900px; margin: 0 auto; padding: 0 15px; } .upcoming-table { background: var(--secondary-dark, rgba(255, 255, 255, 0.02)); border-radius: 12px; overflow: hidden; border: 1px solid rgba(1, 173, 241, 0.3); width: 100%; border-collapse: separate; border-spacing: 0; } .upcoming-table thead th { background: rgba(255, 255, 255, 0.05); color: var(--text-light, #ffffff); border: none; padding: 1.25rem 1.5rem; font-weight: 600; text-align: left; font-size: 0.95rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .upcoming-table thead th:first-child { border-top-left-radius: 12px; } .upcoming-table thead th:last-child { border-top-right-radius: 12px; } .upcoming-table tbody td { background: transparent; border: none; padding: 1.25rem 1.5rem; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .upcoming-table tbody tr:last-child td { border-bottom: none; } .upcoming-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; } .upcoming-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; } .creator-cell { display: flex; align-items: center; gap: 0.75rem; } .table-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: none; } .table-username { color: var(--text-light, #ffffff); font-weight: 500; font-size: 0.95rem; white-space: nowrap; } .live-time { color: var(--text-light, #ffffff); font-size: 0.95rem; font-weight: 400; display: block; line-height: 1.5; } .slot-hint { margin-top: 4px; font-size: 0.85rem; color: var(--text-muted, rgba(255, 255, 255, 0.6)); } .slot-hint .view-slots-btn { color: #A61651 !important; text-decoration: none; font-size: 0.85rem; } .slot-hint .view-slots-btn:hover { text-decoration: underline; } .table-username { color: var(--text-light); font-weight: 600; font-size: 0.95rem; } .live-time { color: var(--text-muted); font-size: 0.95rem; } .notify-btn { border: 1px solid rgba(255, 255, 255, 0.3); color: var(--text-light, #ffffff); background: transparent; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 500; font-size: 0.85rem; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .notify-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-light, #ffffff); border-color: rgba(255, 255, 255, 0.5); } .notify-btn.notified { background: var(--accent-blue, #01ADF1); color: white; border-color: var(--accent-blue, #01ADF1); } .notify-btn.notified:hover { background: var(--accent-blue, #01ADF1); color: white; border-color: var(--accent-blue, #01ADF1); opacity: 0.9; } /* Mobile Responsive */ @media (max-width: 768px) { .live-title { font-size: 2rem; } .live-subtitle { font-size: 1rem; } .filters-sidebar { position: static; margin-bottom: 2rem; padding: 1.5rem; } .filters-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .live-creators-grid { grid-template-columns: 1fr; gap: 1rem; } .live-creator-card { padding: 1.5rem; } .creator-info { margin-top: 1.5rem; } .upcoming-table thead th, .upcoming-table tbody td { padding: 1rem; font-size: 0.9rem; } .table-responsive { border-radius: 15px; } /* Main Content Area */ .feed-main { margin-left: 0; width: 100%; } .feed-main .container-fluid { padding: 1rem; max-width: 100%; } } /* Tablet and below (max-width: 991px) */ @media (max-width: 991px) { .filters-sidebar { position: static; margin-bottom: 2rem; } .live-creators-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .filters-actions { gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .filters-actions .btn, .apply-filters, .reset-filters { min-height: 44px; padding: 0.7rem 1.2rem; font-size: 0.95rem; flex: 1 1 auto; min-width: 120px; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: visible; } } /* Small tablets and large phones (max-width: 768px) */ @media (max-width: 768px) { .live-main { padding-top: 80px; } .live-header { padding: 2rem 0 1.5rem 0; } .live-title { font-size: 2rem; } .live-subtitle { font-size: 1rem; padding: 0 1rem; } .filters-sidebar { padding: 1.5rem; border-radius: 15px; } .filter-toggle { display: inline-flex; align-items: center; gap: 0.5rem; } .filters-actions { flex-direction: row; gap: 0.75rem; flex-wrap: wrap; display: flex; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: 1rem; min-width: 0; } .filters-actions .btn, .apply-filters, .reset-filters { min-height: 44px; padding: 0.7rem 1.2rem; font-size: 0.9rem; flex: 1 1 calc(50% - 0.375rem); min-width: 140px; max-width: 100%; box-sizing: border-box; white-space: nowrap; overflow: visible; } .filter-groups { margin-top: 1rem; } .live-creators-grid { grid-template-columns: 1fr; gap: 1rem; } .live-creator-card { padding: 1.5rem; } .upcoming-lives { padding: 2.5rem 0; } .section-header { margin-bottom: 2rem; padding: 0 1rem; } .section-title { font-size: 1.75rem; } .section-subtitle { font-size: 0.95rem; } .upcoming-table-container { padding: 0 1rem; } /* Convert table to card layout on mobile */ .upcoming-table-container .table-responsive { overflow-x: visible; } .upcoming-table, .upcoming-table thead, .upcoming-table tbody, .upcoming-table th, .upcoming-table td, .upcoming-table tr { display: block; } .upcoming-table thead { display: none; } .upcoming-table tr { margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1rem; background: rgba(255, 255, 255, 0.02); } .upcoming-table td { border: none; padding: 0.5rem 0 !important; position: relative; padding-left: 40% !important; text-align: left !important; } .upcoming-table td:before { content: attr(data-label); position: absolute; left: 0; width: 35%; font-weight: 600; color: var(--text-light, #ffffff); font-size: 0.85rem; } .upcoming-table .creator-cell { flex-direction: row; gap: 0.75rem; padding-left: 0 !important; } .upcoming-table td[data-label="Creator"]:before { display: none; } .upcoming-table td[data-label="Creator"] { padding-left: 0 !important; } .creator-cell { gap: 0.75rem; } .table-avatar { width: 40px; height: 40px; } .slot-info { flex-direction: column; gap: 4px; } .slot-badge, .slot-count { font-size: 10px; padding: 3px 6px; } .notify-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; white-space: nowrap; width: 100%; justify-content: center; } } /* Extra small devices (max-width: 480px) */ @media (max-width: 480px) { .live-main { padding-top: 70px; } .live-header { padding: 1rem 0 0.75rem 0; } .live-title { font-size: 1.5rem; padding: 0 0.75rem; } .live-subtitle { font-size: 0.9rem; padding: 0 0.75rem; } .filters-sidebar { padding: 0.75rem !important; margin-bottom: 1rem; } .live-creator-card { padding: 1rem; } .creator-info { margin-top: 1rem; } .creator-avatar { width: 50px; height: 50px; } .live-stats { gap: 0.5rem; margin-bottom: 1rem; } .stat-item { font-size: 0.8rem; } .join-live-btn { padding: 0.6rem 1rem; font-size: 0.85rem; } .section-title { font-size: 1.5rem; } .section-subtitle { font-size: 0.85rem; } .upcoming-table-container { padding: 0 0.75rem; } .upcoming-table td { padding-left: 45% !important; font-size: 0.8rem; } .upcoming-table td:before { font-size: 0.75rem; width: 40%; } .table-avatar { width: 35px; height: 35px; } .notify-btn { padding: 0.5rem 0.75rem; font-size: 0.75rem; } } /* Small devices (481px - 576px) */ @media (min-width: 481px) and (max-width: 576px) { .live-creators-grid { grid-template-columns: 1fr; } } /* Medium devices (577px - 768px) */ @media (min-width: 577px) and (max-width: 768px) { .live-creators-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .live-creator-card { padding: 1.75rem; } } /* Large devices (769px - 991px) */ @media (min-width: 769px) and (max-width: 991px) { .live-creators-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .filters-sidebar { position: static; margin-bottom: 2rem; } } /* Extra large devices (992px and up) */ @media (min-width: 992px) { .live-creators-grid { grid-template-columns: repeat(3, 1fr); } } /* Mobile phones (max-width: 576px) */ @media (max-width: 576px) { .live-main { padding-top: 74px; } .live-header { padding: 1.5rem 0 1rem 0; } .live-title { font-size: 1.75rem; padding: 0 1rem; } .live-subtitle { font-size: 0.95rem; padding: 0 1rem; } .filters-sidebar { padding: 1rem !important; border-radius: 15px; margin-bottom: 1.5rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } .col-lg-3.col-md-4.col-12 { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; } .filters-header { margin-bottom: 1rem; } .filters-header h5 { font-size: 1rem; } .filter-groups { gap: 1.5rem; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .filter-group { gap: 0.75rem; width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } .filter-group:last-child { margin-top: 0.5rem; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-direction: column !important; align-items: stretch !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0 !important; } .filter-group .filters-actions { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin-top: 1rem !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding: 0 !important; flex-shrink: 0 !important; min-width: 0 !important; } .filter-label { font-size: 0.9rem; } .form-select { padding: 0.6rem 2rem 0.6rem 0.75rem; font-size: 0.85rem; } .filters-actions { flex-direction: column !important; width: 100% !important; max-width: 100% !important; gap: 0.75rem !important; margin-top: 1rem !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; padding: 0 !important; display: flex !important; min-width: 0 !important; } .filters-actions .btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0.75rem 1rem !important; font-size: 0.9rem !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; font-weight: 600 !important; transition: all 0.3s ease !important; white-space: nowrap !important; box-sizing: border-box !important; margin: 0 !important; flex: 0 0 auto !important; flex-shrink: 0 !important; } .apply-filters, .reset-filters { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0.75rem 1rem !important; font-size: 0.9rem !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; box-sizing: border-box !important; margin: 0 !important; flex: 0 0 auto !important; flex-shrink: 0 !important; overflow: visible !important; white-space: nowrap !important; position: relative !important; } .live-creators-grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } .live-creator-card { padding: 1rem; border-radius: 15px; } .live-badge { top: 0.75rem; left: 0.75rem; padding: 0.4rem 0.8rem; font-size: 0.75rem; } .creator-info { margin-top: 1.5rem; margin-bottom: 1rem; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; } .creator-avatar { width: 50px; height: 50px; } .creator-details { width: 100%; } .creator-name { font-size: 1rem; } .creator-username { font-size: 0.85rem; } .live-stats { gap: 0.5rem; margin-bottom: 1rem; } .stat-item { font-size: 0.85rem; justify-content: center; } .join-live-btn { width: 100%; padding: 0.75rem; font-size: 0.9rem; } .upcoming-lives { padding: 2rem 0; border-radius: 20px 20px 0 0; margin-top: 1.5rem; } .section-header { margin-bottom: 1.5rem; padding: 0 1rem; } .section-title { font-size: 1.5rem; margin-bottom: 0.5rem; } .section-subtitle { font-size: 0.9rem; padding: 0 1rem; } .upcoming-table-container { padding: 0 1rem; } /* Convert table to card layout on mobile */ .table-responsive { overflow-x: visible; } .upcoming-table, .upcoming-table thead, .upcoming-table tbody, .upcoming-table th, .upcoming-table td, .upcoming-table tr { display: block; } .upcoming-table thead { display: none; } .upcoming-table tr { margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1rem; background: rgba(255, 255, 255, 0.02); } .upcoming-table td { border: none; padding: 0.5rem 0 !important; position: relative; padding-left: 40% !important; text-align: left !important; } .upcoming-table td:before { content: attr(data-label); position: absolute; left: 0; width: 35%; font-weight: 600; color: var(--text-light, #ffffff); font-size: 0.85rem; } .upcoming-table .creator-cell { flex-direction: row; gap: 0.75rem; padding-left: 0 !important; } .upcoming-table td[data-label="Creator"]:before { display: none; } .upcoming-table td[data-label="Creator"] { padding-left: 0 !important; } .creator-cell { gap: 0.75rem; } .table-avatar { width: 40px; height: 40px; } .slot-info { flex-direction: column; gap: 4px; } .slot-badge, .slot-count { font-size: 10px; padding: 3px 6px; } .notify-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; white-space: nowrap; width: 100%; justify-content: center; } } /* Extra small devices (max-width: 480px) */ @media (max-width: 480px) { .live-main { padding-top: 70px; } .live-header { padding: 1rem 0 0.75rem 0; } .live-title { font-size: 1.5rem; padding: 0 0.75rem; } .live-subtitle { font-size: 0.9rem; padding: 0 0.75rem; } .filters-sidebar { padding: 0.75rem !important; margin-bottom: 1rem; } .live-creator-card { padding: 1rem; } .creator-info { margin-top: 1rem; } .creator-avatar { width: 50px; height: 50px; } .live-stats { gap: 0.5rem; margin-bottom: 1rem; } .stat-item { font-size: 0.8rem; } .join-live-btn { padding: 0.6rem 1rem; font-size: 0.85rem; } .section-title { font-size: 1.5rem; } .section-subtitle { font-size: 0.85rem; } .upcoming-table-container { padding: 0 0.75rem; } .upcoming-table td { padding-left: 45% !important; font-size: 0.8rem; } .upcoming-table td:before { font-size: 0.75rem; width: 40%; } .table-avatar { width: 35px; height: 35px; } .notify-btn { padding: 0.5rem 0.75rem; font-size: 0.75rem; } } /* Small devices (481px - 576px) */ @media (min-width: 481px) and (max-width: 576px) { .live-creators-grid { grid-template-columns: 1fr; } .upcoming-table { min-width: 600px; } .upcoming-table thead th, .upcoming-table tbody td { padding: 0.75rem 0.5rem; font-size: 0.8rem; white-space: nowrap; } .upcoming-table thead th:first-child, .upcoming-table tbody td:first-child { padding-left: 1rem; } .upcoming-table thead th:last-child, .upcoming-table tbody td:last-child { padding-right: 1rem; } .creator-cell { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .table-avatar { width: 35px; height: 35px; } .table-username { font-size: 0.85rem; } .live-time { font-size: 0.8rem; } .slot-info { gap: 3px; } .slot-badge, .slot-count { font-size: 9px; padding: 2px 5px; display: block; width: fit-content; } .view-slots-btn { font-size: 10px; margin-top: 4px; } .notify-btn { padding: 0.4rem 0.8rem; font-size: 0.75rem; white-space: nowrap; } .notify-btn .notify-text { display: none; } .notify-btn i { margin: 0; } } /* Extra small devices (max-width: 375px) */ @media (max-width: 375px) { .live-title { font-size: 1.5rem; } .live-subtitle { font-size: 0.9rem; } .filters-sidebar { padding: 0.75rem; } .live-creator-card { padding: 0.75rem; } .section-title { font-size: 1.25rem; } .upcoming-table thead th, .upcoming-table tbody td { padding: 0.6rem 0.4rem; font-size: 0.75rem; } .filters-actions .btn, .apply-filters, .reset-filters { padding: 0.7rem 0.9rem !important; font-size: 0.85rem !important; min-height: 44px !important; } } /* ======================================== ABOUT PAGE STYLES ======================================== */ .about-main { background: var(--primary-dark); min-height: 100vh; } /* About Hero Section */ .about-hero { padding: 120px 0 80px 0; background: var(--primary-dark); position: relative; overflow: hidden; } .about-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%); z-index: 1; } .about-hero .container { position: relative; z-index: 2; } .about-hero-content { padding-right: 2rem; } .hero-badge { display: inline-block; margin-bottom: 1.5rem; } .badge-text { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); color: white; padding: 0.5rem 1.5rem; border-radius: 50px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .about-hero-title { font-size: 3.5rem; font-weight: 700; color: var(--text-light); line-height: 1.2; margin-bottom: 1.5rem; } .about-hero-subtitle { font-size: 1.2rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 2.5rem; max-width: 500px; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-btn { padding: 0.8rem 2rem; font-weight: 600; border-radius: 50px; transition: all 0.3s ease; border: none; } .hero-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4); } .hero-btn-outline { padding: 0.8rem 2rem; font-weight: 600; border-radius: 50px; border: 2px solid rgba(255, 255, 255, 0.2); color: var(--text-light); background: transparent; transition: all 0.3s ease; } .hero-btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-2px); background: rgba(33, 150, 243, 0.1); } /* Hero Image Section */ .about-hero-image { position: relative; display: flex; justify-content: center; align-items: center; } .hero-image-container { position: relative; max-width: 400px; margin: 0 auto; } .hero-main-image { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); } .floating-elements { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .floating-card { position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 15px; padding: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: float 3s ease-in-out infinite; } .floating-card-1 { top: 20%; left: -10%; animation-delay: 0s; } .floating-card-2 { bottom: 20%; right: -10%; animation-delay: 1.5s; } .floating-card .card-content { display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; } .floating-card .profile-pic { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); } .floating-card .stat-icon { font-size: 1.5rem; width: 40px; text-align: center; } .floating-card .card-text h6 { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--primary-dark); } .floating-card .card-text p { margin: 0; font-size: 0.8rem; color: var(--text-muted); } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* About Content Section */ .about-content-section { padding: 80px 0; background: var(--secondary-dark); } .about-content-image { position: relative; margin-bottom: 2rem; } .content-main-image { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .about-content-text { padding-left: 2rem; } .content-title { font-size: 2.5rem; font-weight: 700; color: var(--text-light); margin-bottom: 1.5rem; line-height: 1.3; } .content-description { color: var(--text-muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem; } /* Purpose Section */ .about-purpose-section { padding: 80px 0; background: var(--primary-dark); } .purpose-header { margin-bottom: 4rem; } .purpose-main-title { font-size: 3rem; font-weight: 700; color: var(--text-light); margin-bottom: 1rem; } .purpose-main-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; } .purpose-card { background: var(--secondary-dark); border-radius: 20px; padding: 2.5rem; height: 100%; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } .purpose-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); } .purpose-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); } .purpose-card-header { display: flex; align-items: center; margin-bottom: 1.5rem; gap: 1rem; } .purpose-icon { width: 60px; height: 60px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; flex-shrink: 0; } .mission-icon { background: linear-gradient(135deg, #ff6b6b, #ee5a24); } .vision-icon { background: linear-gradient(135deg, #4834d4, #686de0); } .purpose-card-title { font-size: 1.5rem; font-weight: 700; color: var(--text-light); margin: 0; } .purpose-card-content p { color: var(--text-muted); font-size: 1rem; line-height: 1.7; margin: 0; } /* ======================================== LOGIN & SIGNUP PAGES STYLES ======================================== */ .auth-body { background: var(--primary-dark); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; height: 100vh; /* overflow: hidden; */ } /* Main Auth Containers */ .login-main, .signup-main { height: 100vh; background: var(--primary-dark); } .signIn-bg-section{ padding: 0px 0px; clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%); } .signUP-bg-section{ padding: 0px 0px; clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%); } /* Background Image Section */ .auth-bg-section { position: relative; overflow: hidden; } .auth-bg-overlay { position: relative; height: 100%; background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(156, 39, 176, 0.3) 100%); } .auth-bg-image { width: 100%; height: 100vh; object-fit: cover; object-position: center; } /* Form Containers */ .login-form-container, .signup-form-container { width: 100%; max-width: 580px; padding: 2rem; } .login-form-wrapper, .signup-form-wrapper { background: var(--primary-dark); backdrop-filter: blur(10px); border-radius: 20px; padding: 3rem 2.5rem; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); } /* Headers */ .login-header, .signup-header { margin-bottom: 2rem; } .login-title, .signup-title { font-size: 1.8rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.5rem; line-height: 1.3; } .login-subtitle, .signup-subtitle { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0; } /* Form Elements */ .auth-input { padding: 0.9rem 1rem; border: 1px solid var(--border-color); border-radius: 50px; font-size: 0.9rem; background: var(--bg-secondary); color: var(--text-light); transition: all 0.3s ease; } .auth-input:focus { outline: none; border-color: var(--theme-accent); background: var(--primary-dark); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); } .auth-input::placeholder { color: var(--text-muted); opacity: 1; } .form-label { font-weight: 600; color: var(--text-light); margin-bottom: 0.5rem; font-size: 0.9rem; } /* Password Input */ .password-input-wrapper { position: relative; } .password-toggle-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.3s ease; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .password-toggle-btn:hover { color: var(--theme-accent); } /* Form Options */ .form-options { text-align: right; } .forgot-password-link { color: var(--theme-accent); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.3s ease; } .forgot-password-link:hover { color: var(--theme-accent-hover); text-decoration: underline; } /* Account Type Options */ .account-type-options { margin-top: 0.5rem; } .account-type-option { margin-bottom: 0.8rem; } .form-check-input { margin-top: 0.2rem; } .form-check-input:checked { background-color: var(--theme-accent); border-color: var(--theme-accent); } .form-check-input:focus { border-color: var(--theme-accent); box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.25); } .form-check-label { font-size: 0.9rem; color: var(--text-light); font-weight: 500; cursor: pointer; } /* Submit Button */ .auth-submit-btn { background: var(--theme-gradient); border: none; border-radius: 50px; padding: 0.9rem 2rem; font-weight: 600; font-size: 1rem; color: white; transition: all 0.3s ease; position: relative; overflow: hidden; } .auth-submit-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); background: var(--theme-gradient-hover); color: white; } .auth-submit-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3); } .auth-submit-btn.loading { pointer-events: none; opacity: 0.7; } .auth-submit-btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid transparent; border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } /* Auth Switch */ .auth-switch { margin-top: 1.5rem; } .auth-switch-text { color: var(--text-muted); font-size: 0.9rem; } .auth-switch-link { color: var(--theme-accent); text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .auth-switch-link:hover { color: var(--theme-accent-hover); text-decoration: underline; } /* Mobile Responsiveness */ @media (max-width: 768px) { .about-hero { padding: 100px 0 60px 0; text-align: center; } .about-hero-content { padding-right: 0; margin-bottom: 3rem; } .about-hero-title { font-size: 2.5rem; } .about-hero-subtitle { font-size: 1.1rem; margin: 0 auto 2rem auto; } .hero-buttons { justify-content: center; } .hero-btn, .hero-btn-outline { padding: 0.7rem 1.5rem; font-size: 0.9rem; } .floating-card { display: none; } .about-content-section { padding: 60px 0; text-align: center; } .about-content-text { padding-left: 0; margin-top: 2rem; } .content-title { font-size: 2rem; } .content-description { font-size: 1rem; } .about-purpose-section { padding: 60px 0; } .purpose-main-title { font-size: 2.2rem; } .purpose-main-subtitle { font-size: 1.1rem; } .purpose-card { padding: 2rem; margin-bottom: 1.5rem; } .purpose-card-header { flex-direction: column; text-align: center; gap: 1rem; } .purpose-icon { margin: 0 auto; } } @media (max-width: 576px) { .about-hero-title { font-size: 2rem; } .hero-buttons { flex-direction: column; align-items: center; } .hero-btn, .hero-btn-outline { width: 100%; max-width: 250px; } .content-title { font-size: 1.8rem; } .purpose-main-title { font-size: 1.8rem; } .purpose-card { padding: 1.5rem; } } /* Mobile Responsive Styles */ @media (max-width: 768px) { .auth-body { background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%), url('../images/hero-bg.jpg') center/cover; background-attachment: fixed; } .login-main, .signup-main { background: transparent !important; } .login-form-container, .signup-form-container { max-width: 100%; padding: 1rem; min-height: 100vh; display: flex; align-items: center; } .login-form-wrapper, .signup-form-wrapper { padding: 2rem 1.5rem; margin: 1rem 0; width: 100%; } .login-title, .signup-title { font-size: 1.6rem; } .login-subtitle, .signup-subtitle { font-size: 0.9rem; } .auth-input { padding: 1rem; font-size: 1rem; } .auth-submit-btn { padding: 1rem 2rem; } } @media (max-width: 576px) { .login-form-wrapper, .signup-form-wrapper { padding: 1.5rem 1rem; border-radius: 15px; margin: 0.5rem 0; } .login-title, .signup-title { font-size: 1.4rem; } .login-subtitle, .signup-subtitle { font-size: 0.85rem; } .auth-input { padding: 0.8rem; font-size: 0.9rem; } .form-label { font-size: 0.85rem; } .auth-submit-btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; } } /* Form Validation Styles */ .auth-input:invalid:not(:focus):not(:placeholder-shown) { border-color: #dc3545; background: rgba(220, 53, 69, 0.1); } .auth-input:valid:not(:focus):not(:placeholder-shown) { border-color: #28a745; background: rgba(40, 167, 69, 0.1); } /* Loading Animation */ @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Smooth transitions */ * { transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; } /* ===== FEED PAGE STYLES ===== */ /* Feed Body Styles */ body.feed-page { background: #000; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; overflow-x: hidden; } /* Feed Layout Container */ .feed-container { display: flex; min-height: 100vh; background: #000; } /* Feed Sidebar */ .feed-sidebar { width: 280px; background: #0E1012; border-right: 1px solid #333; position: fixed; top: 100px; left: 30px; /* height: 100vh; */ z-index: 1000; overflow-y: auto; border-radius: 10px; } .feed-sidebar .sidebar-content { padding: 2rem 1.5rem; } .feed-sidebar .sidebar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid #333; } .feed-sidebar .sidebar-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .feed-sidebar .sidebar-user-info h6 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .feed-sidebar .sidebar-user-info p { margin: 0; font-size: 0.9rem; color: #888; } .feed-sidebar .sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; } .feed-sidebar .nav-item { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; color: #ccc; text-decoration: none; border-radius: 12px; font-size: 0.95rem; transition: all 0.3s ease; } .feed-sidebar .nav-item:hover { background: #222; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .feed-sidebar .nav-item.active { background: #e91e63; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .feed-sidebar .nav-item i { width: 20px; text-align: center; font-size: 1.1rem; } .feed-sidebar .nav-item .ms-auto { margin-left: auto; font-size: 0.8rem; } /* Main Content Area */ .feed-main { margin-left: 380px; background: #000; min-height: 100vh; width: calc(100% - 380px); } /* Tablet responsive for feed-main */ @media (max-width: 1024px) and (min-width: 769px) { .feed-main { margin-left: 0; width: 100%; } .feed-main .container-fluid { padding: 1.5rem; max-width: 85%; } } /* Mobile responsive for feed-main */ @media (max-width: 768px) { .feed-main { margin-left: 0; width: 100%; } .feed-main .container-fluid { padding: 1rem; max-width: 100%; } } .feed-main .container-fluid { padding: 2rem 3rem; max-width: 70%; margin: 0 auto; } /* Top Navigation (Mobile) */ .feed-navbar { background: #111 !important; border-bottom: 1px solid #333; padding: 1rem 1.5rem; } .feed-navbar .brand-text { font-weight: 700; font-size: 1.3rem; color: #e91e63; } .feed-navbar .search-container { flex: 1; max-width: 400px; margin: 0 2rem; } .feed-navbar .search-input-wrapper { position: relative; } .feed-navbar .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); z-index: 2; } .feed-navbar .search-input { background: #222; border: 1px solid #444; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); padding: 0.75rem 1rem 0.75rem 2.5rem; border-radius: 25px; width: 100%; } .feed-navbar .search-input:focus { background: #333; border-color: #e91e63; box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25); } .feed-navbar .user-profile-nav { display: flex; align-items: center; gap: 1rem; } .feed-navbar .user-profile-btn { background: none; border: none; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; } .feed-navbar .user-avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; } .feed-navbar .user-name { font-weight: 600; font-size: 0.95rem; } .feed-navbar .user-handle { color: #888; font-size: 0.8rem; margin-top: -2px; } .feed-navbar .notification-btn, .feed-navbar .message-btn { background: none; border: none; color: #ccc; font-size: 1.1rem; position: relative; padding: 0.5rem; } .feed-navbar .notification-btn:hover, .feed-navbar .message-btn:hover { color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .feed-navbar .notification-badge { position: absolute; top: 0; right: 0; background: #e91e63; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; } /* Post Composer */ .post-composer { background: #111; border-radius: 15px; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid #333; } .post-composer .composer-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .post-composer .composer-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; } .post-composer .composer-input { background: #222; border: 1px solid #444; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); padding: 0.875rem 1rem; border-radius: 25px; font-size: 0.95rem; flex: 1; } .post-composer .composer-input:focus { background: #333; border-color: #e91e63; box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.25); } .post-composer .composer-tools { display: flex; justify-content: space-between; align-items: center; } .post-composer .composer-actions { display: flex; gap: 0.5rem; } .post-composer .composer-btn { background: none; border: none; color: #888; font-size: 1.1rem; padding: 0.5rem; border-radius: 8px; transition: all 0.3s ease; } .post-composer .composer-btn:hover { background: #222; color: #e91e63; } .post-composer .add-post-btn { background: #e91e63; border: none; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); padding: 0.75rem 1.5rem; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; } .post-composer .add-post-btn:hover { background: #d81b60; transform: translateY(-1px); } /* Stories Section */ .stories-section { margin-bottom: 2rem; } .stories-container { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: none; -ms-overflow-style: none; } .stories-container::-webkit-scrollbar { display: none; } .story-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 80px; text-align: center; } .story-circle { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(45deg, #e91e63, #ff6b35); padding: 3px; display: flex; align-items: center; justify-content: center; position: relative; } .story-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #000; } .add-story .story-circle { background: #333; border: 2px dashed #666; } .add-story-content { color: #888; font-size: 1.5rem; } .story-label { font-size: 0.8rem; color: #ccc; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Feed Posts */ .feed-posts { display: flex; flex-direction: column; gap: 2rem; } .feed-post { background: #0E1012; border-radius: 15px; border: 1px solid #333; overflow: hidden; } .post-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 1.5rem 1rem; } .post-author { display: flex; align-items: center; gap: 1rem; } .author-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; } .author-info h6 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .post-time { font-size: 0.85rem; color: #888; } .post-menu { background: none; border: none; color: #888; font-size: 1.2rem; padding: 0.5rem; } .post-menu:hover { color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .post-content { padding: 0 1.5rem 1rem; } .post-text { color: #ccc; line-height: 1.6; margin-bottom: 1rem; font-size: 0.95rem; } /* Post Media */ .post-media { margin-bottom: 1rem; } .media-grid { display: flex; gap: 0.5rem; border-radius: 12px; overflow: hidden; } .media-item { position: relative; flex: 1; } .media-item.main-image { flex: 2; } .media-item img { width: 100%; height: 300px; object-fit: cover; display: block; } .more-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); font-weight: 600; } .more-overlay span:first-child { font-size: 1.8rem; margin-bottom: 0.25rem; } .single-image img { width: 100%; height: auto; max-height: 500px; object-fit: cover; border-radius: 12px; } /* Video Container */ .video-container { position: relative; border-radius: 12px; overflow: hidden; } .video-thumbnail { width: 100%; height: 300px; object-fit: cover; } .video-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .play-button { background: rgba(233, 30, 99, 0.9); border: none; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); padding: 1rem 1.5rem; border-radius: 25px; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } .play-button:hover { background: #e91e63; transform: scale(1.05); } .video-progress { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); padding: 0.5rem; } .progress-bar { background: #e91e63; height: 4px; border-radius: 2px; position: relative; } .progress-time { position: absolute; right: 0; top: -1.5rem; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); font-size: 0.8rem; } /* Popular Models Section */ .popular-models-section { background: #0E1012; border-radius: 15px; padding: 1.5rem; margin: 2rem 0; border: 1px solid #333; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .section-header h5 { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .view-all-link { color: #e91e63; text-decoration: none; font-size: 0.9rem; font-weight: 500; } .view-all-link:hover { color: #d81b60; } .models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 1.5rem; } .model-item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .model-item img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #333; transition: all 0.3s ease; } .model-item:hover img { border-color: #e91e63; transform: scale(1.1); } .model-name { font-size: 0.85rem; color: #ccc; font-weight: 500; } /* Mobile Sidebar */ .mobile-sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .mobile-sidebar-overlay.active { opacity: 1; visibility: visible; } .mobile-sidebar { position: fixed; top: 0; left: -100%; width: 280px; height: 100vh; background: #0E1012; z-index: 2001; transition: left 0.3s ease; overflow-y: auto; } .mobile-sidebar.active { left: 0; } .mobile-sidebar-content { padding: 2rem 1.5rem; } .mobile-sidebar-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #333; } .mobile-sidebar-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .mobile-sidebar-user-info { flex: 1; } .mobile-sidebar-user-info h6 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .mobile-sidebar-user-info p { margin: 0; font-size: 0.9rem; color: #888; } .mobile-sidebar-close { background: none; border: none; color: #888; font-size: 1.2rem; padding: 0.5rem; } .mobile-sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; } .mobile-sidebar-nav .nav-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; color: #ccc; text-decoration: none; border-radius: 12px; font-size: 0.95rem; transition: all 0.3s ease; } .mobile-sidebar-nav .nav-item:hover { background: #222; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .mobile-sidebar-nav .nav-item.active { background: #e91e63; color: var(--text-primary, #ffffff); transition: color var(--transition-normal, 0.3s ease); } .mobile-sidebar-nav .nav-item i { width: 20px; text-align: center; font-size: 1.1rem; } /* ======================================== HELP & SUPPORT PAGE STYLES ======================================== */ /* Help Header */ /* .help-header { background: var(--secondary-dark); padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } */ .help-header .header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .help-header .search-section { flex: 1; max-width: 400px; margin: 0 2rem; } .help-header .search-wrapper { position: relative; } .help-header .search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; background: var(--primary-dark); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 25px; color: var(--text-light); font-size: 0.9rem; } .help-header .search-input::placeholder { color: var(--text-muted); } .help-header .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; } .help-header .header-actions { display: flex; gap: 0.5rem; } .help-header .header-action-btn { width: 40px; height: 40px; background: var(--primary-dark); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: var(--text-light); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .help-header .header-action-btn:hover { background: rgba(255, 255, 255, 0.1); } .help-header .page-title-section { /* max-width: 1200px; */ margin: 0 auto; padding: 1.5rem 1rem 0.5rem; } .help-header .page-title { font-size: 1.8rem; font-weight: 600; color: var(--text-light); margin: 0; } /* Help Container */ .help-container { /* max-width: 1200px; */ margin: 0 auto; padding: 2rem 1rem; } .help-section { margin-bottom: 3rem; } .help-section .section-title { font-size: 1.4rem; font-weight: 600; color: var(--text-light); margin-bottom: 1.5rem; } /* FAQ Styles */ .help-section .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(575px, 1fr)); gap: 1rem; } .help-section .faq-item { background: var(--secondary-dark); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); } .help-section .faq-question { width: 100%; padding: 1.25rem; background: transparent; border: none; color: var(--text-light); font-size: 1rem; font-weight: 500; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .help-section .faq-question:hover { background: rgba(255, 255, 255, 0.05); } .help-section .faq-icon { color: var(--text-muted); transition: transform 0.3s ease; } .help-section .faq-item.active .faq-icon { transform: rotate(180deg); } .help-section .faq-answer { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: all 0.3s ease; } .help-section .faq-item.active .faq-answer { padding: 0 1.25rem 1.25rem; max-height: 200px; } .help-section .faq-answer p { color: var(--text-muted); line-height: 1.6; margin: 0; } /* Report Form Styles */ .help-section .report-form { background: var(--secondary-dark); padding: 2rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .help-section .report-form .form-group { margin-bottom: 1.5rem; } .help-section .report-form .form-label { display: block; color: var(--text-light); font-weight: 500; margin-bottom: 0.5rem; font-size: 0.95rem; } .help-section .report-form .form-control { width: 100%; padding: 0.75rem; background: var(--primary-dark); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: var(--text-light); font-size: 0.9rem; transition: border-color 0.3s ease; } .help-section .report-form .form-control:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25); } .help-section .report-form .form-control::placeholder { color: var(--text-muted); } .help-section .report-form textarea.form-control { resize: vertical; min-height: 100px; } /* Upload Wrapper */ .help-section .upload-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: var(--primary-dark); border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .help-section .upload-wrapper:hover { border-color: var(--accent-blue); background: rgba(33, 150, 243, 0.05); } .help-section .upload-icon { font-size: 2rem; color: var(--text-muted); margin-bottom: 0.5rem; } .help-section .upload-text { color: var(--text-muted); font-size: 0.9rem; } .help-section .file-input { display: none; } .help-section .uploaded-files, .mainSection.support .uploaded-files, #uploadedFiles { margin-top: 1rem; display: block !important; width: 100%; min-height: 50px; visibility: visible !important; opacity: 1 !important; } /* Image Preview Container */ .image-preview-container { position: relative !important; display: inline-block !important; margin-top: 1rem !important; margin-bottom: 1rem !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; background: var(--bg-secondary, #2a2a2a) !important; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important; visibility: visible !important; opacity: 1 !important; z-index: 1 !important; } .image-preview { display: block !important; max-width: 300px !important; max-height: 300px !important; width: auto !important; height: auto !important; object-fit: contain !important; border-radius: 8px !important; visibility: visible !important; opacity: 1 !important; } /* Remove Image Button */ .remove-image-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.7); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.3); font-size: 20px; font-weight: bold; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; z-index: 10; padding: 0; margin: 0; } .remove-image-btn:hover { background: rgba(220, 53, 69, 0.9); border-color: rgba(255, 255, 255, 0.5); transform: scale(1.1); } .remove-image-btn:active { transform: scale(0.95); } /* Light mode styles for image preview */ [data-theme="light"] .image-preview-container { background: #f8f9fa; border: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="light"] .remove-image-btn { background: rgba(255, 255, 255, 0.9); color: #212529; border: 2px solid rgba(0, 0, 0, 0.2); } [data-theme="light"] .remove-image-btn:hover { background: rgba(220, 53, 69, 0.9); color: #ffffff; border-color: rgba(255, 255, 255, 0.5); } /* Responsive styles for image preview */ @media (max-width: 768px) { .image-preview { max-width: 200px !important; max-height: 200px !important; } .remove-image-btn { width: 24px; height: 24px; font-size: 18px; top: 6px; right: 6px; } .help-section .uploaded-files, .mainSection.support .uploaded-files { gap: 0.75rem; } } @media (max-width: 480px) { .image-preview { max-width: 150px !important; max-height: 150px !important; } } /* Submit Button */ .help-section .form-actions { text-align: center; margin-top: 2rem; } .help-section .btn-submit { background: var(--gradient-primary); border: none; padding: 0.875rem 3rem; border-radius: 25px; color: var(--text-light); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-width: 150px; } .help-section .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3); } /* UPDATED LANDING PAGE */ .creators-section{ display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; padding: 80px 20px; position: relative; } .creators-section .left , .creators-section .right{ display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; max-width: 100%; box-sizing: border-box; position: relative; } .creators-section .left img, .creators-section .right img{ aspect-ratio: 2/3 !important; border-radius: 12px !important; object-fit: cover !important; box-sizing: border-box !important; display: block !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; position: relative !important; transition: transform 0.3s ease !important; } /* Left side images - progressive sizing from small (left) to large (right) */ /* With flex-end, first child is rightmost (closest to center), last child is leftmost (farthest) */ .creators-section .left img:nth-child(1) { width: 202px !important; height: 303px !important; margin-left: 0 !important; z-index: 4 !important; } .creators-section .left img:nth-child(2) { width: 170px !important; height: 255px !important; margin-left: -5px !important; z-index: 3 !important; } .creators-section .left img:nth-child(3) { width: 148px !important; height: 222px !important; margin-left: -5px !important; z-index: 2 !important; } .creators-section .left img:nth-child(4) { width: 116px !important; height: 174px !important; margin-left: -5px !important; z-index: 1 !important; } /* Right side images - progressive sizing from small (left) to large (right) */ .creators-section .right img:nth-child(1) { width: 116px !important; height: 174px !important; margin-left: 0 !important; z-index: 1 !important; } .creators-section .right img:nth-child(2) { width: 148px !important; height: 222px !important; margin-left: -5px !important; z-index: 2 !important; } .creators-section .right img:nth-child(3) { width: 170px !important; height: 255px !important; margin-left: -5px !important; z-index: 3 !important; } .creators-section .right img:nth-child(4) { width: 202px !important; height: 303px !important; margin-left: -5px !important; z-index: 4 !important; } .creators-section .section-title{ text-align: center; font-weight: 400; font-size: 48px; line-height: 1.2; color: #ffffff; margin: 0 0 16px 0; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%; box-sizing: border-box; } .creators-section .section-subtitle{ max-width: 400px; text-align: center; margin: 0 auto; color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; box-sizing: border-box; } .creators-section .middle { box-sizing: border-box; max-width: 100%; overflow: hidden; flex-shrink: 0; min-width: 300px; padding: 0 20px; } /* Responsive styles for creators-section */ @media screen and (max-width: 1024px) { .creators-section { gap: 20px; padding: 60px 15px; } .creators-section .section-title { font-size: 36px; } /* Maintain progressive sizing on tablets */ .creators-section .left img:nth-child(1), .creators-section .right img:nth-child(1) { width: 100px; height: 150px; margin-left: 0; } .creators-section .left img:nth-child(2), .creators-section .right img:nth-child(2) { width: 125px; height: 188px; margin-left: -5px; } .creators-section .left img:nth-child(3), .creators-section .right img:nth-child(3) { width: 145px; height: 218px; margin-left: -5px; } .creators-section .left img:nth-child(4), .creators-section .right img:nth-child(4) { width: 170px; height: 255px; margin-left: -5px; } } @media screen and (max-width: 768px) { .creators-section { flex-direction: column; gap: 30px; padding: 40px 15px; } .creators-section .left, .creators-section .right { flex-direction: row; justify-content: center; padding: 0; align-items: center; } /* Maintain progressive sizing on mobile */ .creators-section .left img:nth-child(1), .creators-section .right img:nth-child(1) { width: 80px; height: 120px; margin-left: 0; margin-right: 0; } .creators-section .left img:nth-child(2), .creators-section .right img:nth-child(2) { width: 100px; height: 150px; margin-left: -5px; margin-right: 0; } .creators-section .left img:nth-child(3), .creators-section .right img:nth-child(3) { width: 120px; height: 180px; margin-left: -5px; margin-right: 0; } .creators-section .left img:nth-child(4), .creators-section .right img:nth-child(4) { width: 140px; height: 210px; margin-left: -5px; margin-right: 0; } .creators-section .section-title { font-size: 32px; } .creators-section .middle { min-width: auto; order: -1; } } .feature-toggle{ width: max-content; background: #A61651; padding: 8px; gap: 31px; border-radius: 50px; margin-left: auto; margin-right: auto; } .member-features-section .section-title{ font-size: 3rem; margin-bottom: 36px; } .feature-toggle button{ border: 0; margin: 0; font-weight: 500; color: white; font-size: 20px; } .feature-toggle button.active{ background: white; padding: 10px 52px; color: #15191C; border-radius: 50px; } .member-features-section .container{ padding: 0; } .feature-list{ display: flex; flex-direction: column; gap: 26px; margin-bottom: 0; } .feature-list li{ padding: 0; } .member-features-section .col-lg-12{ max-width: 780px; padding: 0; } .member-features-section .tabContainer{ display: flex; border-radius: 12px; padding: 10px 36px; justify-content: space-between; align-items: center; background: white; } .feature-list li{ color: black; font-size: 1rem; display: flex; gap: 24px; align-items: center; } .faq-section .section-title{ font-size: 3rem; text-align: left !important; margin-bottom: 40px; } .faq-section .accordion-item{ background: #0E1012; } .faq-section .accordion-item .accordion-button{ font-size: 18px; color: white; font-weight: 600; } .faq-section .accordion-item .accordion-body, .faq-section .accordion-item .accordion-button{ background: transparent !important; padding-left: 77px; } .faq-section .accordion-item .accordion-button::after{ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M0.500001 2.01875L1.83125 0.6875L8 6.85625L14.1688 0.6875L15.5 2.01875L8 9.51875L0.500001 2.01875Z' fill='%2315191C'/%3E%3C/svg%3E"); position: absolute; left: 23px; color: #15191C; background: #5D5D5D; border-radius: 100%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; filter: none; } .faq-section .accordion-item .accordion-body{ padding-top: 0; font-size: 1rem; color: white; } .faq-section .container{ padding: 0; } .gallery-section .section-title{ margin-bottom: 13px !important; } .gallery-section .testimonials-title{ margin-bottom: 70px; } .featuresSection{ padding: 60px 0; display: flex; flex-direction: column; align-items: center; } .featuresSection .section-title{ display: flex; flex-direction: column; align-items: center; } .gallery-section .container .section-title{ display: flex; flex-direction: column; align-items: center; } .gallery-section .container .section-title::before{ margin-bottom: 17px; content: ""; width: 117px; height: 6px; background: linear-gradient(270deg, #A61651 0%, #01ADF1 100%); background-image: linear-gradient(270deg, #A61651 0%, #01ADF1 100%); border-radius: 3px; } .featuresSection .section-title::before{ margin-bottom: 17px; content: ""; width: 117px; height: 6px; border-radius: 3px; } .featuresSection .featuresContainer{ max-width: 1124px; margin-top: 60px; display: flex; width: 95%; flex-wrap: wrap; justify-content: space-between; row-gap: 30px; } .featuresSection .featuresContainer .feature{ width: 31.7%; border-radius: 22px; padding: 20px; transition: all .3s ease; min-height: 390px; background: #0E1012; border: 1px solid #5D5D5D } .featuresSection .featuresContainer .feature .icon{ width: 153px; height: 131px; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 15.7px 0px #5D5D5D40; border-radius: 22px 0 22px 0; border: 1px solid transparent; margin-bottom: 45px; transition: all .3s ease; } .featuresSection .featuresContainer .feature:hover .icon{ border:1px solid #5D5D5D !important; box-shadow: 2px 2px 15.7px 0px #5D5D5D40; } .featuresSection .featuresContainer .feature:hover{ background: var(--primary-dark); } .featuresSection .featuresContainer .feature h2{ font-size: 22px; color: white; margin-left: 30px; font-weight: 600; margin-bottom: 25px; } .featuresSection .featuresContainer .feature p{ font-size: 16px; margin-left: 30px; } .cta-section .container{ background: var(--primary-dark); border-radius: 22px; max-width: 1008px; padding: 40px; } .cta-section .row{ align-items: center; text-align: left !important; justify-content: space-between !important; } .cta-section .row > div{ padding: 0; } .cta-section .row .cta-title{ font-weight: 600; margin-bottom: 20px; } .cta-section .row .cta-title span{ color: #A61651; } .cta-section .row .cta-description{ max-width: 523px; color: white; font-size: 16px; } .cta-section .row a{ width: max-content; } .gallery-section { background: var(--primary-dark); } .gallery-section .container{ padding: 0; } .gallery-section .galleryContainer .gallery{ padding: 16px 16px 25px; background: #0E1012; margin-right: 20px; border-radius: 22px; width: max-content; } .gallery-section .galleryContainer .gallery a{ width: 100%; font-size: 20px; } .gallery-section .galleryContainer .gallery .top { display: flex; gap: 20px; padding-bottom: 20px; justify-content: flex-start; align-items: center; } .gallery-section .galleryContainer .gallery .top img{ width: 89px; height: 95px; object-fit: cover; border-radius: 16px; } .gallery-section .galleryContainer .gallery .top h2{ font-size: 20px; color: #F8F8F8; display: flex; flex-direction: column; } .gallery-section .galleryContainer .gallery .top h2 span{ font-size: 16px; color: var(--text-muted); } .gallery-section .galleryContainer .gallery .top button{ padding: 15px 30px; font-size: 20px; margin-left: auto; color: white; box-shadow: 0px 6px 10.1px 0px #22222240; line-height: 1; background: transparent; border-radius: 22px; border: 1px solid #F8F8F8; } .gallery-section .galleryContainer .gallery .imgs{ display: flex; margin-top: 10px; gap: 10px; } .gallery-section .galleryContainer .gallery .imgs > img{ width: 216px; height: 264px; } .gallery-section .galleryContainer .gallery .imgs img{ border-radius: 22px; object-fit: cover; } .gallery-section .galleryContainer .gallery .imgs div{ display: flex; flex-direction: column; gap: 10px; } .gallery-section .galleryContainer .gallery .imgs div img{ width: 172px; height: 127px; } /* Gallery Section Image Placeholders - Desktop - Override general circular rules */ .gallery-section .galleryContainer .gallery img[src*="default"], .gallery-section .galleryContainer .gallery img[src*="placeholder"], .gallery-section .galleryContainer .gallery img[src*="profilePic"], .gallery-section .galleryContainer .gallery img.default-image, .gallery-section .galleryContainer .gallery img.lazy-image[data-placeholder], .gallery-section .galleryContainer .gallery img[data-src*="default"], .gallery-section .galleryContainer .gallery img[onerror], .gallery-section .galleryContainer .gallery img[data-lazy="image"] { background-color: rgba(255, 255, 255, 0.05) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05)), linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05)) !important; background-size: 20px 20px !important; background-position: 0 0, 10px 10px !important; object-fit: cover !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } /* Profile image in top section - rounded corners (not circular) */ .gallery-section .galleryContainer .gallery .top img[src*="default"], .gallery-section .galleryContainer .gallery .top img[src*="placeholder"], .gallery-section .galleryContainer .gallery .top img[src*="profilePic"], .gallery-section .galleryContainer .gallery .top img.default-image, .gallery-section .galleryContainer .gallery .top img.lazy-image, .gallery-section .galleryContainer .gallery .top img[data-src] { border-radius: 16px !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; width: 89px !important; height: 95px !important; } /* Gallery images in imgs section - rounded corners (not circular) */ .gallery-section .galleryContainer .gallery .imgs img[src*="default"], .gallery-section .galleryContainer .gallery .imgs img[src*="placeholder"], .gallery-section .galleryContainer .gallery .imgs img[src*="profilePic"], .gallery-section .galleryContainer .gallery .imgs img.default-image, .gallery-section .galleryContainer .gallery .imgs img.lazy-image[data-placeholder], .gallery-section .galleryContainer .gallery .imgs img[data-src] { border-radius: 22px !important; aspect-ratio: auto !important; object-fit: cover !important; } /* Main gallery image (first image in imgs) */ .gallery-section .galleryContainer .gallery .imgs > img[src*="default"], .gallery-section .galleryContainer .gallery .imgs > img[src*="placeholder"], .gallery-section .galleryContainer .gallery .imgs > img.default-image, .gallery-section .galleryContainer .gallery .imgs > img.lazy-image { width: 216px !important; height: 264px !important; } /* Side gallery images (in div) */ .gallery-section .galleryContainer .gallery .imgs div img[src*="default"], .gallery-section .galleryContainer .gallery .imgs div img[src*="placeholder"], .gallery-section .galleryContainer .gallery .imgs div img.default-image, .gallery-section .galleryContainer .gallery .imgs div img.lazy-image { width: 172px !important; height: 127px !important; } /* Loading state for lazy images */ .gallery-section .galleryContainer .gallery img.lazy-image:not([src*="default"]):not([src*="placeholder"]) { opacity: 0.7 !important; } .gallery-section .galleryContainer .gallery img.lazy-image[data-src]:not([src*="default"]):not([src*="placeholder"]) { opacity: 1 !important; background: none !important; } /* Responsive Design */ @media (max-width: 768px) { .help-header .header-content { flex-direction: column; gap: 1rem; } .help-header .search-section { order: 2; max-width: 100%; } .help-header .header-actions { order: 1; align-self: flex-end; } .help-section .faq-grid { grid-template-columns: 1fr; } .help-container { padding: 1rem; } .help-section .report-form { padding: 1.5rem; } .help-header .page-title { font-size: 1.5rem; } } @media screen and (max-width : 800px) { .featuresSection .featuresContainer .feature{ width: 49%; } } @media screen and (max-width : 600px) { .member-features-section .tabContainer{ padding: 0; } } @media screen and (max-width : 500px) { .testimonials-section .section-title::before, .gallery-section .container .section-title::before, .featuresSection .section-title::before{ width: 56px; height: 2px; margin-bottom: 10px; } .creators-section .middle{ min-width: 105px; } .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4){ width: 55px !important; height: 55px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3){ width: 67px !important; height: 67px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2){ width: 77px !important; height: 77px !important; } .creators-section .right img:nth-child(4), .creators-section .left img:nth-child(1){ display: none !important; } .creators-section{ padding: 33px 0 67px; } .creators-section .section-title{ font-size: 20px; margin-bottom: 10px; } .creators-section .section-subtitle{ font-size: 10px; padding: 0 7px; } /* Mobile Responsive Styles for Creators Section */ @media (max-width: 768px) { .creators-section { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 40px 20px !important; gap: 30px !important; } .creators-section .left, .creators-section .right { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .creators-section .left img, .creators-section .right img { margin-left: 0 !important; margin-right: 0 !important; position: relative !important; z-index: auto !important; } .creators-section .middle { min-width: auto !important; width: 100% !important; max-width: 100% !important; padding: 20px 15px !important; order: 2 !important; margin: 20px 0 !important; } .creators-section .left { order: 1 !important; } .creators-section .right { order: 3 !important; } .creators-section .section-title { font-size: 24px !important; margin-bottom: 12px !important; line-height: 1.2 !important; } .creators-section .section-subtitle { font-size: 14px !important; max-width: 100% !important; padding: 0 !important; line-height: 1.5 !important; } /* Adjust image sizes for mobile */ .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4) { width: 50px !important; height: 50px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3) { width: 60px !important; height: 60px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2) { width: 70px !important; height: 70px !important; } } @media (max-width: 480px) { .creators-section { padding: 30px 15px !important; gap: 25px !important; } .creators-section .middle { padding: 15px 10px !important; margin: 15px 0 !important; } .creators-section .section-title { font-size: 20px !important; margin-bottom: 10px !important; } .creators-section .section-subtitle { font-size: 12px !important; } /* Smaller images on very small screens */ .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4) { width: 45px !important; height: 45px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3) { width: 55px !important; height: 55px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2) { width: 65px !important; height: 65px !important; } } /* Creators Section - Responsive from 200px width */ @media (min-width: 200px) and (max-width: 320px) { .creators-section { padding: 20px 10px !important; gap: 15px !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .creators-section .left, .creators-section .right { justify-content: center !important; flex-wrap: wrap !important; gap: 5px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .creators-section .left img, .creators-section .right img { margin-left: 0 !important; margin-right: 0 !important; position: relative !important; z-index: auto !important; max-width: 100% !important; height: auto !important; } .creators-section .middle { min-width: auto !important; width: 100% !important; max-width: 100% !important; padding: 15px 8px !important; order: 2 !important; margin: 15px 0 !important; box-sizing: border-box !important; } .creators-section .left { order: 1 !important; } .creators-section .right { order: 3 !important; } .creators-section .section-title { font-size: 16px !important; margin-bottom: 8px !important; line-height: 1.2 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .creators-section .section-subtitle { font-size: 10px !important; max-width: 100% !important; padding: 0 5px !important; line-height: 1.4 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Very small images for 200-320px screens */ .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4) { width: 35px !important; height: 35px !important; min-width: 35px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3) { width: 42px !important; height: 42px !important; min-width: 42px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2) { width: 50px !important; height: 50px !important; min-width: 50px !important; } /* Hide 4th image on very small screens */ .creators-section .right img:nth-child(4), .creators-section .left img:nth-child(1) { display: none !important; } } @media (min-width: 321px) and (max-width: 375px) { .creators-section { padding: 25px 12px !important; gap: 20px !important; } .creators-section .middle { padding: 15px 10px !important; } .creators-section .section-title { font-size: 18px !important; margin-bottom: 10px !important; } .creators-section .section-subtitle { font-size: 11px !important; } /* Small images for 321-375px screens */ .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4) { width: 40px !important; height: 40px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3) { width: 48px !important; height: 48px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2) { width: 58px !important; height: 58px !important; } } @media (min-width: 376px) and (max-width: 480px) { .creators-section .section-title { font-size: 19px !important; } .creators-section .section-subtitle { font-size: 11.5px !important; } /* Medium-small images for 376-480px screens */ .creators-section .right img:nth-child(1), .creators-section .left img:nth-child(4) { width: 42px !important; height: 42px !important; } .creators-section .right img:nth-child(2), .creators-section .left img:nth-child(3) { width: 52px !important; height: 52px !important; } .creators-section .right img:nth-child(3), .creators-section .left img:nth-child(2) { width: 62px !important; height: 62px !important; } } /* Tablet and larger screens - ensure proper display */ @media (min-width: 481px) and (max-width: 768px) { .creators-section { padding: 35px 18px !important; gap: 28px !important; } .creators-section .middle { padding: 18px 12px !important; } .creators-section .section-title { font-size: 22px !important; } .creators-section .section-subtitle { font-size: 13px !important; } } /* Small desktop and tablet landscape */ @media (min-width: 769px) and (max-width: 1024px) { .creators-section { padding: 60px 30px !important; } .creators-section .middle { min-width: 180px !important; } .creators-section .section-title { font-size: 26px !important; } .creators-section .section-subtitle { font-size: 14px !important; max-width: 140px !important; } } /* Ensure images don't overflow on any screen size */ .creators-section .left img, .creators-section .right img { max-width: 100% !important; height: auto !important; object-fit: cover !important; } /* Prevent text overflow */ .creators-section .section-title, .creators-section .section-subtitle { word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } .testimonials-section .section-title::before{ margin-left: auto; margin-right: auto; } .featuresSection .featuresContainer .feature{ width: 100%; max-width: 295px; } /* Mobile Footer Styles - Enhanced for consistency - Everything Centered */ @media (max-width: 500px) { .footer { padding: 2rem 0 1rem !important; } .footer .container { padding: 0 15px !important; } .footer .row { margin: 0 !important; text-align: center !important; } .footer .col-lg-3, .footer .col-md-6 { margin-bottom: 2rem !important; padding: 0 10px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; } .footer .col-lg-3:last-child, .footer .col-md-6:last-child { margin-bottom: 1.5rem !important; } .footer-brand { text-align: center !important; width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } .footer-brand a { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; } .footer-brand img{ width: auto !important; height: auto !important; max-width: 80px !important; max-height: 35px !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } footer .mb-4:not(:first-child){ max-width: 100% !important; text-align: center !important; } .footer-title{ font-size: 0.9375rem !important; text-align: center !important; width: 100% !important; } .footer-links { text-align: center !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-links li { justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; } .footer-links a{ font-size: 0.8125rem !important; color: var(--text-muted) !important; text-align: center !important; } /* Force center social links on mobile - override theme.css */ .footer .col-lg-3 .social-links, .footer .col-md-6 .social-links, .footer .social-links, .social-links { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; flex-wrap: wrap !important; gap: 0.75rem !important; text-align: center !important; } [data-theme="light"] .footer .col-lg-3 .social-links, [data-theme="light"] .footer .col-md-6 .social-links, [data-theme="light"] .footer .social-links, [data-theme="dark"] .footer .col-lg-3 .social-links, [data-theme="dark"] .footer .col-md-6 .social-links, [data-theme="dark"] .footer .social-links { justify-content: center !important; } .footer .social-links a, .social-links a { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; text-decoration: none !important; border: none !important; border-bottom: none !important; } .footer .social-links a::after, .footer .social-links a::before, .social-links a::after, .social-links a::before { display: none !important; content: none !important; border: none !important; border-bottom: none !important; } .footer .social-link, .social-link { margin: 0 !important; } .copyright { text-align: center !important; width: 100% !important; } } .hero-subtitle{ font-size: 9px; margin-bottom: 29px; } .hero-section .btn-gradient{ margin-top: 0 !important; font-size: 12px; padding: 10px 43px; width: max-content; } .hero-section{ padding: 241px 0; } .featuresSection .featuresContainer .feature .icon{ width: 126px; height: 100px; border-top-left-radius: 22px; border-bottom-right-radius: 50px; } .featuresSection .featuresContainer .feature .icon img{ width: 50px; } .featuresSection .featuresContainer{ justify-content: center; } .featuresSection .featuresContainer .feature h2{ font-size: 20px; margin-left: 32px !important; margin-left: 16px; } .featuresSection .featuresContainer .feature p{ max-width: 217px; font-size: 12px; margin-left: 32px; } .featuresSection .featuresContainer .feature{ height: 311px; min-height: 311px; } .featuresSection .featuresContainer{ row-gap: 40px; } .tab-item{ font-size: 12px; padding: 5px; } .feature-tabs{ flex-direction: row; gap: 21px; } .feature-toggle button.active, .feature-toggle button{ font-size: 10px; padding: 4px 25px ; } .member-features-section{ overflow: hidden; } .member-features-section .tabContainer{ padding: 24px 17px; max-width: 385px; margin: auto; position: relative; } .member-features-section .tabContainer > img{ width: 129px; position: absolute; bottom: -62px; right: -9px; } .faq-section .accordion-item .accordion-button{ font-size: 12px; padding: 7px 3px; padding-left: 29px; } .faq-section .container{ max-width: 404px; margin: auto; } .testimonial-content p{ font-size: 12px; line-height: 1; } .testimonial-card .ratings img{ width: 20px; gap: 16px; } .testimonial-card{ max-width: 339px; padding: 24px 35px; margin: auto; } .testimonials-section .section-title{ text-align: center !important; } .faq-section .accordion-item .accordion-body{ font-size: 6px; padding: 7px 3px; padding-left: 29px; } .faq-section .accordion-item .accordion-button::after{ left: 8px; width: 12px; height: 12px; } .feature-list li{ font-size: 12px; gap: 11px; } .feature-toggle{ display: flex ; padding: 4px; align-items: center; width: max-content; gap: 0; } .member-features-section .section-title{ margin-bottom: 20px; } /* Gallery Section Mobile Design - Improved */ .gallery-section .galleryContainer .gallery{ width: 280px !important; min-width: 280px !important; max-width: 280px !important; height: auto !important; min-height: auto !important; padding: 12px !important; margin-right: 15px !important; } .gallery-section .galleryContainer .gallery .imgs > img{ width: 140px !important; height: 170px !important; object-fit: cover !important; } .gallery-section .galleryContainer .gallery .imgs div img{ width: 110px !important; height: 82px !important; object-fit: cover !important; } .gallery-section .galleryContainer .gallery .top img{ width: 55px !important; height: 55px !important; min-width: 55px !important; flex-shrink: 0 !important; object-fit: cover !important; } .gallery-section .galleryContainer .gallery .top h2{ font-size: 14px !important; line-height: 1.3 !important; margin: 0 !important; flex: 1 !important; } .gallery-section .galleryContainer .gallery .top h2 span{ font-size: 11px !important; margin-top: 2px !important; } .gallery-section .galleryContainer .gallery .top{ gap: 10px !important; flex-wrap: wrap !important; padding-bottom: 20px; align-items: center !important; } .gallery-section .galleryContainer .gallery .top button{ padding: 8px 14px !important; font-size: 11px !important; white-space: nowrap !important; margin-left: auto !important; flex-shrink: 0 !important; } .gallery-section .galleryContainer .gallery img{ border-radius: 12px !important; } .gallery-section .galleryContainer .gallery a{ font-size: 13px !important; padding: 10px 15px !important; border-radius: 12px !important; margin-top: 20px !important; width: 100% !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } .gallery-section .galleryContainer .gallery .imgs{ margin-top: 12px !important; gap: 8px !important; } .gallery-section .galleryContainer .gallery .imgs div{ gap: 8px !important; } /* Additional mobile improvements for gallery section */ @media (max-width: 768px) { .gallery-section .container{ padding: 0 15px !important; } .gallery-section .section-title{ font-size: 24px !important; margin-bottom: 10px !important; } .gallery-section .testimonials-title{ font-size: 14px !important; margin-bottom: 30px !important; padding: 0 10px !important; } .gallery-section .galleryContainer{ margin: 0 -15px !important; padding: 0 15px !important; } .gallery-section .arrows{ top: 50% !important; padding: 0 10px !important; } .gallery-section .arrows button img{ width: 30px !important; height: 30px !important; } .gallery-section .arrows button{ padding: 8px !important; } } .cta-section .row .cta-title{ font-size: 19px; max-width: 359px; margin-left: 16px; } .cta-section .row .cta-description{ margin-left: 16px; font-size: 12px; max-width: 359px; margin-bottom: 24px; } .cta-section .container{ padding: 16px; max-width: 416px; } .cta-section { padding: 12px 0; } .cta-section .row a{ margin-left: 16px; padding: 8px; font-size: 16px; width: 100%; margin-top: 0 !important; display: flex; /* key */ align-items: center; /* vertical center */ justify-content: center; /* horizontal center */ text-align: center; gap: 6px; /* space between text & icon */ } .gallery-section .galleryContainer .gallery .imgs div, .gallery-section .galleryContainer .gallery .imgs{ gap: 7px; } .gallery-section{ padding: 30px 0; } .testimonials-section{ padding: 35px 0; } .faq-section{ padding: 20px; } .member-features-section{ padding-top: 20px; } .featuresSection{ padding: 40px 0; } .member-features-section .section-title, .feature-toggle, .feature-tabs{ margin-bottom: 20px !important; } /* End of MODEL BROADCAST PAGE STYLES */ /* Dropdown Menu Fallback for browsers that don't support :has() */ .dropdown .dropdownMenu { display: flex; position: absolute; top: calc(100% + 16px); right: 0; z-index: 1002; /* Higher than background blur */ background: var(--bg-primary, #F8F8F8); color: var(--text-primary, #000000); padding: 16px 18px; border-radius: 10px; box-shadow: var(--shadow-md, 0px -5px 20px 0px #0000001A); min-width: 150px; flex-direction: column; gap: 8px; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s ease; } .dropdown .dropdownMenu a { color: var(--text-primary, #000000); font-size: 16px; text-align: left; text-decoration: none; display: flex; justify-content: flex-start; gap: 8px; align-items: center; transition: color var(--transition-normal, 0.3s ease); } .dropdown .dropdownMenu button { color: var(--text-primary, #000000); font-size: 16px; text-align: left; text-decoration: none; display: flex; justify-content: flex-start; gap: 8px; align-items: center; background: none; border: none; cursor: pointer; width: 100%; padding: 0; } .dropdown input[type="checkbox"]:checked ~ .dropdownMenu { display: flex; } .dropdown input[type="checkbox"]:checked ~ .bg { display: block; } /* Ensure dropdown menu is visible when JavaScript shows it */ .dropdown .dropdownMenu.show { display: flex !important; visibility: visible !important; opacity: 1 !important; } .dropdown .bg.show { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Show dropdown when checked or when show class is applied */ .dropdown .dropdownMenu.show, .dropdown input[type="checkbox"]:checked ~ .dropdownMenu { visibility: visible !important; opacity: 1 !important; display: flex !important; } /* Debug: Force visibility for testing */ .dropdown .dropdownMenu.show { background: red !important; border: 2px solid yellow !important; } /* Theme-specific dropdown styling */ [data-theme="dark"] .dropdown .dropdownMenu { background: var(--bg-secondary, #2d2d2d) !important; color: var(--text-primary, #ffffff) !important; border: 1px solid var(--border-color, #404040) !important; } [data-theme="dark"] .dropdown .dropdownMenu a, [data-theme="dark"] .dropdown .dropdownMenu button { color: var(--text-primary, #ffffff) !important; } [data-theme="dark"] .dropdown .dropdownMenu a:hover, [data-theme="dark"] .dropdown .dropdownMenu button:hover { background-color: var(--bg-primary, #404040) !important; } [data-theme="light"] .dropdown .dropdownMenu { background: var(--bg-primary, #F8F8F8) !important; color: var(--text-primary, #000000) !important; border: 1px solid var(--border-color, #dee2e6) !important; } [data-theme="light"] .dropdown .dropdownMenu a, [data-theme="light"] .dropdown .dropdownMenu button { color: var(--text-primary, #000000) !important; } [data-theme="light"] .dropdown .dropdownMenu a:hover, [data-theme="light"] .dropdown .dropdownMenu button:hover { background-color: var(--bg-secondary, #e9ecef) !important; } /* ======================================== POST VISIBILITY INDICATORS ======================================== */ /* Post Visibility Indicators */ .post-visibility-indicators { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .audience-badge, .payment-badge, .exclusive-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .audience-badge { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .payment-badge { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; } .exclusive-badge { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #8b4513; } /* Post Restricted Messages */ .post-restricted-message { margin: 15px 0; text-align: center; } .restricted-content, .payment-required-content { padding: 20px; border: 2px dashed var(--border-color); border-radius: 12px; background: var(--bg-secondary); color: var(--text-secondary); } .restricted-content i, .payment-required-content i { font-size: 24px; margin-bottom: 10px; color: var(--accent-color); } .restricted-content p, .payment-required-content p { margin: 10px 0; font-size: 14px; } .subscribe-btn, .purchase-btn { margin-top: 10px; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; } .subscribe-btn:hover, .purchase-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Theme-specific styling for post indicators */ [data-theme="dark"] .post-visibility-indicators { background: var(--bg-primary, #1a1a1a); } [data-theme="light"] .post-visibility-indicators { background: var(--bg-primary, #ffffff); } [data-theme="dark"] .restricted-content, [data-theme="dark"] .payment-required-content { background: var(--bg-secondary, #2a2a2a); border-color: var(--border-color, #404040); color: var(--text-primary, #ffffff); } [data-theme="light"] .restricted-content, [data-theme="light"] .payment-required-content { background: var(--bg-secondary, #f8f9fa); border-color: var(--border-color, #dee2e6); color: var(--text-primary, #000000); } /* Payment Action Section */ .payment-action-section { margin: 15px 0; text-align: center; padding: 15px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border-color); } .payment-action-section .purchase-post-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: white; padding: 12px 24px; border-radius: 25px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .payment-action-section .purchase-post-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); } .payment-action-section .purchase-post-btn i { margin-right: 8px; } /* Theme-specific payment action styling */ [data-theme="dark"] .payment-action-section { background: var(--bg-secondary, #2a2a2a); border-color: var(--border-color, #404040); } [data-theme="light"] .payment-action-section { background: var(--bg-secondary, #f8f9fa); border-color: var(--border-color, #dee2e6); } /* Hide mobile search bar in web view (light mode) */ } [data-theme="light"] .searchBar.mobile-search-row, [data-theme="light"] .mainSection.publicProfile .searchBar.mobile-search-row, [data-theme="light"] .mainFeed .searchBar.mobile-search-row, [data-theme="light"] form.searchBar.mobile-search-row { display: none !important; } /* ======================================== SWEETALERT2 ICONS - GLOBAL STYLING Proper Round Circle Icons for All Types ======================================== */ /* Base icon styling for all icon types */ .swal2-icon { width: 80px !important; height: 80px !important; border-width: 4px !important; border-style: solid !important; border-radius: 50% !important; position: relative !important; margin: 20px auto 30px !important; background-color: transparent !important; overflow: visible !important; box-sizing: border-box !important; } /* CRITICAL FIX: Hide success icon when warning/error/info/question icons are present */ /* This prevents both icons from showing at the same time */ .swal2-popup .swal2-icon.swal2-success:not(:only-child) { display: none !important; } /* When warning icon exists, hide success icon */ .swal2-popup:has(.swal2-icon.swal2-warning) .swal2-icon.swal2-success { display: none !important; } /* When error icon exists, hide success icon */ .swal2-popup:has(.swal2-icon.swal2-error) .swal2-icon.swal2-success { display: none !important; } /* When info icon exists, hide success icon */ .swal2-popup:has(.swal2-icon.swal2-info) .swal2-icon.swal2-success { display: none !important; } /* When question icon exists, hide success icon */ .swal2-popup:has(.swal2-icon.swal2-question) .swal2-icon.swal2-success { display: none !important; } /* When success icon exists, hide other icons */ .swal2-popup:has(.swal2-icon.swal2-success) .swal2-icon.swal2-warning, .swal2-popup:has(.swal2-icon.swal2-success) .swal2-icon.swal2-error, .swal2-popup:has(.swal2-icon.swal2-success) .swal2-icon.swal2-info, .swal2-popup:has(.swal2-icon.swal2-success) .swal2-icon.swal2-question { display: none !important; } /* SUCCESS ICON - Green Circle with Tick */ .swal2-icon.swal2-success { border-color: #a5dc86 !important; } /* WARNING ICON - Yellow Circle with Exclamation */ .swal2-icon.swal2-warning { border-color: #f8bb86 !important; } /* ERROR ICON - Red Circle with X */ .swal2-icon.swal2-error { border-color: #f27474 !important; } /* INFO ICON - Blue Circle with i */ .swal2-icon.swal2-info { border-color: #3fc3ee !important; } /* QUESTION ICON - Gray Circle with ? */ .swal2-icon.swal2-question { border-color: #87adbd !important; } /* Ensure icon container is properly sized */ .swal2-icon.swal2-success::before { content: '' !important; display: block !important; width: 80px !important; height: 80px !important; border-radius: 50% !important; position: absolute !important; top: 0 !important; left: 0 !important; box-sizing: border-box !important; } .swal2-icon.swal2-success .swal2-success-ring { position: absolute !important; z-index: 2 !important; top: -4px !important; left: -4px !important; width: 80px !important; height: 80px !important; border: 4px solid rgba(165, 220, 134, 0.3) !important; border-radius: 50% !important; box-sizing: border-box !important; animation: swal2-rotate-success-circle 4.25s ease-in !important; } .swal2-icon.swal2-success .swal2-success-line-tip { position: absolute !important; z-index: 2 !important; height: 5px !important; background-color: #a5dc86 !important; display: block !important; border-radius: 2px !important; top: 37px !important; left: 14px !important; width: 25px !important; transform: rotate(45deg) !important; animation: swal2-animate-success-line-tip 0.75s !important; } .swal2-icon.swal2-success .swal2-success-line-long { position: absolute !important; z-index: 2 !important; height: 5px !important; background-color: #a5dc86 !important; display: block !important; border-radius: 2px !important; top: 33px !important; right: 8px !important; width: 47px !important; transform: rotate(-45deg) !important; animation: swal2-animate-success-line-long 0.75s !important; } .swal2-icon.swal2-success .swal2-success-circular-line-left, .swal2-icon.swal2-success .swal2-success-circular-line-right { position: absolute !important; z-index: 1 !important; width: 40px !important; height: 80px !important; border-radius: 50% !important; background-color: transparent !important; } .swal2-icon.swal2-success .swal2-success-circular-line-left { left: -20px !important; top: -4px !important; transform: rotate(-45deg) !important; transform-origin: 50% 50% !important; animation: swal2-rotate-success-circular-line 4.25s ease-in !important; } .swal2-icon.swal2-success .swal2-success-circular-line-right { right: -20px !important; top: -4px !important; transform: rotate(45deg) !important; transform-origin: 50% 50% !important; animation: swal2-rotate-success-circular-line 4.25s ease-in !important; } .swal2-icon.swal2-success .swal2-success-fix { position: absolute !important; z-index: 1 !important; top: -4px !important; left: -4px !important; width: 80px !important; height: 80px !important; border-radius: 50% !important; background-color: transparent !important; } @keyframes swal2-rotate-success-circle { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } } @keyframes swal2-rotate-success-circular-line { 0% { transform: rotate(-45deg); } 5% { transform: rotate(-45deg); } 12% { transform: rotate(-405deg); } 100% { transform: rotate(-405deg); } } @keyframes swal2-animate-success-line-tip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 37px; } } @keyframes swal2-animate-success-line-long { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0; top: 35px; } 100% { width: 47px; right: 8px; top: 33px; } }