/********************************************
* BASE / GLOBAL STYLES
********************************************/
/* Basic usage of Roboto Slab */
.roboto-slab p {
font-family: "Roboto Slab", serif;
font-optical-sizing: auto;
font-weight: light;
font-style: normal;
}
/* Global text styling */
p {
font-size: 11pt !important;
line-height: 30px;
margin: 15px 0;
font-weight: 400;
font-family: 'Roboto Slab', serif !important;
text-align: justify !important;
}
h1, h2 {
font-weight: 400;
font-family: 'Roboto Slab', serif !important;
text-align: justify !important;
color: red !important;
font-weight: bold !important;
}
.support-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
text-align: center;
}
.support-container h1 {
font-family: 'Roboto Slab', serif;
font-size: 2rem;
margin-bottom: 1rem;
}
.support-container p {
font-size: 1.1rem;
margin-bottom: 2rem;
}
#tawk-widget-container {
min-height: 400px;
}
.tawk-min-container {
bottom: 60px !important; /* Above bottom navbar */
}
/* Utility Classes */
.hidden {
display: none;
}
/********************************************
* BODY / CONTAINER
********************************************/
body {
font-family: "Roboto Slab", serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
overflow-x: hidden;
min-height: 100vh;
box-sizing: border-box;
}
.content-wrapper {
padding-bottom: 80px; /* Increased base padding for mobile */
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
header.logo-header {
position: absolute !important;
top: 30px; /* increased space from top */
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: center; /* center logos horizontally */
align-items: center;
background: none;
padding-bottom: 20px;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.site-logo {
height: 60px; /* increased from 40px */
width: auto;
max-width: 200px; /* allow slightly larger width */
object-fit: contain;
display: block !important;
}
.secondary-logo {
height: 60px; /* match .site-logo */
width: auto;
max-width: 200px;
object-fit: contain;
margin-left: 12px; /* space between logos */
}
.logo-text {
display: none; /* hide text since using two logos */
}
/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
header.logo-header {
top: 20px; /* a bit less top-space on mobile */
}
.site-logo,
.secondary-logo {
height: 50px; /* scale down on mobile */
max-width: 180px;
}
}
.del-dashboard-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.del-dashboard-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 30px;
color: var(--text-dark);
}
/* Balance Card (for Creators) */
.del-balance-card {
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
border-radius: 12px;
padding: 20px;
color: white;
position: relative;
margin-bottom: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.del-balance-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
color: white !important;
}
.del-balance-amount {
font-size: 42px;
font-weight: 700;
margin-bottom: 20px;
}
.del-fund-wallet-btn {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid white;
border-radius: 30px;
color: white;
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
width: fit-content;
transition: background-color 0.3s;
}
.del-fund-wallet-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.del-wallet-icon {
margin-right: 10px;
}
/* Stats Cards */
.del-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.del-stats-card {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.del-amount {
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 5px;
}
.del-label {
font-size: 14px;
color: var(--text-light);
margin-bottom: 10px;
}
.del-trend {
font-size: 12px;
color: var(--text-lighter);
display: flex;
align-items: center;
}
.del-trend-icon {
margin-right: 5px;
}
.del-total-card .del-amount {
color: var(--secondary-color);
}
/* Section Styling */
.del-section {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.del-section-title {
font-size: 18px;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
color: var(--text-dark);
}
/* Referral Link */
.del-referral-link {
margin-bottom: 30px;
}
.del-referral-btn {
background-color: var(--secondary-color);
color: red;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
display: inline-block;
transition: background-color 0.3s;
}
.del-referral-btn:hover {
background-color: red;
color: white;
}
/* Banks List */
.del-banks-list {
margin-bottom: 30px;
}
.del-bank-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid var(--border-color);
}
.del-bank-item:last-child {
border-bottom: none;
}
.del-bank-icon {
font-size: 24px;
margin-right: 15px;
}
.del-bank-name {
font-weight: 500;
margin-bottom: 5px;
}
.del-account-number {
color: var(--text-light);
font-size: 14px;
}
.del-no-banks {
color: var(--text-light);
font-style: italic;
}
/* Forms */
.del-bank-form-container,
.del-withdraw-form {
background-color: var(--light-bg);
border-radius: 8px;
padding: 20px;
}
.del-form-title {
font-size: 16px;
font-weight: 600;
margin-top: 0;
margin-bottom: 15px;
}
.del-form-group {
margin-bottom: 15px;
}
.del-form-label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(--text-dark);
}
.del-form-input {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
.del-form-input:focus {
outline: none;
border-color: var(--primary-color);
}
.del-form-submit,
.del-withdraw-btn {
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.del-form-submit:hover,
.del-withdraw-btn:hover {
background-color: #cc0000;
}
.del-form-submit:disabled,
.del-withdraw-btn:disabled {
background-color: var(--text-lighter);
cursor: not-allowed;
}
.del-form-message {
margin-top: 10px;
font-size: 14px;
}
.del-form-message.del-success {
color: var(--success-color);
}
.del-form-message.del-error {
color: var(--error-color);
}
.del-form-message.del-processing {
color: var(--processing-color);
}
.del-withdraw-info {
margin-bottom: 15px;
color: var(--text-light);
font-size: 14px;
}
/* Transactions */
.del-transactions-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.del-see-all {
color: var(--primary-color);
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
}
.del-arrow-icon {
margin-left: 5px;
}
.del-transaction-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid var(--border-color);
}
.del-transaction-item:last-child {
border-bottom: none;
}
.del-transaction-avatar {
margin-right: 15px;
}
.del-avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.del-transaction-info {
flex-grow: 1;
}
.del-transaction-user {
font-weight: 500;
margin-bottom: 5px;
}
.del-transaction-date {
color: var(--text-light);
font-size: 12px;
}
.del-transaction-details {
text-align: right;
}
.del-transaction-type {
font-size: 12px;
color: white;
background-color: #6c757d;
padding: 3px 8px;
border-radius: 12px;
display: inline-block;
margin-bottom: 5px;
}
.del-transaction-type.subscription {
background-color: #007bff;
}
.del-transaction-type.special {
background-color: #9c27b0;
}
.del-transaction-type.tip {
background-color: #28a745;
}
.del-transaction-amount {
font-weight: 700;
}
.del-transaction-amount.credit {
color: var(--success-color);
}
.del-transaction-amount.debit {
color: var(--error-color);
}
.del-no-transactions {
color: var(--text-light);
font-style: italic;
padding: 15px;
text-align: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.del-stats-row {
grid-template-columns: 1fr;
}
.del-transaction-item {
flex-direction: column;
align-items: flex-start;
}
.del-transaction-avatar {
margin-bottom: 10px;
margin-right: 0;
}
.del-transaction-info {
margin-bottom: 10px;
width: 100%;
}
.del-transaction-details {
width: 100%;
text-align: left;
}
}
/****************************************
* BOTTOM NAVIGATION
********************************************/
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
z-index: 999;
}
.container {
padding: 1rem;
}
/* Base styles (mobile-first) */
body {
font-family: "Roboto Slab", serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
overflow-x: hidden;
min-height: 100vh;
box-sizing: border-box;
}
.content-wrapper {
padding-bottom: 100px; /* Increased for mobile viewport */
min-height: 100vh;
box-sizing: border-box;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
z-index: 999;
}
.container {
padding: 1rem;
}
/********************************************
* REQUEST CREATOR PAGE
********************************************/
/* css/request-creator.css */
.rc-request-creator-container {
max-width: 600px;
margin: 0 auto;
padding: 20px 20px 100px;
box-sizing: border-box;
}
.rc-info-text {
font-size: 0.9em;
color: #666;
}
.rc-form {
display: flex;
flex-direction: column;
gap: 15px;
padding-bottom: 20px;
}
.rc-label {
display: block;
margin-bottom: 5px;
}
.rc-input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.rc-error {
color: red;
font-size: 0.9em;
}
.rc-button {
padding: 10px 20px;
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.rc-photo-preview {
margin-top: 10px;
}
.rc-captured-photo {
max-width: 100%;
border: 1px solid #ccc;
}
.rc-photo-message {
font-size: 0.9em;
color: #666;
}
.rc-photo-message-error {
color: red;
}
.rc-submit-button {
padding: 10px 20px;
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
color: #fff;
border: none;
border-radius: 4px;
cursor: not-allowed;
}
.rc-submit-button-enabled {
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
cursor: pointer;
}
.rc-loading-message {
color: #666;
}
.rc-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
z-index: 9999;
display: none;
}
.rc-modal-open {
display: flex;
}
.rc-modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
width: 90%;
max-width: 800px;
}
.rc-video {
width: 100%;
max-height: 70vh;
border: 1px solid #ccc;
}
.rc-hidden {
display: none;
}
/* Video wrapper & overlays */
.video-wrapper {
position: relative;
overflow: hidden;
width: 100%;
display: block;
}
/* Hidden poster image kept only for debugging (not visible) */
.video-wrapper .video-poster-img,
.visually-hidden {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: none; /* hidden by default to avoid the top-left thumbnail issue */
pointer-events: none;
z-index: 0;
}
/* Video element sits below overlay */
.video-wrapper video {
width: 100%;
height: auto;
display: block;
z-index: 1;
background: #000; /* black background so empty area isn't white on some browsers */
}
/* Centered play overlay */
.video-play-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none; /* allow taps to go to the video element */
}
/* Play button appearance */
.video-play-overlay .play-btn {
width: 64px;
height: 64px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.45);
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
color: #fff;
}
/* Make the SVG use the current color (white) */
.video-play-overlay .play-btn svg {
fill: currentColor;
width: 28px;
height: 28px;
}
/* Optional: hide overlay when the video is playing (class toggled by JS) */
.video-wrapper.playing .video-play-overlay {
display: none;
}
/********************************************
* EDIT PROFILE PAGE
********************************************/
.edit-profile-title {
font-size: 24px;
color: #ff69b4;
margin-bottom: 10px;
text-align: center;
}
.edit-profile-form {
padding: 20px 20px 100px; /* Increased bottom padding for mobile */
border: 1px solid #ff99cc;
box-shadow: 0 0 10px rgba(255, 153, 204, 0.5);
border-radius: 10px;
box-sizing: border-box;
}
.edit-profile-label {
font-size: 16px;
color: #666;
margin-bottom: 5px;
display: block; /* Ensure labels are block for consistent spacing */
}
.edit-profile-input {
width: 100%;
height: 30px;
margin-bottom: 10px; /* Reduced to align with hint text */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.edit-profile-textarea {
width: 100%;
height: 100px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.edit-profile-button {
background-color: #ff99cc;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 20px; /* Extra buffer above navbar */
}
.edit-profile-button:hover {
background-color: #ff69b4;
}
/* NEW: Edit Profile Thumbnail Images */
.edit-profile-form .current-image img.thumbnail {
max-width: 100px;
max-height: 100px;
object-fit: cover;
display: block;
margin-bottom: 5px;
}
/* NEW: Hint text for username field */
.input-hint {
font-size: 14px;
color: #666;
margin: 0 0 15px 0; /* Adjusted for spacing below input */
line-height: 1.4;
}
/* NEW: Flash messages for success and error feedback */
.flash-message {
padding: 10px;
margin: 0 0 15px 0; /* Align with form padding */
border-radius: 5px;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.flash-message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.flash-message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* NEW: Username feedback for real-time availability check */
.username-feedback {
font-size: 14px;
margin: 5px 0 15px 0;
line-height: 1.4;
}
/* Larger screens */
@media (min-width: 768px) {
.edit-profile-form {
padding: 30px 30px 120px; /* Adjusted for desktop */
max-width: 400px; /* Match content-wrapper for centered view */
margin: 40px auto; /* Center the form */
}
.edit-profile-label {
font-size: 18px;
}
.edit-profile-input {
height: 35px;
}
.edit-profile-textarea {
height: 120px;
}
.edit-profile-button {
padding: 12px 25px;
}
.input-hint {
font-size: 15px;
}
.flash-message {
font-size: 15px;
}
.username-feedback {
font-size: 15px;
}
}
@media (min-width: 992px) {
.edit-profile-form {
padding: 40px 40px 120px;
max-width: 400px; /* Maintain consistency with content-wrapper */
margin: 40px auto;
}
.edit-profile-label {
font-size: 20px;
}
.edit-profile-input {
height: 40px;
}
.edit-profile-textarea {
height: 150px;
}
.edit-profile-button {
padding: 15px 30px;
}
.input-hint {
font-size: 16px;
}
.flash-message {
font-size: 16px;
}
.username-feedback {
font-size: 16px;
}
}
@media (min-width: 1024px) {
.edit-profile-form {
max-width: 450px; /* Match content-wrapper width for larger screens */
}
}
.nav-item {
flex: 1;
text-align: center;
text-decoration: none;
color: #333;
}
.nav-item i {
display: block;
font-size: 1.4rem;
}
.nav-item.active {
color: #ff6f91;
}
/********************************************
* SLIDE-OUT PROFILE MENU
********************************************/
.profile-menu {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100vh;
background-color: #ffffff;
box-shadow: -2px 0 5px rgba(0,0,0,0.3);
transition: right 0.3s ease;
z-index: 1000;
display: flex;
flex-direction: column;
}
.profile-menu.open {
right: 0;
}
.profile-menu-header {
padding: 20px;
background-color: #f5f5f5;
display: flex;
align-items: center;
gap: 10px;
}
.profile-menu-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.profile-menu-username {
font-size: 1rem;
font-weight: bold;
color: #333;
}
.profile-menu-links {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
}
.profile-menu-links li {
border-bottom: 1px solid #ddd;
}
.profile-menu-links li a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
transition: background-color 0.3s;
}
.profile-menu-links li a:hover {
background-color: #f0f0f0;
}
/********************************************
* NOTIFICATIONS PAGE (mobile-first)
********************************************/
.notifications-container {
margin: 20px auto;
padding: 20px;
max-width: 95%;
background-color: #fff;
border: 1px solid #f8c8da;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(248, 200, 218, 0.3);
}
.notifications-title {
font-size: 1.4rem;
color: #a83260;
text-align: center;
margin-bottom: 1rem;
font-family: "Roboto Slab", serif;
}
.notifications-list {
list-style: none;
padding: 0;
margin: 0;
}
.notification-item {
padding: 1rem;
border-bottom: 1px solid #f8c8da;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.notif-message {
font-size: 0.95rem;
color: #444;
line-height: 1.2;
}
.notif-time {
font-size: 0.8rem;
color: #999;
}
/********************************************
* DESKTOP MEDIA QUERY
********************************************/
@media (min-width: 768px) {
.notifications-container {
max-width: 700px;
}
.notification-item {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.notif-message {
font-size: 1rem;
}
.notif-time {
font-size: 0.85rem;
}
}
.password-container {
position: relative;
width: 100%;
margin: 10px 0; /* Matches signup-form input margins */
}
.password-container input[type="password"],
.password-container input[type="text"] {
width: 100%;
padding: 10px 30px 10px 10px; /* Extra padding on right for eye icon */
font-size: 1rem;
box-sizing: border-box;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 1.2rem;
color: #666; /* Subtle color for icon */
}
.toggle-password:hover {
color: #333; /* Darker on hover for better interaction */
}
.password-error {
display: none;
margin-top: 5px;
font-size: 0.9rem;
color: #ff0000; /* Explicit red color for error */
text-align: left;
}
/* Default background for the welcome page (mobile) */
body.welcome-page {
background: linear-gradient(
45deg,
#322294 0%, /* deep indigo-blue */
#5D2193 50%, /* vibrant purple */
#9730A3 100% /* magenta-pink */
);
background-size: 100% 100%;
overflow: hidden; /* Disable scrolling only on the welcome page */
}
/* Remove padding and background from .container to avoid gaps */
body.welcome-page .container {
padding: 0;
background-color: transparent;
}
/* Remove padding-bottom and background from .content-wrapper to avoid extra space */
body.welcome-page .content-wrapper {
padding-bottom: 0;
height: 100vh; /* Ensure it takes the full height on mobile */
display: flex;
flex-direction: column;
background-color: transparent;
}
/* Sign-up options at the top with padding and centering */
.wel-signup-options {
position: absolute;
top: 40px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 30px;
z-index: 1000;
}
.wel-signup-options p {
font-size: 14px;
color: white;
margin: 0;
}
/* Box around “Get Started” */
.wel-getstarted-box {
display: inline-block;
background: rgba(227, 224, 255, 0.3);
padding: 4px 12px;
border-radius: 20px;
margin-left: 6px;
}
.wel-getstarted-box a {
color: white;
font-weight: bold;
text-decoration: none;
}
.wel-getstarted-box a:hover {
text-decoration: underline;
}
.wel-signup-link {
color: white;
text-decoration: none;
font-weight: bold;
}
.wel-signup-link:hover {
text-decoration: underline;
}
/* Header styles */
header.wel-logo-header {
position: absolute;
top: 120px;
left: 0;
right: 0;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
background: none;
padding-bottom: 20px;
}
/* Logo link container: center two logos */
.wel-logo-link {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
text-decoration: none;
}
/* Primary logo styling */
.wel-site-logo {
height: 50px; /* increased size */
width: auto;
max-width: 150px;
object-fit: contain;
display: block;
}
/* Secondary logo spacing and sizing */
.secondary-logo {
height: 50px; /* increased size */
width: auto;
max-width: 150px;
object-fit: contain;
margin-left: 12px; /* spacing between logos */
}
/* ——————————————————————————————
White content section + embedded top-edge pill
—————————————————————————————— */
.wel-content-section {
position: relative;
margin-top: 25vh; /* purple area is the top 25vh */
background-color: #ffffff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
height: 75vh; /* white card occupies bottom 75% */
overflow: hidden; /* prevent internal scrolling */
padding: 20px 0;
z-index: 3; /* sit above the pill */
}
.wel-content-section::before {
content: "";
position: absolute;
top: -8px; /* 8px above the white card top */
left: 50%;
transform: translateX(-50%);
width: 120px; /* match your card’s width */
height: 8px; /* pill thickness */
background: rgba(227, 224, 255, 0.6); /* light-blue/purple tint */
border-radius: 4px;
z-index: 2; /* sit under the white card but over the pure purple */
}
/* Centered container for the login form (mobile default) */
.wel-welcome-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
text-align: center;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Ensure form elements don’t overflow */
.wel-login-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.wel-input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
.wel-password-container {
position: relative;
}
.wel-password-container input[type="password"],
.wel-password-container input[type="text"] {
width: 100%;
padding: 12px 40px 12px 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
.wel-toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #666;
}
.wel-toggle-password:hover {
color: #333;
}
.wel-button-login {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: bold;
color: white;
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.wel-button-login:hover {
background: linear-gradient(
45deg,
#E6E6FA 0%,
#9370DB 50%,
#4B0082 100%
);
}
.wel-heading {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.wel-subheading {
font-size: 16px;
color: #666;
margin-bottom: 30px;
}
.wel-error-message {
padding: 10px;
margin-bottom: 20px;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 5px;
font-size: 14px;
}
.wel-forgot-password {
margin-top: 15px;
}
.wel-forgot-link {
font-size: 14px;
color: #4B0082;
text-decoration: none;
}
.wel-forgot-link:hover {
text-decoration: underline;
}
.wel-sign-options {
margin-top: 30px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.wel-sign-text {
font-size: 14px;
color: #666;
margin: 0 0 15px 0;
text-align: center;
width: auto;
}
.wel-social-buttons {
display: flex;
justify-content: center;
width: 100%;
}
.wel-a-sign {
display: flex;
align-items: center;
justify-content: center;
width: 150px;
padding: 10px 15px;
font-size: 14px;
color: #333;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.wel-a-sign:hover {
background-color: #e0e0e0;
}
.wel-social-icon {
font-size: 20px;
margin-right: 10px;
color: #333;
}
/* Mobile-specific styles (≤ 768px) */
@media (max-width: 768px) {
.wel-site-logo {
height: 40px; /* increased from 30px */
}
.secondary-logo {
height: 40px; /* increased from 30px */
margin-left: 8px;
}
.wel-logo-text {
font-size: 20px;
margin-left: 3px;
}
.wel-content-section {
margin-top: 25vh;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
height: 75vh;
}
.wel-welcome-container {
padding: 15px;
}
.wel-heading {
font-size: 24px;
}
.wel-subheading {
font-size: 14px;
}
.wel-input {
padding: 10px;
font-size: 14px;
}
.wel-button-login {
padding: 10px;
font-size: 14px;
}
.wel-a-sign {
width: 120px;
padding: 8px 12px;
font-size: 12px;
}
.wel-social-icon {
font-size: 18px;
margin-right: 8px;
}
/* Hide the left section on mobile */
.wel-left-section {
display: none;
}
.wel-page-container {
display: block;
}
.wel-right-section {
display: block;
}
/* Ensure logo header is visible on mobile */
.wel-logo-header {
display: flex;
}
}
/* Desktop-specific styles (> 768px) */
@media (min-width: 769px) {
body.welcome-page {
background-color: #ffffff; /* White background for split layout */
overflow: auto;
}
body.welcome-page .content-wrapper {
height: auto;
min-height: 100vh;
padding-bottom: 0;
display: block;
}
/* Hide mobile-specific elements on desktop */
.wel-signup-options,
.wel-logo-header {
display: none !important; /* Force hide to prevent creeping */
visibility: hidden; /* Additional safeguard */
}
/* Main container for the split layout */
.wel-page-container {
display: flex;
flex-direction: row;
min-height: 100vh;
width: 100%;
max-width: 1440px; /* Limit max width for larger screens */
margin: 0 auto; /* Center the layout */
}
/* Left Section: Get Started, Logo, and Tagline */
.wel-left-section {
flex: 1;
background: linear-gradient(
45deg,
#322294 0%, /* deep indigo-blue */
#5D2193 50%, /* vibrant purple */
#9730A3 100% /* magenta-pink */
);
display: flex;
flex-direction: column;
justify-content: flex-start; /* Align items to the top */
align-items: center;
padding: 60px; /* Increased padding for better spacing */
min-width: 500px; /* Ensure enough space for content */
position: relative; /* For absolute positioning if needed elsewhere */
}
.wel-signup-desktop {
position: static; /* Keep as static */
text-align: center;
margin-top: 0; /* No extra margin from the top */
margin-bottom: 15px; /* Space below */
}
.wel-signup-desktop p {
font-size: 16px;
color: white !important; /* Ensure text is white */
margin: 0;
}
.wel-signup-desktop .wel-getstarted-box {
background: rgba(255, 255, 255, 0.2); /* Slightly different background for desktop */
padding: 6px 14px;
}
.wel-signup-desktop .wel-signup-link {
color: white !important; /* Ensure link is white */
font-size: 16px;
}
.wel-logo-container {
margin-top: 5px; /* Minimal space above logos */
margin-bottom: 20px; /* Space below logos */
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.wel-logo-link {
display: flex; /* Use flex to align both logos */
justify-content: center;
align-items: center;
}
.wel-site-logo {
height: 80px; /* Larger logo for desktop fullscreen */
width: auto;
max-width: 200px;
display: block;
}
.secondary-logo {
height: 80px; /* Match primary logo size */
width: auto;
max-width: 200px;
display: block;
margin-left: 15px; /* Spacing between logos */
}
.wel-tagline {
font-size: 32px; /* Already reduced */
font-weight: bold;
color: #ffffff !important; /* Explicitly set to white with high priority */
text-align: center;
line-height: 1.1; /* Adjusted to tighten the lines */
margin: 0;
max-width: 80%; /* Limit width for readability */
}
/* Right Section: Original Content */
.wel-right-section {
flex: 1;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 60px; /* Increased padding for better spacing */
min-width: 500px; /* Ensure enough space for form */
}
/* Adjust content section for desktop */
.wel-content-section {
margin-top: 0;
height: auto;
min-height: auto;
background-color: #ffffff;
border-radius: 0;
box-shadow: none;
padding: 40px 0;
overflow: visible;
width: 100%;
max-width: 400px; /* Match original form width */
}
.wel-welcome-container {
padding: 30px;
height: auto;
display: block;
}
/* Preserve original form styles */
.wel-heading {
font-size: 28px;
}
.wel-subheading {
font-size: 16px;
}
.wel-input {
padding: 12px;
font-size: 16px;
}
.wel-button-login {
padding: 12px;
font-size: 16px;
}
.wel-a-sign {
width: 150px;
padding: 10px 15px;
font-size: 14px;
}
.wel-social-icon {
font-size: 20px;
margin-right: 10px;
}
}
/* —————————————————————————
/* Scope everything inside .sel-signup-page */
.sel-signup-page {
position: relative;
min-height: 100vh;
overflow: hidden;
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
background-size: 100% 100%;
}
/* Top “Already have an account?” box */
.sel-signup-page .sel-signup-options {
position: absolute;
top: 40px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
z-index: 1000;
}
.sel-signup-page .sel-signup-options p {
font-size: 14px;
color: white;
margin: 0;
}
.sel-signup-page .sel-getstarted-box {
display: inline-block;
background: rgba(227, 224, 255, 0.3);
padding: 4px 12px;
border-radius: 20px;
margin-left: 6px;
}
.sel-signup-page .sel-getstarted-box a {
color: white;
font-weight: bold;
text-decoration: none;
}
.sel-signup-page .sel-getstarted-box a:hover {
text-decoration: underline;
}
/* Header styles */
.sel-signup-page .sel-logo-header {
position: absolute;
top: 120px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20px;
z-index: 999;
}
/* Logo link: center two logos */
.sel-signup-page .sel-logo-link {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
text-decoration: none;
}
/* Primary logo styling */
.sel-signup-page .sel-site-logo {
height: 50px;
max-width: 150px;
object-fit: contain;
}
/* Secondary logo spacing and sizing */
.sel-signup-page .secondary-logo {
height: 50px;
max-width: 150px;
object-fit: contain;
margin-left: 12px;
}
/* White card + embedded pill */
.sel-signup-page .sel-content-section {
position: relative;
margin-top: 25vh;
background-color: #fff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
height: 75vh;
overflow: hidden;
padding: 20px 0;
z-index: 3;
}
.sel-signup-page .sel-content-section::before {
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 8px;
background: rgba(227, 224, 255, 0.6);
border-radius: 4px;
z-index: 2;
}
/* Inner container */
.sel-signup-page .sel-welcome-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
text-align: center;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Form elements */
.sel-signup-page .sel-signup-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.sel-signup-page .sel-input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
.sel-signup-page .sel-password-container {
position: relative;
}
.sel-signup-page .sel-password-container input {
width: 100%;
padding: 12px 40px 12px 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}
.sel-signup-page .sel-toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
color: #666;
}
.sel-signup-page .sel-toggle-password:hover {
color: #333;
}
.sel-signup-page .sel-password-error {
font-size: 14px;
color: #c00;
display: none;
text-align: left;
}
/* Submit button */
.sel-signup-page .sel-button-signup {
width: 100%;
padding: 12px;
font-size: 16px;
font-weight: bold;
color: white;
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.sel-signup-page .sel-button-signup:hover {
background: linear-gradient(
45deg,
#E6E6FA 0%,
#9370DB 50%,
#4B0082 100%
);
}
/* Headings & text */
.sel-signup-page .sel-heading {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.sel-signup-page .sel-subheading {
font-size: 16px;
color: #666;
margin-bottom: 30px;
}
.sel-signup-page .sel-error-message {
padding: 10px;
margin-bottom: 20px;
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
border-radius: 5px;
font-size: 14px;
}
/* Responsive tweaks */
@media (max-width: 768px) {
.sel-signup-page .sel-site-logo { height: 40px; }
.sel-signup-page .secondary-logo { height: 40px; margin-left: 8px; }
.sel-signup-page .sel-heading { font-size: 24px; }
.sel-signup-page .sel-subheading { font-size: 14px; }
.sel-signup-page .sel-input { padding: 10px; font-size: 14px; }
.sel-signup-page .sel-button-signup { padding: 10px; font-size: 14px; }
}
@media (min-width: 769px) {
.sel-signup-page { overflow: auto; }
.sel-signup-page .sel-signup-options { top: 50px; padding: 0 30px; }
.sel-signup-page .sel-signup-link { color: #4B0082; }
.sel-signup-page .sel-content-section {
margin-top: 220px;
height: auto;
min-height: 500px;
padding: 40px 0;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.sel-signup-page .sel-welcome-container { padding: 30px; }
.sel-signup-page .sel-heading { font-size: 32px; }
.sel-signup-page .sel-subheading { font-size: 18px; }
.sel-signup-page .sel-input { padding: 14px; font-size: 16px; }
.sel-signup-page .sel-button-signup { padding: 14px; font-size: 16px; }
}
.ad-heading {
font-size: 2rem;
margin-bottom: 1rem;
}
.ad-subheading {
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.ad-list {
list-style-type: none;
padding-left: 0;
}
.ad-list-item {
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.ad-link {
color: #007bff;
text-decoration: none;
}
.ad-link:hover {
text-decoration: underline;
}
.ad-info {
font-style: italic;
color: #666;
}
.ad-links {
margin-top: 2rem;
}
.adc-heading {
font-size: 2rem;
margin-bottom: 1rem;
}
.adc-subheading {
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.adc-card {
border: 1px solid #ccc;
padding: 15px;
border-radius: 5px;
margin-bottom: 15px;
background-color: #f9f9f9;
}
.adc-link {
color: #007bff;
text-decoration: none;
}
.adc-link:hover {
text-decoration: underline;
}
.adr-heading {
font-size: 2rem;
margin-bottom: 1rem;
}
.adr-list {
list-style: none;
padding: 0;
margin: 0;
}
.adr-list-item {
margin-bottom: 15px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
background-color: #f9f9f9;
padding-left: 10px;
}
.adr-link {
color: #007bff;
text-decoration: none;
}
.adr-link:hover {
text-decoration: underline;
}
.adr-empty {
font-style: italic;
color: #555;
}
/* Headings */
.add-heading {
font-size: 2rem;
margin-bottom: 1rem;
}
/* Card wrapper */
.add-card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
background-color: #f9f9f9;
}
/* Links */
.add-link {
color: #007bff;
text-decoration: none;
}
.add-link:hover {
text-decoration: underline;
}
/* Action section */
.add-actions {
margin-top: 1rem;
}
/* Inline forms for buttons */
.add-action-form {
display: inline-block;
margin-right: 10px;
}
/* Buttons */
.add-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
.add-btn:hover {
opacity: 0.9;
}
.add-btn-approve {
background-color: #28a745; /* green */
color: #fff;
}
.add-btn-reject {
background-color: #dc3545; /* red */
color: #fff;
}
/********************************************
* PROFILE PAGE
********************************************/
.profile-container {
margin: 0;
padding: 0;
/* Removed extra backgrounds and borders */
}
/* Welcome Message */
.pro-welcome-message {
font-size: 36px;
color: #ff69b4;
margin-bottom: 10px;
text-align: center;
}
/* Email and Profile Info */
.pro-email,
.profile-name,
.bio {
font-size: 18px;
color: #666;
margin-bottom: 20px;
}
/* Admin Options */
.pro-admin-options {
margin-top: 20px;
padding: 20px;
}
.pro-admin-title {
font-size: 24px;
color: #ff69b4;
margin-bottom: 10px;
}
/* Settings */
.pro-settings-title {
font-size: 24px;
color: #ff69b4;
margin-bottom: 10px;
}
/* Links */
.pro-edit-profile-link,
.pro-logout-link {
font-size: 18px;
color: #337ab7;
text-decoration: none;
margin-top: 20px;
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
color: #fff;
margin-bottom: 10px;
}
.pro-edit-profile-link:hover,
.pro-logout-link:hover {
background-color: #ff69b4;
}
/* Desktop (min-width: 992px) */
@media only screen and (min-width: 992px) {
.profile-container {
padding: 40px;
margin: 40px;
}
.pro-welcome-message {
font-size: 36px;
}
.pro-email,
.profile-name,
.bio {
font-size: 20px;
}
.pro-admin-title {
font-size: 30px;
}
.pro-settings-title {
font-size: 30px;
}
.pro-edit-profile-link,
.pro-logout-link {
font-size: 20px;
}
}
/********************************************
* HEADER AND SEARCH CONTAINER
********************************************/
.header-search-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: relative;
z-index: 1000;
width: 100%; /* Ensure wrapper spans full width */
box-sizing: border-box; /* Prevent padding issues */
}
/********************************************
* HEADER SECTION
********************************************/
.home-logo-header {
display: flex;
align-items: center;
flex-shrink: 0; /* Prevent header from shrinking */
}
.home-logo-link {
display: flex;
align-items: center;
text-decoration: none;
gap: 1px; /* Minimal spacing between logos */
}
.home-site-logo {
width: 40px; /* Small size for logos */
height: auto;
margin: 0; /* Remove any default margins */
}
.hidden {
display: none !important;
}
.creator-profile-pic-md {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.creator-profile-pic-sm {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
/********************************************
* SEARCH SECTION
********************************************/
.search-section {
display: flex;
align-items: center;
position: relative;
margin-left: auto; /* Push search section to the right end */
}
.search-icon-container {
cursor: pointer;
padding: 8px;
}
.search-icon {
font-size: 1.2rem;
color: #333;
}
.search-container {
position: absolute;
top: 100%;
right: 0;
width: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.search-input-form {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.search-input-form input {
flex: 1;
border: none;
outline: none;
font-size: 1rem;
padding: 5px;
background-color: transparent;
}
.search-input-form .search-submit-btn {
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.search-input-form .search-submit-btn i {
font-size: 1rem;
color: #666;
}
.suggestions-container {
max-height: 200px;
overflow-y: auto;
border-radius: 0 0 10px 10px;
}
.suggestion-item {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.suggestion-item:hover {
background-color: #f5f5f5;
}
/* Add styling for suggestion links */
.suggestion-link {
color: #ff4081; /* Match the search results link color */
text-decoration: none;
font-weight: bold;
}
.suggestion-profile-pic {
margin-right: 10px;
}
.no-suggestions {
padding: 10px;
color: #666;
text-align: center;
}
/* Creator Result Styling */
.creator-result {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.creator-info {
display: flex;
flex-direction: column;
}
.creator-info a {
color: #ff4081;
text-decoration: none;
font-weight: bold;
}
.creator-info p {
margin: 2px 0;
color: #666;
font-size: 0.9rem;
}
.creator-profile-pic {
margin-right: 5px; /* Reduced from 10px to 5px */
}
/* Ensure subscriber count stays on one line */
.creator-info p:last-child {
white-space: nowrap; /* Prevent wrapping */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.header-search-wrapper {
padding: 10px;
}
.home-logo-header {
flex-shrink: 0;
}
.home-site-logo {
width: 30px; /* Smaller logo size for mobile */
}
.search-section {
flex-shrink: 0;
margin-left: auto; /* Ensure search stays on the right */
}
.search-container {
width: 200px; /* Smaller search container for mobile */
right: 0;
}
}
/* Post Action Modal */
.post-action-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
overflow: auto;
}
.post-action-modal:not(.hidden) {
display: flex;
}
.post-action-modal-content {
background: #fff;
border-radius: 8px;
width: 90%;
max-width: 400px;
max-height: 80vh;
padding: 20px;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow-y: auto;
animation: slideIn 0.2s ease-out;
}
.post-action-options {
list-style: none;
padding: 0;
margin: 0;
}
.post-action-options li {
margin: 10px 0;
display: flex;
justify-content: flex-start;
}
.post-action-button {
background: none;
border: none;
color: #333;
font-size: 16px;
font-weight: 500;
width: 100%;
text-align: left;
padding: 10px;
cursor: pointer;
transition: background-color 0.2s;
}
.post-action-button:hover {
background-color: #f0f0f0;
}
.close-post-action-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #333;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Report Post Modal */
.report-post-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
overflow: auto;
}
.report-post-modal:not(.hidden) {
display: flex;
}
.report-post-modal-content {
background: #fff;
border-radius: 8px;
width: 90%;
max-width: 400px;
max-height: 80vh;
padding: 20px;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow-y: auto;
animation: slideIn 0.2s ease-out;
}
.close-report-post-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #333;
}
.close-report-post-modal:hover {
color: #000;
}
#reportPostForm {
display: flex;
flex-direction: column;
gap: 15px;
}
#reportPostForm label {
font-size: 1rem;
color: #333;
font-weight: 500;
}
#reportPostForm select.form-select,
#reportPostForm textarea.form-textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
color: #333;
}
#reportPostForm select.form-select:focus,
#reportPostForm textarea.form-textarea:focus {
border-color: #007bff;
outline: none;
}
#reportPostForm textarea.form-textarea {
resize: vertical;
min-height: 100px;
}
.report-submit-button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
}
.report-submit-button:hover {
background-color: #0056b3;
}
.report-submit-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* Responsive Design */
@media (max-width: 480px) {
.report-post-modal-content {
width: 95%;
padding: 15px;
}
#reportPostForm label {
font-size: 0.9rem;
}
#reportPostForm select.form-select,
#reportPostForm textarea.form-textarea {
font-size: 0.9rem;
padding: 8px;
}
.report-submit-button {
font-size: 0.9rem;
padding: 8px;
}
.close-report-post-modal {
font-size: 1.3rem;
right: 10px;
top: 8px;
}
}
/* Animation (if not defined globally) */
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Post Share Modal */
.post-share-modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
z-index: 1000;
align-items: center;
justify-content: center;
overflow: auto;
}
.post-share-modal.active,
.post-share-modal:not(.hidden) {
display: flex; /* Show when active or not hidden */
}
.post-share-modal-content {
background-color: #fff;
border-radius: 8px;
width: 90%;
max-width: 400px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.post-share-modal-content h3 {
margin: 0 0 15px;
font-size: 1.5rem;
color: #333;
text-align: center;
}
.close-post-share-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 1.5rem;
color: #666;
cursor: pointer;
transition: color 0.2s;
}
.close-post-share-modal:hover,
.close-post-share-modal:focus {
color: #000;
}
.post-share-options {
display: flex;
flex-direction: column;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.post-share-option-button {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background-color: #f5f5f5;
border: none;
border-radius: 5px;
font-size: 1rem;
color: #333;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.post-share-option-button:hover,
.post-share-option-button:focus {
background-color: #e0e0e0;
transform: translateY(-2px);
}
.post-share-option-button:active {
transform: translateY(0);
}
.post-share-option-button i {
font-size: 1.2rem;
color: #555;
}
.post-share-option-button.hidden {
display: none;
}
/* Specific styles for social media buttons */
.post-share-option-button[href*="twitter"] i {
color: #1da1f2; /* Twitter/X blue */
}
.post-share-option-button[href*="whatsapp"] i {
color: #25d366; /* WhatsApp green */
}
.post-share-option-button[href*="telegram"] i {
color: #0088cc; /* Telegram blue */
}
.post-share-option-button[href*="facebook"] i {
color: #3b5998; /* Facebook blue */
}
.post-share-option-button[data-link] i.fa-copy {
color: #666; /* Copy link icon */
}
.post-share-option-button[data-link] i.fa-share {
color: #666; /* Native share icon */
}
/* Disabled state for copy button */
.post-share-option-button:disabled {
background-color: #d0d0d0;
cursor: not-allowed;
opacity: 0.7;
}
/* Responsive Design */
@media (max-width: 480px) {
.post-share-modal-content {
width: 95%;
padding: 15px;
}
.post-share-modal-content h3 {
font-size: 1.3rem;
}
.post-share-option-button {
font-size: 0.9rem;
padding: 8px 12px;
}
.close-post-share-modal {
font-size: 1.3rem;
right: 10px;
top: 8px;
}
}
/* Prevent selection of images */
img.post-image,
img.fullscreenable,
.media-carousel img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
pointer-events: auto; /* Allow clicks but prevent other interactions */
}
/* Prevent selection of videos */
video.post-video,
.media-carousel video {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Content containers need position: relative for overlays */
.post-content,
.media-carousel-container,
.carousel-item {
position: relative;
}
/* Protection overlays */
.image-protection-overlay,
.video-protection-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
cursor: default; /* Use default to maintain user experience */
background-color: transparent;
}
/* Make sure the overlay doesn't block video controls */
.video-protection-overlay {
z-index: 1; /* Lower z-index to not interfere with native video controls */
height: calc(100% - 40px); /* Leave room for video controls */
}
/* Protection message toast notification */
#protection-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #ff69b4;
color: white;
padding: 10px 20px;
border-radius: 4px;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease-in-out;
font-weight: bold;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
/* Optional: Watermark styles */
.content-watermark {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
z-index: 3;
pointer-events: none;
transform: rotate(-15deg);
opacity: 0.8;
}
/* Make sure media containers are properly positioned */
.media-carousel {
position: relative;
}
/* Media query for better spacing on mobile */
@media (max-width: 767px) {
.content-watermark {
font-size: 14px;
bottom: 10px;
right: 10px;
}
#protection-toast {
font-size: 14px;
padding: 8px 15px;
}
}
/********************************************
* LOCKED CONTENT PREVIEW STYLES
********************************************/
.unlock-info {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
font-size: 14px;
margin-top: 10px;
}
.unlock-info i {
font-size: 24px;
}
.unlock-info .unlock-button {
background-color: #ff69b4;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.unlock-info .unlock-button:hover {
background-color: #ff4d94;
}
@media (min-width: 768px) {
.unlock-info {
font-size: 16px;
}
.unlock-info i {
font-size: 32px;
}
.unlock-info .unlock-button {
padding: 10px 20px;
font-size: 16px;
}
}
@media (min-width: 1024px) {
.unlock-info {
font-size: 18px;
}
.unlock-info i {
font-size: 40px;
}
.unlock-info .unlock-button {
padding: 12px 24px;
font-size: 18px;
}
}
/********************************************
* POST CARD STYLES
********************************************/
.post-card {
background-color: #fff;
border: 1px solid #f8c8da;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(248, 200, 218, 0.3);
transition: box-shadow 0.3s;
}
.post-card:hover {
box-shadow: 0 4px 8px rgba(248, 200, 218, 0.4);
}
.post-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.creator-profile-pic {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f8c8da;
margin-right: 10px;
}
.creator-name {
font-size: 15px;
font-weight: bold;
color: #a83260;
}
.post-body {
margin-bottom: 10px;
}
.post-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 5px;
object-fit: cover;
margin-bottom: 10px;
}
.post-video {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 5px;
margin-bottom: 10px;
}
.post-text {
margin: 10px 0;
font-size: 14px;
color: #444;
line-height: 1.4;
}
.post-footer {
display: flex;
flex-direction: column;
gap: 10px;
}
.like-button {
background-color: #ff99cc;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.like-button:hover {
background-color: #ff69b4;
}
.comments {
margin-top: 10px;
}
.comment {
margin-bottom: 6px;
font-size: 13px;
color: #555;
}
.comment strong {
margin-right: 4px;
color: #a83260;
}
.comment-form {
display: flex;
margin-top: 6px;
}
.comment-form input[type="text"] {
flex: 1;
padding: 6px 8px;
font-size: 14px;
margin-right: 8px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
}
.comment-form button {
background-color: #ff99cc;
color: #fff;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.comment-form button:hover {
background-color: #ff69b4;
}
@media (min-width: 768px) {
.post-card {
max-width: 700px;
margin: 20px auto;
padding: 20px;
}
.creator-profile-pic {
width: 50px;
height: 50px;
}
.creator-name {
font-size: 16px;
}
.post-text {
font-size: 15px;
}
.like-button,
.comment-form button {
font-size: 15px;
padding: 10px 16px;
}
}
.post-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.comment-info {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.tip-button .tip-count {
margin-left: 0.2rem;
}
.comments {
margin-top: 1rem;
}
.profile-post-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
padding: 0 5px;
}
.profile-creator-info {
display: flex;
align-items: flex-start;
gap: 10px;
}
.profile-creator-info a {
display: flex;
align-items: flex-start;
text-decoration: none;
max-width: calc(100% - 80px);
}
.profile-creator-info .creator-profile-pic {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 2px solid #f8c8da;
flex-shrink: 0;
}
.profile-name-container {
display: flex;
flex-direction: column;
overflow: visible;
}
.profile-creator-info .profile-creator-name {
font-size: 15px;
font-weight: bold;
color: #a83260;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: normal;
overflow: visible;
text-overflow: initial;
}
.profile-creator-info .profile-username {
font-size: 13px;
color: #666;
margin-top: 2px;
white-space: normal;
overflow: visible;
text-overflow: initial;
}
.verified-badge {
color: #ff69b4;
font-size: 14px;
flex-shrink: 0;
}
.post-menu {
display: flex;
align-items: flex-start;
}
.post-menu-button {
background: transparent !important;
border: none;
padding: 5px;
cursor: pointer;
font-size: 16px;
color: #555;
transition: color 0.3s;
}
.post-menu-button:hover {
color: #a83260;
}
/* Ensure profile-post-header is hidden in compact view */
.media-list .profile-post-header.normal-view-only {
display: none;
}
@media (min-width: 768px) {
.profile-post-header {
margin-bottom: 15px;
}
.profile-creator-info .creator-profile-pic {
width: 50px !important;
height: 50px !important;
}
.profile-creator-info .profile-creator-name {
font-size: 16px;
}
.profile-creator-info .profile-username {
font-size: 14px;
}
.verified-badge {
font-size: 16px;
}
.post-menu-button {
font-size: 18px;
padding: 8px;
}
.post-menu-button i {
font-size: 20px;
}
}
/********************************************
* POST ITEMS (e.g., text-only posts)
********************************************/
.post-item {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
border-radius: 8px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.post-item img,
.post-item video {
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
}
.post-writeup {
font-size: 14px;
font-weight: bold;
color: #444;
padding-top: 10px;
border-top: 1px solid #ddd;
margin-top: 10px;
}
/********************************************
* CREATOR SECTION HEADING
********************************************/
.creator-section h3 a {
text-decoration: none;
color: #a83260;
font-family: 'Playfair Display', serif;
font-size: 18px;
}
@media (min-width: 1024px) {
.post-item {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.post-writeup {
font-size: 16px;
}
.creator-section h3 a {
font-size: 24px;
}
}
/********************************************
* NEW: PROFILE TABS AND MEDIA STYLES
********************************************/
/* Post Timestamp */
.post-timestamp {
display: block;
font-size: 0.85rem;
color: #666;
margin: 8px 0;
font-weight: 500;
}
/* Profile Tabs */
.profile-tabs {
display: flex;
justify-content: center;
margin: 20px 0;
gap: 30px;
}
.tab-button {
background: none;
border: none;
padding: 10px 0;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
color: #666;
display: flex;
align-items: center;
gap: 5px;
}
.tab-button.active {
color: #ff69b4;
border-bottom: 2px solid #ff69b4;
}
/* Tab Content */
.tab-content {
display: block;
}
.tab-content.hidden {
display: none;
}
.tab-count {
font-size: 12px;
font-weight: 700;
color: #333;
}
/* Media Subtabs */
.media-subtabs {
display: flex;
justify-content: center;
margin-bottom: 15px;
gap: 10px;
}
.subtab-button {
background: none;
border: none;
padding: 5px 10px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
color: #666;
}
.subtab-button.active {
color: #ff69b4;
border-bottom: 2px solid #ff69b4;
}
/* View Toggle Button */
.view-toggle-button {
background: none;
border: 1px solid #ddd;
padding: 5px 8px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
color: #666;
transition: all 0.3s ease;
}
.view-toggle-button.active {
background-color: #ff69b4;
color: #fff;
border-color: #ff69b4;
}
/* Media Views */
.media-view {
display: none;
}
.media-view.active {
display: block;
}
/* Compact View (Media List) - Base for all screens */
.media-list {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns on all screens */
gap: 5px;
padding: 5px;
max-width: 700px; /* Match normal view container */
margin: 0 auto; /* Center the grid */
}
/* Visibility control for normal and compact views */
.media-list .media-item.normal-view {
display: none; /* Hide normal-view items in compact view */
}
.posts-list .media-item.compact-view {
display: none; /* Hide compact-view items in normal view */
}
/* Compact view media item styles */
.media-list .media-item.compact-view {
position: relative;
overflow: hidden;
border-radius: 4px;
}
.media-list .media-item.compact-view img,
.media-list .media-item.compact-view video {
width: 100%;
height: 120px;
object-fit: cover;
display: block;
border-radius: 4px;
}
/* Messages */
.no-media-message,
.subscribe-prompt {
text-align: center;
color: #666;
font-size: 16px;
padding: 20px;
}
/* Ensure consistent image and video sizing across Posts and Media tabs */
.post-image {
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 5px;
margin-bottom: 10px;
}
/* Video styles (normal and native fullscreen) */
.post-video {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 5px;
margin-bottom: 10px;
}
/* Ensure consistency in Media tab containers */
.media-normal .post-video,
.media-compact .post-video {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Prevent parent containers from interfering */
.posts-list,
.post-card,
.media-item,
.media-list {
overflow: visible;
position: relative;
}
/* Posts tab specific container */
.posts-list .post-card {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Media tab normal view specific container */
.media-content.posts-list .media-item {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Ensure images and videos fit within the container in normal view */
.media-content.posts-list .media-item img,
.media-content.posts-list .media-item video {
width: 100%;
max-width: 100%;
height: auto; /* Changed from height: 120px */
object-fit: cover;
border-radius: 5px;
margin-bottom: 10px;
}
/* Responsive Adjustments */
@media (min-width: 768px) {
.tab-button {
font-size: 1.1rem;
padding: 12px 24px;
}
.subtab-button,
.compact-view-button {
font-size: 1rem;
padding: 10px 20px;
}
.media-item {
max-width: 700px;
}
.posts-list .post-card,
.media-content.posts-list .media-item {
max-width: 700px;
margin: 20px auto;
padding: 20px;
}
.post-image,
.post-video {
max-width: 100%;
}
.media-list {
grid-template-columns: repeat(3, 1fr); /* Maintain 3 columns */
gap: 10px;
padding: 10px;
max-width: 700px; /* Match normal view */
margin: 0 auto;
}
.media-list .media-item.compact-view img,
.media-list .media-item.compact-view video {
height: 150px;
}
.post-timestamp {
font-size: 0.9rem;
}
}
@media (min-width: 1024px) {
.media-list {
grid-template-columns: repeat(3, 1fr); /* Maintain 3 columns */
max-width: 700px; /* Match normal view */
margin: 0 auto;
}
.media-list .media-item.compact-view img,
.media-list .media-item.compact-view video {
height: 200px;
}
.post-timestamp {
font-size: 0.95rem;
}
}
.comments {
margin-top: 10px;
}
.comment {
font-size: 14px;
margin: 5px 0;
}
.view-all-comments {
color: #007bff;
text-decoration: none;
}
/********************************************
* CAROUSEL STYLES (Shared for Posts and Media Tabs)
********************************************/
.media-carousel-container {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
margin-bottom: 10px;
}
.media-carousel {
display: flex;
transition: transform 0.3s ease;
width: 100%;
}
.carousel-item {
flex: 0 0 100%;
display: none;
width: 100%;
max-width: 100%;
}
.carousel-item.active {
display: block;
}
.carousel-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 5px;
}
.carousel-prev,
.carousel-next {
background: none;
border: none;
font-size: 16px;
cursor: pointer;
color: #666;
padding: 5px;
}
.carousel-indicators {
display: flex;
gap: 5px;
}
.carousel-dot {
width: 8px;
height: 8px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
}
.carousel-dot.active {
background: #ff69b4;
}
/* Ensure media items in carousel are properly sized */
.media-carousel .post-image,
.media-carousel .post-video {
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 5px;
}
.media-carousel .post-video {
max-height: 400px;
}
/* Responsive Adjustments for Carousel */
@media (min-width: 768px) {
.media-carousel .post-video {
max-height: 500px;
}
}
@media (min-width: 1024px) {
.media-carousel .post-video {
max-height: 600px;
}
}
/********************************************
* TAGGED USER STYLES
********************************************/
.tagged-user {
color: #a83260;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.tagged-user:hover {
color: #ff69b4;
text-decoration: underline;
}
/********************************************
* PROFILE CREATOR SUGGESTIONS
********************************************/
.profile-creator-suggestions {
position: absolute;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
max-height: 200px;
overflow-y: auto;
padding: 5px 10px; /* Matches .form-textarea padding */
box-sizing: border-box;
}
.profile-creator-suggestions.suggestions-positioned {
top: calc(attr(data-top-offset px, 0) + 2px); /* +2px gap below line */
/* Fallback for browsers without attr() support */
top: calc(var(--default-line-height, 20px) + 12px); /* padding-top + line-height + gap */
transform: translateY(2px); /* Small gap below the cursor line */
}
.profile-creator-suggestions.hidden {
display: none;
}
.profile-suggestion-item {
display: flex;
align-items: center;
padding: 8px;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
}
.profile-suggestion-item:hover {
background: #f8c8da;
}
.profile-suggestion-profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
border: 1px solid #f8c8da;
}
.profile-suggestion-name {
font-size: 14px;
color: #333;
}
/********************************************
* UPLOAD FORM
********************************************/
.upload-content-form {
margin: 20px 0;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
.textarea-wrapper {
position: relative;
}
.form-textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
.form-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Ensure file inputs are hidden correctly */
.form-input.hidden {
display: none;
}
/* Style for category select to ensure consistency */
select.form-input {
appearance: none;
background: url('data:image/svg+xml;utf8,') no-repeat right 10px center;
background-size: 12px;
padding-right: 30px;
font-size: 14px;
color: #333;
cursor: pointer;
}
select.form-input:focus {
border-color: #ff69b4;
outline: none;
}
.form-button {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-button:hover {
background: #0056b3;
}
.add-more-button {
background: #28a745;
margin-top: 5px;
}
.add-more-button:hover {
background: #218838;
}
.hidden {
display: none;
}
.media-preview {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
margin-top: 10px;
padding: 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.preview-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.preview-item img,
.preview-item video {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
.preview-name {
font-size: 12px;
color: #333;
text-align: center;
word-break: break-all;
margin-top: 5px;
}
.remove-media-button {
position: absolute;
top: -5px;
right: -5px;
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 14px;
line-height: 20px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.remove-media-button:hover {
background: #c82333;
}
/********************************************
* SORT CONTAINER STYLES
********************************************/
.sort-container-align {
text-align: right;
margin-bottom: 10px;
}
/********************************************
* SORT ICON AND MODAL STYLES
********************************************/
.sort-container {
text-align: right;
margin-bottom: 10px;
}
.sort-button {
background: none;
border: none;
padding: 5px 10px; /* Adjusted for better spacing */
cursor: pointer;
color: #666;
transition: color 0.3s ease;
}
.sort-button:hover {
color: #a83260; /* Change icon color on hover, no background */
}
.sort-button i {
font-size: 16px;
}
.sort-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.sort-modal.hidden {
display: none;
}
.sort-modal-content {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.sort-modal-content h3 {
margin: 0 0 15px;
font-size: 18px;
color: #a83260;
}
.sort-option,
.sort-order {
margin-bottom: 15px;
}
.sort-option label,
.sort-order label {
display: flex;
align-items: center;
font-size: 14px;
color: #444;
margin-bottom: 8px;
cursor: pointer;
}
.sort-option input,
.sort-order input {
margin-right: 8px;
}
.sort-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.apply-sort,
.cancel-sort {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.apply-sort {
background-color: #ff69b4;
color: #fff;
}
.apply-sort:hover {
background-color: #ff99cc;
}
.cancel-sort {
background-color: #ccc;
color: #fff;
}
.cancel-sort:hover {
background-color: #aaa;
}
@media (min-width: 768px) {
.sort-button i {
font-size: 18px;
}
.sort-modal-content {
padding: 25px;
}
.sort-modal-content h3 {
font-size: 20px;
}
.sort-option label,
.sort-order label {
font-size: 15px;
}
.apply-sort,
.cancel-sort {
font-size: 15px;
padding: 10px 20px;
}
}
/********************************************
* CHAT CONTAINERS
********************************************/
.chat-container {
width: 90%;
max-width: 500px;
background: white;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: flex;
flex-direction: column;
margin: 0 auto;
height: 100vh;
min-height: 100vh;
}
.chat-header {
background: white;
color: #333;
padding: 15px;
font-weight: bold;
border-bottom: 1px solid #e0e0e0;
font-family: 'Arial', sans-serif;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-header-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.chat-header-title {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.chat-header h2 {
margin: 0;
font-size: 18px;
color: #333;
display: inline-flex;
align-items: center;
}
.chat-header .last-seen {
margin: 2px 0 0;
font-size: 12px;
color: #888;
font-weight: normal;
}
.chat-header .back-arrow {
color: #d16ba5;
font-size: 18px;
text-decoration: none;
}
.chat-header-icon .initial-circle {
width: 40px;
height: 40px;
background-color: #d16ba5;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}
.verified-badge {
margin-left: 5px;
color: #1DA1F2;
font-size: 16px;
}
.chat-window {
flex-grow: 1;
padding: 15px;
overflow-y: auto;
max-height: calc(100vh - 150px);
background-color: #fff;
display: flex;
flex-direction: column;
}
.date-divider {
text-align: center;
font-size: 12px;
color: #888;
margin: 10px 0;
position: relative;
}
.date-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: #e0e0e0;
z-index: 0;
}
.date-divider span {
background-color: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
.message-container {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
max-width: 80%;
}
.message-container.sent {
align-self: flex-end;
flex-direction: row-reverse;
}
.message-container.received {
align-self: flex-start;
}
.message-profile-pic {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
margin-left: 10px;
}
.message-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message-container.sent .message-wrapper {
align-items: flex-end;
}
.message {
border-radius: 20px;
font-size: 14px;
font-weight: normal;
word-wrap: break-word;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.message-container.sent .message {
color: white;
border-bottom-right-radius: 5px;
align-items: flex-end;
}
.message-container.received .message {
color: #333;
border-bottom-left-radius: 5px;
}
.message .text,
.message .tip-info {
background-color: inherit;
padding: 10px 15px;
border-radius: 20px;
}
.message-container.sent .text,
.message-container.sent .tip-info {
background-color: #007bff;
border-bottom-right-radius: 5px;
}
.message-container.received .text,
.message-container.received .tip-info {
background-color: #f0f0f0;
border-bottom-left-radius: 5px;
}
.info {
margin-top: 5px;
font-size: 10px;
color: #888;
text-align: left;
}
.message-container.sent .info {
text-align: right;
}
.message-input-wrapper {
display: flex;
align-items: center;
flex-grow: 1;
background: #f0f0f0;
border-radius: 25px;
padding: 5px 10px;
position: relative;
z-index: 10;
overflow: visible; /* Prevent clipping */
}
.media-preview {
margin-right: 10px;
display: flex;
align-items: center;
}
.media-preview-img,
.media-preview-video {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 5px;
}
.chat-media {
max-width: 100%;
max-height: 200px;
border-radius: 10px;
margin-bottom: 5px;
display: block;
object-fit: cover;
background: none;
padding: 0;
}
.message-form {
display: flex;
padding: 10px;
background: white;
border-top: 1px solid #e0e0e0;
}
.message-form input {
flex-grow: 1;
padding: 10px;
border: none;
font-size: 14px;
outline: none;
background: transparent;
}
.input-icon {
color: #888;
margin: 0 5px;
cursor: pointer;
font-size: 18px;
transition: color 0.2s ease;
background: none;
border: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: auto;
z-index: 11;
}
.input-icon:hover:not(:disabled) {
color: #ff69b4;
}
.input-icon:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.input-icon i {
font-size: 18px;
}
.media-icon,
.tip-icon,
.smiley-icon {
/* Inherit .input-icon styles */
display: inline-flex;
visibility: visible;
min-width: 24px; /* Ensure button has space */
min-height: 24px;
line-height: 24px;
}
.message-input-wrapper .tip-icon {
background: none;
width: auto;
height: auto;
border-radius: 0;
color: #888;
display: inline-flex;
align-items: center;
justify-content: center;
}
.message-input-wrapper .tip-icon:hover {
background: none;
color: #ff69b4;
}
.message-input-wrapper .tip-icon i {
font-size: 18px;
}
.smiley-icon {
pointer-events: auto;
background: none; /* Ensure no background hides it */
}
#emojiPicker {
z-index: 1000;
min-width: 250px;
background: white;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.send-button {
background: #ff85a2;
color: white;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 10px;
z-index: 11;
}
.send-button:hover {
background: #d16ba5;
}
@media (min-width: 768px) {
.chat-container {
max-width: 800px;
}
.chat-header h2 {
font-size: 22px;
}
.chat-window {
max-height: calc(100vh - 150px);
}
.message {
font-size: 16px;
}
.message-form input {
font-size: 16px;
}
.send-button {
width: 45px;
height: 45px;
}
}
/********************************************
* EMOJI PICKER
********************************************/
.emoji-picker {
position: absolute;
bottom: 60px;
left: 10px;
z-index: 1000;
min-width: 250px;
background: white;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.emoji-picker.hidden {
display: none;
}
.emoji-picker.active {
display: block;
}
/* Hide the file input completely */
.media-input {
display: none;
}
/* Style the media icon label */
.input-icon.media-icon {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 40px;
height: 40px;
margin: 0 5px;
padding: 0;
background: none;
border: none;
}
/* Suppress browser pseudo-elements */
.input-icon.media-icon::before,
.input-icon.media-icon::after,
.media-input::before,
.media-input::after {
content: none !important;
}
/********************************************
* VIDEO FALLBACK
********************************************/
.video-fallback {
display: none;
margin: 5px 0;
color: #888;
}
.video-fallback.hidden {
display: none;
}
/********************************************
* CHAT WINDOW
********************************************/
.chat-window.hidden {
display: none;
}
.chat-window.active {
display: flex;
}
/********************************************
* EMOJI TOGGLE DISABLED
********************************************/
.smiley-icon.disabled {
opacity: 0.5;
cursor: not-allowed;
}
/********************************************
* CHAT LIST
********************************************/
.chat-list-container {
width: 90%;
max-width: 500px;
margin: 20px auto;
padding: 15px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.chat-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.chat-list-header h2 {
font-family: 'Arial', sans-serif;
font-size: 24px;
color: #333;
margin: 0;
}
.chat-list-controls {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.chat-list-controls select {
padding: 5px 10px;
border: 1px solid #e0e0e0;
border-radius: 5px;
font-size: 14px;
background: #fff;
cursor: pointer;
min-width: 120px;
}
.chat-list-controls .search-container {
position: relative;
flex-grow: 1;
min-width: 150px;
max-width: 200px;
}
.chat-list-controls #searchInput {
width: 100%;
padding: 5px 30px 5px 10px;
border: 1px solid #e0e0e0;
border-radius: 15px;
font-size: 14px;
box-sizing: border-box;
}
.chat-list-controls .search-container::after {
content: '\f002';
font-family: 'FontAwesome';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #888;
}
#searchInput::placeholder {
color: #888;
}
.chat-item {
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
position: relative;
background-color: #fff;
}
.chat-item.unread .chat-item-header h3,
.chat-item.unread .chat-preview {
font-weight: bold;
color: black;
}
.chat-item.unread .unread-dot {
width: 10px;
height: 10px;
background-color: #ff85a2;
border-radius: 50%;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.chat-item a {
text-decoration: none;
display: block;
color: #333;
}
.chat-item-content {
display: flex;
align-items: center;
}
.chat-profile-pic {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.chat-details {
flex-grow: 1;
}
.chat-item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-item h3 {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #333;
margin: 0;
}
.chat-timestamp {
font-size: 12px;
color: #888;
}
.chat-preview {
font-size: 14px;
color: #666;
margin: 5px 0 0;
}
.chat-preview.tip-preview {
font-weight: bold;
color: #ff69b4;
}
.tip-indicator {
margin-left: 8px;
display: inline-flex;
align-items: center;
font-size: 0.9em;
}
.tip-indicator .fa-gift {
margin-right: 4px;
color: #ff69b4;
}
@media (min-width: 768px) {
.chat-list-container {
max-width: 800px;
padding: 20px;
}
.chat-list-header h2 {
font-size: 28px;
}
.chat-item h3 {
font-size: 18px;
}
.chat-preview {
font-size: 16px;
}
}
@media (max-width: 500px) {
.chat-list-controls {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.chat-list-controls select {
width: 100%;
min-width: unset;
}
.chat-list-controls .search-container {
max-width: unset;
width: 100%;
}
}
/********************************************
* CHAT ITEM VISIBILITY
********************************************/
.chat-item {
display: block; /* Default state */
}
.chat-item.hidden {
display: none;
}
/* Scope home page search to prevent interference */
.search-section .search-container {
position: absolute;
top: 100%;
right: 20px;
width: 300px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.dashboard-container {
max-width: 95%;
margin: 20px auto;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background: linear-gradient(
45deg,
#322294 0%,
#5D2193 50%,
#9730A3 100%
);
background-size: 100% 100%;
}
h1, h2, h3 {
margin-top: 0;
margin-bottom: 10px;
color: #c2185b;
}
.stats-container {
background-color: #ffebf0;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.stat-item {
margin-bottom: 10px;
font-weight: bold;
}
.transaction-history-title {
margin-top: 20px;
margin-bottom: 10px;
}
.transactions-list {
list-style: none;
padding: 0;
margin: 0;
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
}
.transactions-list li {
padding: 10px;
border-bottom: 1px solid #ffcdd2;
}
.transactions-list li:last-child {
border-bottom: none;
}
.transaction-date {
color: #777;
font-size: 0.9em;
}
.transaction-amount {
color: #c2185b;
font-weight: bold;
}
.separator {
margin: 10px 0;
border: 0;
border-top: 1px solid #ffcdd2;
}
/* New Classes for Bank Details & Withdraw Sections */
.bank-details-form, .withdraw-section {
background-color: #ffebf0;
padding: 10px;
margin: 20px 0;
border-radius: 8px;
}
/* Input Fields */
input {
display: block;
margin: 8px 0;
padding: 6px;
width: 100%;
box-sizing: border-box;
}
/* Buttons */
button {
padding: 8px 16px;
background-color: #c2185b;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
@media (min-width: 768px) {
.dashboard-container {
max-width: 700px;
}
}
@media (min-width: 1024px) {
.dashboard-container {
max-width: 900px;
}
}
/********************************************
* UPDATED PROFILE HEADER STYLES
********************************************/
/* Reset box sizing for all elements */
*, *::before, *::after {
box-sizing: border-box;
}
/* Body and HTML full width */
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
}
/* Make main container full width */
.container {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
/* Profile container full width */
.profile-container {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
overflow: hidden; /* Prevent horizontal scroll */
}
/* Profile header full width */
.profile-header {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
position: relative;
}
/* Cover photo container spans the full width */
.cover-photo-container {
width: 100%;
height: 350px;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
/* Cover photo spans the full width */
.cover-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
padding: 0;
}
/* Stats positioned at the top left of the cover photo */
.cover-stats {
position: absolute;
top: 15px;
left: 15px;
display: flex;
gap: 20px;
padding: 0;
color: #fff;
z-index: 10;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.cover-stats .stat-item {
text-align: center;
}
.cover-stats .stat-item i {
font-size: 1.2rem;
display: block;
margin-bottom: 2px;
}
.cover-stats .stat-count {
font-size: 1.2rem;
font-weight: bold;
}
.cover-stats .stat-label {
font-size: 0.8rem;
}
/* Profile details below the cover photo */
.profile-details {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0 15px;
margin-top: -60px;
position: relative;
z-index: 20;
width: 100%;
}
/* Profile picture styling */
.profile-picture {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
/* Profile names below profile picture */
.profile-names {
margin-top: 15px;
text-align: left;
width: 100%;
}
.profile-name, .username {
margin: 0;
padding: 0;
line-height: 1.2;
}
.profile-name {
font-size: 22px;
font-weight: bold;
display: flex;
align-items: center;
gap: 8px;
}
.username {
color: #777;
font-size: 16px;
margin-top: 5px;
}
.verified-badge {
color: #1da1f2;
font-size: 18px;
display: inline-flex;
}
/* Add a last seen timestamp */
.last-seen {
font-size: 14px;
color: #999;
margin-top: 5px;
}
/* Bio section */
.profile-bio {
margin-top: 15px;
padding: 0;
width: 100%;
text-align: left;
}
.bio {
font-size: 16px;
color: #666;
}
/* Responsive adjustments */
@media (min-width: 768px) {
.cover-photo-container {
height: 400px;
}
.profile-picture {
width: 140px;
height: 140px;
}
.cover-stats {
gap: 30px;
}
.cover-stats .stat-label {
font-size: 0.9rem;
}
}
@media (min-width: 1024px) {
.cover-photo-container {
height: 450px;
}
.profile-picture {
width: 160px;
height: 160px;
}
}
.social-media-icons {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 10px;
margin-bottom: 15px;
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.social-icon:hover {
color: #007bff; /* General hover color */
}
.instagram-icon:hover {
color: #e1306c; /* Instagram brand color */
}
.x-icon:hover {
color: #000000; /* Black for X brand */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.social-media-icons {
gap: 10px;
margin-top: 8px;
margin-bottom: 12px;
}
.social-icon {
font-size: 18px;
}
}
/********************************************
* SUBSCRIPTION SECTION STYLES
********************************************/
/* Subscription Section Container */
.subscription-section {
margin: 0;
padding: 15px;
width: 100%;
box-sizing: border-box;
}
/* Flash Messages */
.flash-message {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
text-align: center;
font-size: 1rem;
font-weight: 500;
}
.flash-message.success {
background-color: #d4edda;
color: #155724;
}
.flash-message.error {
background-color: #f8d7da;
color: #721c24;
}
/* Subscribe Now Button: Full width and centered text */
.subscribe-now-button {
display: block;
width: 100%;
background-color: #ff4655;
color: #fff;
border: none;
padding: 15px;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
margin: 0;
}
.subscribe-now-button:hover {
background-color: #e53647;
}
/* Subscription Dropdown Container */
.subscription-dropdown {
margin-top: 15px;
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
width: 100%;
}
.subscription-dropdown.hidden {
display: none;
}
/* Header inside subscription dropdown */
.subscription-dropdown h3 {
margin-top: 0;
font-size: 1.2rem;
color: #ff6f91;
margin-bottom: 10px;
text-align: center;
}
/* Bundle List */
.bundle-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Bundle Item */
.bundle-item {
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
/* Bundle Button Styles (for clickable subscribe buttons and info blocks) */
.bundle-subscribe-button,
.bundle-info-block {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #ff4655;
color: #fff;
border: none;
padding: 15px;
font-size: 1rem;
border-radius: 25px;
transition: background-color 0.3s ease;
box-sizing: border-box;
text-decoration: none;
}
.bundle-subscribe-button:hover {
background-color: #e53647;
cursor: pointer;
}
/* Free Subscription Button */
.free-subscribe-button {
background-color: #28a745;
color: #fff;
}
.free-subscribe-button:hover {
background-color: #218838;
cursor: pointer;
}
/* For non-clickable info blocks (e.g., when viewed by the creator), remove pointer cues */
.bundle-info-block {
cursor: default;
}
/* Bundle Duration (left side) */
.bundle-duration {
font-weight: bold;
font-size: 1rem;
flex: 1;
}
/* Bundle Price (right side) */
.bundle-price {
font-size: 1rem;
font-weight: bold;
text-align: right;
flex: 1;
}
/* Discount Price Styling */
.bundle-price.discount {
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Edit Bundle Button */
.edit-bundle-button {
background-color: #ffc107;
color: #000;
border: none;
padding: 8px 16px;
font-size: 0.9rem;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 5px;
}
.edit-bundle-button:hover {
background-color: #e0a800;
}
/* Delete Bundle Button */
.delete-bundle-button {
background-color: #ccc;
color: #444;
border: none;
padding: 8px 16px;
font-size: 0.9rem;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 5px;
}
.delete-bundle-button:hover {
background-color: #999;
}
/* Delete Bundle Form Spacing */
.delete-bundle-form {
margin-top: 5px;
}
/* Inline Form for Unsubscribe */
.inline-form {
display: inline;
}
/* Toggle Free Subscription Button */
.toggle-free-subscription-btn {
display: block;
width: 100%;
background-color: #007bff;
color: #fff;
border: none;
padding: 15px;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
margin: 10px 0 0 0;
}
.toggle-free-subscription-btn:hover {
background-color: #0056b3;
}
/* Create Bundle Form (for creators) */
.create-bundle-form {
margin: 20px 15px;
padding: 15px;
background-color: #ffe6ee;
border: 2px dashed #ffb3c6;
border-radius: 8px;
}
.create-bundle-form h4 {
margin-top: 0;
font-size: 1.1rem;
color: #ff6f91;
margin-bottom: 10px;
}
.create-bundle-form p {
margin: 0 0 10px;
font-size: 1rem;
color: #444;
}
.create-bundle-form-inner {
width: 100%;
}
.form-group {
margin-bottom: 15px;
}
.create-bundle-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.create-bundle-form input,
.create-bundle-form select,
.create-bundle-form textarea {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
box-sizing: border-box;
}
.create-bundle-form textarea {
resize: vertical;
min-height: 80px;
}
.create-bundle-form button {
background-color: #ff6f91;
color: #fff;
border: none;
padding: 10px 16px;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
width: 100%;
}
.create-bundle-form button:hover {
background-color: #ff3e75;
}
/* No Bundle Creation Message */
.no-bundle-creation-message {
margin: 20px 15px;
padding: 15px;
background-color: #f8d7da;
color: #721c24;
font-weight: bold;
border-radius: 8px;
text-align: center;
}
/* Edit Bundle Modal */
.edit-bundle-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow: auto;
}
.edit-bundle-modal:not(.hidden) {
display: block;
}
.edit-bundle-modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
max-width: 500px;
border-radius: 8px;
box-sizing: border-box;
}
.close-edit-bundle-modal {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.close-edit-bundle-modal:hover,
.close-edit-bundle-modal:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.edit-bundle-modal-content h3 {
margin-top: 0;
font-size: 1.2rem;
color: #ff6f91;
margin-bottom: 15px;
}
.edit-bundle-modal-content label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.edit-bundle-modal-content input,
.edit-bundle-modal-content textarea {
width: 100%;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
box-sizing: border-box;
}
.edit-bundle-modal-content textarea {
resize: vertical;
min-height: 80px;
}
.edit-bundle-modal-content button {
background-color: #ff6f91;
color: #fff;
border: none;
padding: 10px 16px;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
width: 100%;
}
.edit-bundle-modal-content button:hover {
background-color: #ff3e75;
}
/* Success Message for Toggle */
.success-msg {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
text-align: center;
font-size: 1rem;
font-weight: 500;
background-color: #d4edda;
color: #155724;
}
/* Paid Subscription Options Container */
.paid-subscription-options {
padding: 10px 0;
text-align: center;
}
.paid-subscription-options p {
margin: 0 0 10px;
font-size: 1rem;
font-weight: bold;
color: #444;
}
.paid-subscription-options .subscribe-bundle-form {
margin-bottom: 10px;
}
.paid-subscription-options .subscribe-bundle-form button {
width: 100%;
background-color: #ff4655;
color: #fff;
border: none;
padding: 15px;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.paid-subscription-options .subscribe-bundle-form button:hover {
background-color: #e53647;
}
/* No Subscription Options Message */
.no-subscription-options {
margin: 10px 0;
padding: 15px;
background-color: #f8d7da;
color: #721c24;
font-weight: bold;
border-radius: 8px;
text-align: center;
font-size: 1rem;
}
/* Hide the free subscription button entirely */
.free-subscribe-button {
display: none !important;
}
/* Trending Creators Container */
.trending-creators-container {
padding: 20px 0; /* Remove horizontal padding, keep vertical */
width: 100%;
max-width: 500px; /* Slightly increased to ensure centering without cutoff */
margin: 0 auto; /* Center the container */
position: relative;
text-align: center;
}
.trending-creators-container h2 {
color: #ff69b4;
margin-bottom: 20px;
}
/* List of trending creators - Enable horizontal sliding */
.trending-creators-list {
display: flex;
flex-direction: row; /* Horizontal arrangement of slides */
overflow-x: auto; /* Enable horizontal scrolling */
scroll-snap-type: x mandatory; /* Snap to each slide */
gap: 0; /* Remove gap to prevent left shift */
padding: 0; /* Remove padding to avoid extra space */
scroll-behavior: smooth; /* Smooth scrolling */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}
/* Hide scrollbar for aesthetics */
.trending-creators-list::-webkit-scrollbar {
display: none;
}
.trending-creators-list {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Each slide containing four cards */
.creator-slide {
flex: 0 0 auto;
width: 100%; /* Full container width */
max-width: 480px; /* Consistent card width */
display: flex;
flex-direction: column; /* Stack cards vertically within slide */
gap: 20px; /* Gap between cards within a slide */
scroll-snap-align: center; /* Center each slide in the viewport */
align-items: center; /* Center cards horizontally within slide */
margin: 0 10px; /* Add small margin to prevent cutoff */
}
/* Each trending creator card */
.featured-creator-card {
width: 100%;
max-width: 480px; /* Match slide width */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Background cover photo container */
.creator-card-background {
position: relative;
width: 100%;
height: 120px; /* Reduced height from previous setup */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Cover photo now as an absolutely positioned ![]()
*/
.creator-card-background .cover-photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Fill the area like background-size: cover */
object-position: center; /* Center the image */
z-index: 1; /* Behind all overlay content */
}
/* Subscriber count in top-right */
.subscriber-count {
position: absolute;
top: 8px;
right: 10px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
z-index: 2; /* Above cover-photo */
}
.subscriber-count p {
margin: 0;
font-size: 12px;
}
/* Profile picture container */
.profile-picture-container {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: 2px solid white;
border-radius: 50%;
overflow: hidden;
background: white;
z-index: 2; /* Above cover-photo */
}
.profile-picture-container .profile-picture {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Creator info styling */
.creator-info {
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
z-index: 2; /* Above cover-photo */
}
.creator-info a {
color: white;
text-decoration: none;
font-weight: bold;
margin-bottom: 2px;
font-size: 14px;
}
.creator-info p {
margin: 0;
font-size: 12px;
}
/* Slider dots */
.slider-dots {
display: flex;
justify-content: center;
margin-top: 10px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.dot.active {
background-color: #ff69b4;
}
.lightbox-open {
overflow: hidden;
}
/* HIDE / SHOW */
#lightbox.hidden {
display: none;
}
#lightbox {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 0;
background: transparent;
}
/* BACKDROP */
#lb-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 1;
transition: opacity 0.3s ease;
}
/* CONTENT BOX */
#lb-content {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform: translateY(0);
transition: transform 0.3s ease;
}
/* CLOSE BUTTON */
#lb-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10001;
background: rgba(0, 0, 0, 0.7);
border: none;
color: white;
font-size: 2.5rem;
line-height: 1;
padding: 0.5rem 0.8rem;
cursor: pointer;
border-radius: 0.25rem;
transition: transform 0.2s ease;
}
/* Mobile-specific adjustments */
@media (max-width: 768px) {
#lb-close {
top: 1.5rem;
right: 1.5rem;
font-size: 2rem;
padding: 0.6rem 1rem;
transform: scale(1);
}
#lb-close:active {
transform: scale(0.95);
}
}
/* SHARED MEDIA */
.lb-media {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.lb-media.active {
display: block;
}
/* VIDEO — fill more height on mobile */
@media (max-width: 768px) {
#lb-vid {
width: auto !important;
height: 100vh !important;
object-fit: contain !important;
}
}
/* Hide native video controls for all browsers */
#lb-vid::-webkit-media-controls,
#lb-vid::-webkit-media-controls-enclosure,
#lb-vid::-webkit-media-controls-panel,
#lb-vid::-webkit-media-controls-play-button,
#lb-vid::-webkit-media-controls-volume-slider,
#lb-vid::-webkit-media-controls-mute-button,
#lb-vid::-webkit-media-controls-timeline,
#lb-vid::-webkit-media-controls-current-time-display,
#lb-vid::-webkit-media-controls-time-remaining-display,
#lb-vid::-webkit-media-controls-fullscreen-button {
display: none !important;
}
#lb-vid {
-moz-appearance: none;
appearance: none;
pointer-events: none;
}
/* Ensure custom controls are interactive */
.custom-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
display: none;
gap: 15px;
z-index: 10001;
pointer-events: auto;
}
.custom-controls.active {
display: flex;
}
.control-btn {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 1.5rem;
padding: 0;
}
.progress-container {
position: relative;
width: 200px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
cursor: pointer;
align-self: center;
}
.progress-bar {
width: 100%;
height: 100%;
border-radius: 5px;
}
/* Closing animation */
#lightbox.closing #lb-content {
transform: translateY(100vh);
}
#lightbox.closing #lb-backdrop {
opacity: 0;
}
/* Ensure fullscreenable elements are clickable */
.fullscreenable {
cursor: zoom-in !important;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Body overflow control when lightbox is open */
body.lightbox-open {
overflow: hidden;
}
/********************************************
* PROFILE ACTIONS (Chat, Tip, Broadcast Icons)
********************************************/
.profile-actions {
position: absolute;
/* Aligns with bottom of profile picture (350px + 60px below cover) */
right: 30px; /* Aligns to the right with padding */
display: flex;
gap: 10px;
align-items: center;
z-index: 100 !important; /* Higher than everything */
top: 360px !important; /* Move up to avoid overlap */
}
.action-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #ff69b4;
color: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s ease;
}
.action-button:hover {
background-color: #ff3e75;
}
.action-button i {
font-size: 18px;
}
/* Specific icon adjustments */
.chat-icon {
background-color: #ff85a2; /* Distinct color for chat */
}
.tip-icon {
background-color: #ff4655; /* Distinct color for tip */
}
.broadcast-icon {
background-color: #d16ba5; /* Distinct color for broadcast */
}
/* Responsive adjustments */
@media (min-width: 768px) {
.profile-actions {
right: 50px; /* Slightly more padding on larger screens */
top: 430px; /* Cover photo 400px + 60px below = 460px */
gap: 15px;
}
.action-button {
width: 45px;
height: 45px;
}
.action-button i {
font-size: 20px;
}
}
@media (min-width: 1024px) {
.profile-actions {
top: 510px; /* Cover photo 450px + 60px below = 510px */
}
}
.tip-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.tip-modal.active {
display: flex;
}
.tip-modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
}
.tip-modal-content h3 {
margin: 0 0 15px;
color: #ff69b4;
text-align: center;
}
.tip-modal-content label {
display: block;
margin: 10px 0 5px;
color: #333;
}
.tip-modal-content input,
.tip-modal-content textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.tip-modal-content button {
width: 100%;
padding: 10px;
background-color: #ff4655;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.tip-modal-content button:hover {
background-color: #e53647;
}
.tip-modal-content .close-tip-modal {
background: none;
border: none;
color: #999;
font-size: 20px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.bookmark-button {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
.bookmark-button i {
color: #ccc; /* Default color for unbookmarked state */
}
.bookmark-button i.bookmarked {
color: #ffd700; /* Gold color for bookmarked state */
}
.action-button.bookmarks-icon i {
font-size: 20px;
color: #ffd700;
}
.like-button i.liked {
color: #ff0000; /* Red color for liked state */
}
.tip-info {
margin-left: 10px;
display: inline-flex;
align-items: center;
color: #ff69b4; /* Pink color, adjust as needed */
}
.tip-info .fa-gift {
margin-right: 5px;
}
.tip-amount {
font-weight: bold;
}
.purchased-content-link a {
margin-top: 10px;
display: inline-block;
color: #007bff;
font-weight: bold;
text-decoration: none;
}
.purchased-content-link a:hover {
text-decoration: underline;
}
.online-status {
font-size: 0.9em;
color: #28a745; /* Green for online */
margin: 5px 0 0 0;
}
.last-seen-status {
font-size: 0.9em;
color: #6c757d; /* Gray for last seen */
margin: 5px 0 0 0;
}
/* public/styles.css */
/* Add these styles to the end of your existing styles.css file */
/* Change Password Styles */
.cp-form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.cp-input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.cp-button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.cp-button:hover {
background-color: #0056b3;
}
.cp-error-message,
.cp-success-message {
margin-bottom: 10px;
font-size: 14px;
}
.cp-error-message {
color: red;
}
.cp-success-message {
color: green;
}
.cp-back-link {
display: inline-block;
margin-top: 10px;
color: #007bff;
text-decoration: none;
}
.cp-back-link:hover {
text-decoration: underline;
}
/* Forgot Password and Reset Password Styles */
.fp-form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
.fp-input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.fp-button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.fp-button:hover {
background-color: #0056b3;
}
.fp-error-message,
.fp-success-message {
margin-bottom: 10px;
font-size: 14px;
}
.fp-error-message {
color: red;
}
.fp-success-message {
color: green;
}
.fp-back-link {
display: inline-block;
margin-top: 10px;
color: #007bff;
text-decoration: none;
}
.fp-back-link:hover {
text-decoration: underline;
}
/* Share Icon */
.share-icon {
background-color: #007bff;
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
transition: background-color 0.3s ease;
}
.share-icon:hover {
background-color: #0056b3;
}
/* Share Modal */
.share-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease;
}
.share-modal.active {
visibility: visible;
opacity: 1;
}
.share-modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 400px;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.close-share-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #333;
}
.share-modal-content h3 {
margin: 0 0 20px;
font-size: 1.5em;
text-align: center;
}
.share-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.share-option-button {
display: flex;
align-items: center;
padding: 10px;
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 5px;
text-decoration: none;
color: #333;
font-size: 1em;
transition: background-color 0.3s ease;
}
.share-option-button:hover {
background-color: #e9ecef;
}
.share-option-button i {
margin-right: 10px;
font-size: 1.2em;
}
.share-option-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.share-modal-content {
width: 95%;
padding: 15px;
}
.share-option-button {
font-size: 0.9em;
padding: 8px;
}
}
.alert-success {
background-color: #d4edda;
color: #155724;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #c3e6cb;
border-radius: 4px;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #f5c6cb;
border-radius: 4px;
}
/********************************************
* PROFILE MENU DESKTOP ADJUSTMENTS
********************************************/
@media (min-width: 768px) {
/* Keep the profile menu toggleable, but style it for desktop */
.profile-menu {
position: fixed;
top: 0;
right: -250px; /* Hidden by default */
width: 250px;
height: 100vh;
background-color: #ffffff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
z-index: 1000;
display: flex;
flex-direction: column;
transition: right 0.3s ease; /* Retain slide animation */
}
.profile-menu.open {
right: 0; /* Slide in when open */
}
/* Adjust header padding and styling to match the image */
.profile-menu-header {
padding: 15px;
background-color: #f5f5f5;
display: flex;
flex-direction: column; /* Stack avatar and username vertically */
align-items: center;
text-align: center;
}
/* Adjust avatar size and styling */
.profile-menu-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
/* Username styling */
.profile-menu-username {
font-size: 1.1rem;
font-weight: bold;
color: #333;
}
/* Links styling to match the image */
.profile-menu-links li a {
padding: 10px 15px;
font-size: 1rem;
color: #555;
display: flex;
align-items: center;
gap: 10px; /* Space for icons */
}
.profile-menu-links li a:hover {
background-color: #f0f0f0;
color: #333;
}
.profile-menu-links li a[href="/users/login"]::before {
content: "\f090"; /* Font Awesome sign-in icon */
font-family: "FontAwesome";
}
/* Night mode toggle (simplified for demo; you may need to adjust based on your implementation) */
.profile-menu-links li a[href="#"]::before {
content: "\f186"; /* Font Awesome moon icon for night mode */
font-family: "FontAwesome";
}
/* UPDATED: Cover Photo Adjustments for Desktop */
.cover-photo-container {
width: 100%; /* Full width of the parent container */
max-width: 100%; /* Prevent exceeding content-wrapper */
height: 300px; /* Suitable height for desktop */
overflow: hidden; /* Hide overflow to maintain aspect ratio */
position: relative;
margin: 0; /* Remove margins */
padding: 0; /* Remove padding */
box-sizing: border-box; /* Ensure no extra space */
}
.cover-photo {
width: 100%; /* Full width of the container */
height: 100%; /* Fill the container height */
object-fit: cover; /* Cover the area without distortion */
display: block;
margin: 0; /* Remove margins */
padding: 0; /* Remove padding */
}
/* Ensure parent containers allow full width */
.profile-header,
.profile-container,
.container {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* UPDATED: Bottom Nav Centering Fix */
.bottom-nav {
max-width: 400px; /* Match content-wrapper width */
width: 100%; /* Full width up to max-width */
position: fixed;
bottom: 0;
left: 50%; /* Center relative to viewport */
transform: translateX(-50%); /* Offset by half its width to center */
margin: 0; /* Remove auto margins to avoid conflicts */
background-color: #ffffff;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
z-index: 999;
box-sizing: border-box;
padding: 0; /* Ensure no padding offsets */
}
}
@media (min-width: 1024px) {
.bottom-nav {
max-width: 450px; /* Match content-wrapper width */
}
}
/* Ensure mobile view remains unchanged */
@media (max-width: 767px) {
.profile-menu {
right: -250px; /* Hidden by default on mobile */
transition: right 0.3s ease; /* Retain slide animation */
}
.profile-menu.open {
right: 0;
}
.profile-menu-header {
flex-direction: row; /* Horizontal layout on mobile */
align-items: center;
}
}
/********************************************
* DESKTOP LAYOUT ADJUSTMENTS (Except Welcome Page)
********************************************/
/* Ensure the body takes the full viewport width and handles the background */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
background-color: #f7f7f7; /* Default mobile background */
}
/* Desktop view adjustments for screens 768px and above */
@media (min-width: 768px) {
/* Body background for desktop to create gray sidebars */
body:not(.welcome-page) {
background-color: #d3d3d3; /* Gray background for sidebars */
}
/* Center the content wrapper with a narrower max-width and white background for non-welcome pages */
.content-wrapper {
margin: 0 auto; /* Center the content by default */
background-color: #f7f7f7; /* White background for the content area */
padding-bottom: 80px; /* Add padding to account for the bottom nav height (60px + some buffer) */
min-height: 100vh; /* Ensure it takes full height */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow for separation */
}
/* Apply centering and width constraints only to non-welcome pages */
body:not(.welcome-page) .content-wrapper {
max-width: 400px; /* Narrow width for non-welcome pages */
}
/* Ensure the welcome page takes full width */
body.welcome-page .content-wrapper {
max-width: 100%; /* Full width for welcome page */
margin: 0; /* Remove centering */
background-color: #f7f7f7; /* Keep the same background */
box-shadow: none; /* Remove shadow for welcome page */
}
/* Ensure the container inside content-wrapper doesn't add extra padding for non-welcome pages */
body:not(.welcome-page) .container {
padding: 1rem;
width: 100%;
max-width: 100%;
}
/* For welcome page, allow container to take full width */
body.welcome-page .container {
padding: 1rem;
width: 100%;
max-width: 100%;
}
/* Adjust specific containers to ensure they don't exceed the content-wrapper width for non-welcome pages */
body:not(.welcome-page) .post-card,
body:not(.welcome-page) .trending-creators-container,
body:not(.welcome-page) .search-section,
body:not(.welcome-page) .search-results-container,
body:not(.welcome-page) .feed-mode-container,
body:not(.welcome-page) .chat-container,
body:not(.welcome-page) .chat-list-container,
body:not(.welcome-page) .dashboard-container,
body:not(.welcome-page) .profile-container,
body:not(.welcome-page) .notifications-container,
body:not(.welcome-page) .request-creator-container,
body:not(.welcome-page) .edit-profile-form,
body:not(.welcome-page) .cp-form-container,
body:not(.welcome-page) .fp-form-container {
max-width: 100%; /* Ensure they fit within the content-wrapper */
margin-left: auto;
margin-right: auto;
}
/* Fix search container positioning on desktop for non-welcome pages */
body:not(.welcome-page) .search-section .search-container {
right: 20px; /* Align with the padding of the container */
}
}
/* Larger desktop screens */
@media (min-width: 1024px) {
body:not(.welcome-page) .content-wrapper {
max-width: 450px; /* Slightly wider for larger screens */
}
.bottom-nav {
max-width: 450px; /* Match the content-wrapper width */
}
/* UPDATED: Cover Photo Height Consistency for Larger Screens */
.cover-photo-container {
height: 300px; /* Maintain consistent height */
}
}
/* Additional styling for welcome page to ensure full-width elements */
body.welcome-page .login-form,
body.welcome-page .sign-options,
body.welcome-page .signup-options {
max-width: 100%;
width: 100%;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}