/* styles.css */
/* ALL YOUR ORIGINAL CSS STYLES WITH RELATIVE PATHS */
:root { --header-h: 90px; } /* Removed --vvb calculation: using fixed position is the modern standard */
@media (max-width: 900px){
:root { --header-h: 105px; } /* match your mobile logo */
}
/* Dynamic viewport */
/* Stable root sizing to avoid fixed-bottom drift when Safari UI collapses */
html {
height: -webkit-fill-available; /* iOS Safari */
}
body {
min-height: 100svh; /* “small” vh = stable */
min-height: -webkit-fill-available; /* fallback for older iOS */
height: auto;
overscroll-behavior: contain;
}
/***** Dynamic viewport (E N D)****/
/* Global styles */
body {
font-family: 'Segoe UI Historic', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /*Color original era #f0f2f5*/
}
/* Logged-in page bottom breathing room
- lets the last post scroll fully into view even on desktop/tablet */
body.authed {
padding-bottom: 56px;
}
/* ---------- NEW: prevent pre-JS flash ---------- */
.login-form{ display:none; } /* hidden until JS decides */
.mobile-nav{ display:none; } /* idem */
/* Auth-only UI: hidden until a valid session */
.profile-controls,
#staticButton-insideHeaven,
#logoutBtn,
.post-form,
.feed,
.right-sidebar,
#firstBouquetText { display: none; }
.mobile-nav{ display:none; } /* inline-flex / grid are fine too */
/* ---------- NEW block ends ---------- */
/* ===== Utility: quickly hide any element ===== */
.hidden {
display: none !important;
}
/*************quickly hide any element (E N D)****/
/* Static buttons:
- #staticButton-insideHeaven stays fixed (Your Heaven)
- #staticButton is placed by .profile-controls */
#staticButton-insideHeaven {
position: fixed;
left: 20px;
top: 245px !important; /* keep below the profile pill on tablets */
z-index: 1000;
}
#staticButton {
position: static !important;
left: auto !important;
top: auto !important;
}
/* Header styles */
.header {
background-color: #ffffff; /*Color original era #e6e9f0*/
color: #3b5998;
padding: 0.5rem; /* Added some padding for better spacing */
text-align: center;
position: fixed;
top: 0;
left: 0; /* Changed to 0 for consistency */
width: 100%;
z-index: 1000;
font-size: 14px;
height: var(--header-h); /* set via CSS variable */
display: flex; /* Use flexbox for alignment */
justify-content: space-evenly; /* Space between logo and buttons */
align-items: center; /* Center items vertically */
padding: 5px; /* Add some padding */
}
.header h1 {
flex: 1; /* Allow title to take available space */
text-align: center; /* Center the title text */
margin: 0; /* Remove default margin */
}
.header button {
margin: 0 5px; /* Space between buttons */
}
/* Login and post forms */
.login-form, .post-form {
margin: 9rem auto 0;
padding: 2rem;
top: 10em; /* Aligns it to the top of the viewport */
background-color: white;
border-radius: 5px;
width: 300px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* LOGO FACE en el "Header" — scale by height, keep aspect ratio */
/* LOGO FACE base — neutral; sizes are set by media queries below */
.logo-Face {
height: auto;
width: auto;
max-height: none;
max-width: none;
object-fit: contain;
margin-left: -12px;
margin-top: 0px;
display: inline-block;
}
.logo-container {
flex: 0; /* Keep the logo fixed to the left */
}
/* Feed and posts */
.feed {
margin: 0rem auto;
padding: 20px;
background-color: white;
border-radius: 5px;
box-sizing: border-box;
width: 95%;
max-width: 700px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-x: hidden; /* ⛔ Prevents side scrolling */
}
/* =========================================================
Feed bottom breathing room
- creates real scrollable space after the final post
- helps the last post/comments clear sticky/fixed UI
========================================================= */
.feed::after{
content: "";
display: block;
height: 110px;
}
/* =========================================================
Feed bottom breathing room (E N D)
========================================================= */
.post {
border: 1px solid #ccc; /* Light border around each post */
border-radius: 10px; /* Rounded corners */
padding: 15px; /* Padding inside the post */
margin: 10px auto; /* Center the post and add margin */
margin-bottom: 20px;
background-color: #f9f9f9; /* Light background for posts */
width: 100%; /* Set to desired width, e.g., 350px or a percentage */
max-width: 400px; /* Set a maximum width */
border: 1px solid #ccc; /* Optional: Add border for visual separation */
overflow: hidden; /* Prevent overflow */
position: relative; /* Added for positioning overlays */
box-sizing: border-box;
word-wrap: break-word;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.comment-on-post {
margin-top: 2px; /* Space above the comment */
padding: 6px 8px; /* Slightly roomier for comment actions */
border-radius: 10px; /* Softer card feel */
background-color: #f9f9f9; /* Background color for comments */
word-wrap: break-word; /* Ensure long words break */
display: flex;
align-items: flex-start;
gap: 8px;
}
.comment-on-post-content {
flex: 1 1 auto;
min-width: 0;
line-height: 1.4;
}
.comment-author-name {
color: #2563eb;
font-weight: 400;
}
.comment-report-trigger {
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, 0.12);
background: rgba(255, 255, 255, 0.82);
color: #374151;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: none;
}
.comment-report-trigger:hover {
background: rgba(243, 244, 246, 0.96);
}
/* =========================================================
Comment Thread Collapse V1
- reduces visual noise on posts with many comments
- keeps each comment's 3-dot report menu untouched
========================================================= */
.comment-thread-collapse-v1 {
margin: 6px 0 8px;
padding: 0 6px;
}
.comment-thread-collapse-v1 .comment-on-post {
margin: 6px 0 !important;
}
.comment-thread-collapse-v1 .comment-on-post[hidden],
.comment-thread-toggle[hidden],
.comment-thread-empty-hint[hidden] {
display: none !important;
}
/* =========================================================
Empty Comment State V1 (S T A R T)
- Calm empty state for posts/reflections with no comments yet
========================================================= */
.comment-thread-empty-hint {
display: flex;
align-items: center;
gap: 7px;
width: fit-content;
max-width: 100%;
margin: 8px 0 2px;
padding: 7px 11px;
border: 1px solid rgba(34, 197, 94, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.58);
color: rgba(226, 232, 240, 0.82);
font-size: 0.82rem;
font-weight: 650;
line-height: 1.25;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}
.comment-thread-empty-hint::before {
content: "↳";
color: rgba(34, 197, 94, 0.9);
font-size: 0.92rem;
font-weight: 800;
}
/* =========================================================
Empty Comment State V1 (E N D)
========================================================= */
.comment-thread-toggle {
appearance: none;
border: 0;
background: transparent;
color: #166534;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
padding: 7px 4px 5px;
margin: 2px 0 3px;
cursor: pointer;
text-align: left;
display: inline-flex;
align-items: center;
gap: 6px;
}
.comment-thread-toggle::before {
content: "↳";
font-size: 14px;
opacity: 0.82;
}
.comment-thread-toggle:hover {
color: #0f5132;
text-decoration: underline;
}
.comment-thread-toggle:focus-visible {
outline: 2px solid rgba(22, 163, 74, 0.35);
outline-offset: 3px;
border-radius: 8px;
}
.comment-thread-collapse-v1.is-expanded .comment-thread-toggle {
color: #374151;
}
/* =========================================================
Comment Thread Collapse V1 (E N D)
========================================================= */
.post img, .post video {
max-width: 100%; /* Ensure media fits within the post */
height: auto; /* Maintain aspect ratio */
border-radius: 4px; /* Rounded corners for media */
display: block; /* Ensure the media elements are block-level */
}
.post .media-container {
width: 100%; /* Ensure it takes the full width of the post */
position: relative; /* Ensure overlays are positioned correctly */
}
/* Buttons */
button {
background-color: #007bff; /* Button background color */
color: white; /* Button text color */
border: none; /* No border */
border-radius: 4px; /* Rounded corners for buttons */
padding: 5px 10px; /* Padding inside buttons */
cursor: pointer; /* Pointer cursor on hover */
}
button:hover {
background-color: #d1d6dc; /* Darker shade on hover */
}
input[type="text"] {
width: 100%; /* Full width for comment input */
padding: 8px; /* Padding inside input */
margin-top: 5px; /* Space above the input */
border: 1px solid #ccc; /* Light border */
border-radius: 4px; /* Rounded corners */
}
/* Boton de NOMBRE de USUARIO */
.special-button {
background-color: #f0f7f200; /* Custom background color */
color: rgb(6, 6, 6);
padding: 0rem 0rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 0;
/* Custom font styles */
font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
font-size: 16px; /* Change to your desired font size */
font-weight: bold; /* Change to your desired font weight */
font-style: normal; /* Change to italic if desired */
}
.special-button:hover {
background-color: #a8acb332; /* Custom hover color */
}
/* Rotulo para GIORGIO'S HEAVEN */
.insideHeaven-button {
background-color: #f0f7f200; /* Custom background color */
color: rgb(6, 6, 6);
padding: 0rem 0rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 0;
/* Custom font styles */
font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
font-size: 16px; /* Change to your desired font size */
font-weight: bold; /* Change to your desired font weight */
font-style: normal; /* Change to italic if desired */
}
.header-buttons button {
background-color: #ffffff; /* Button color */
color: #3b5998;
padding: 0.5rem 1rem;
border: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.insideHeaven-button:hover {
background-color: #a8acb332; /* Custom hover color */
}
.header-buttons button:hover {
background-color: #f1f2f6; /* Darker shade for hover effect */
}
/* AVATAR global */
.avatar {
width: 25px; /* Set the desired width */
height: 25px; /* Set the desired height */
border-radius: 50%; /* Makes the image circular */
margin-right: 8px; /* Spacing between the image and text */
vertical-align: middle; /* Aligns the image vertically with the text */
object-fit: cover; /* Ensures the image covers the area without distortion */
overflow: hidden; /* Ensures any overflow is hidden */
}
.avatar-miniature {
border-radius: 50%; /* Makes the avatar circular */
width: 25px; /* Width of the miniature */
height: 25px; /* Height of the miniature */
margin-bottom: 10px; /* Space below the avatar */
}
/* Make every miniature avatar show a pointer on hover */
.post .avatar-miniature{
cursor: pointer;
}
.welcome-text h3 {
font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font */
font-size: 24px; /* Adjust the size as needed */
color: #9a9da1; /* Change to your desired color */
text-align: center; /* Center the text */
margin-bottom: 0px; /* Add some space below the heading */
font-weight: bold; /* Make the text bold */
text-transform: none; /* Transform the text to uppercase */
}
/* BOUQUET SECTION */
/* Mobile instructions: visible under header; never intercept taps */
.first-bouquet-text {
position: relative; /* was: sticky */
top: auto; /* let JS control show/hide; no sticky box */
right: auto;
margin: 8px 12px 6px; /* normal flow; no giant left margin */
width: auto;
z-index: 900; /* below modals, above feed content */
padding: 10px;
color: #202021;
text-align: right;
/* Custom font styles */
font-family: 'Segoe UI Historic', sans-serif; /* Change to your desired font family */
font-size: 16px; /* Change to your desired font size */
font-weight: bold; /* Change to your desired font weight */
font-style: normal; /* Change to italic if desired */
pointer-events: none; /* text never blocks taps */
}
/* Instructions Bouquete buttons- CONTAINER */
.INSTRUCTIONS-bouquet-button-container {
display: none;
position: fixed; /* Keep the container fixed */
top: calc(var(--header-h, 64px) + 56px); /* same visual spot under header */
right: 20px; /* Adjust the horizontal position */
z-index: 1000; /* Ensure it overlays other content */
margin-top: 20px; /* Space between bouquet text and buttons */
justify-content: center;
background-color: #f5f5f5; /*Usar este primero #f5f5f5 **** Color original era #f0f2f5*/
/* Keep its hitbox compact so it can't overlay the feed */
pointer-events: auto;
}
/* Bouquete Buttons */
.INSTRUCTIONS-bouquet-small-button {
background-color: #f5f5f5; /*Color original era #f0f2f5*/
border: none; /* No border */
cursor: pointer; /* Pointer cursor on hover */
padding: 5px; /* Reduce padding for a tighter look */
margin: 2px; /* Adjust this value to control the space between buttons */
}
/* Size of the BOUQUETS images */
.INSTRUCTIONS-bouquet-small-button img {
width: 40px; /* Size of the button image */
height: 40px; /* Size of the button image */
background-color: #f5f5f5; /*Color original era #f0f2f5*/
transition: transform 0.9s; /* Smooth transition for scaling */
}
.INSTRUCTIONS-bouquet-small-button:hover {
background-color: #a8acb332; /* Darker shade for hover effect */
transform: scale(1.2); /* Scale down to 90% of the original size */
}
.Bouquet-Post-button-container {
display: flex;
justify-content: space-between; /* Adjust alignment */
margin-bottom: 10px; /* Space above Like and Comment buttons */
}
.buquet-post-action-button {
margin-right: 12px; /* Space between buttons */
margin-left: 10px; /* Space between buttons */
background-color: #f9f9f9; /* Button background color */
color: #9a9da1; /* Button text color */
border: none; /* No border */
border-radius: 4px; /* Rounded corners for buttons */
cursor: pointer; /* Pointer cursor on hover */
}
.buquet-post-action-button:hover {
background-color: #a8acb332; /* Darker shade for hover effect */
}
/* =========================================================
Bouquet Eligibility Cleanup V1 (START)
- Safety net: text-only posts must never show bouquet UI,
even if old data or old DOM appears during re-render.
========================================================= */
.post-item-bouquet-disabled .Bouquet-Post-button-container,
.post-item-bouquet-disabled .bouquet-layer,
.post-item-bouquet-disabled .bouquet-count-chip,
.post-item-bouquet-disabled .post-givers-list {
display: none !important;
}
/* =========================================================
Bouquet Eligibility Cleanup V1 (END)
========================================================= */
.overlay-image {
position: absolute;
z-index: 10; /* Ensure the overlay is above the media */
}
/* Modal Dialog BOX for adding bouquet "YES" and "NO" */
.modal-bouquet {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1001; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
justify-content: center; /* Center the content */
align-items: center;
}
.modal-bouquet-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
/* Payment Modal Styles */
.payment-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1002; /* Sit on top, above other modals */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
justify-content: center; /* Center the content */
align-items: center;
}
.payment-modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 350px;
}
.payment-modal-content h3 {
margin-bottom: 20px;
}
.payment-modal-content .input-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.payment-modal-content .input-row input {
width: 70px;
padding: 5px;
text-align: center;
font-size: 16px;
}
.payment-modal-content .input-row span {
align-self: center;
}
.payment-modal-content .expiration-date {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.payment-modal-content .expiration-date input {
width: 50px;
padding: 5px;
text-align: center;
font-size: 16px;
}
.payment-modal-content .expiration-date span {
margin: 0 5px;
font-size: 18px;
}
.payment-modal-content .cvv-input {
width: 80px;
padding: 5px;
text-align: center;
font-size: 16px;
margin-bottom: 15px;
}
.payment-modal-content .button-row {
margin-top: 20px;
}
.payment-modal-content .button-row button {
margin: 0 10px;
padding: 10px 20px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}
.payment-modal-content .button-row button:hover {
background-color: #0056b3;
}
/* Bouquet checkout premium modal polish (S T A R T)
Modernizes bouquet confirmation + payment modals while keeping feed-style action buttons. */
#bouquetModal.modal-bouquet,
#paymentModal.payment-modal,
#bouquetContributionModal.contrib-modal {
background:
radial-gradient(circle at top, rgba(34, 197, 94, 0.20), transparent 34%),
rgba(2, 6, 23, 0.76);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 18px;
box-sizing: border-box;
}
#bouquetModal .moh-bouquet-decision-card,
#paymentModal .moh-payment-card,
#bouquetContributionModal .modal-bouquet-content {
width: min(92vw, 430px);
box-sizing: border-box;
border-radius: 28px;
padding: 24px 20px 20px;
text-align: center;
color: #f8fafc;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
border: 1px solid rgba(34, 197, 94, 0.28);
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.52),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
#bouquetModal .moh-bouquet-decision-card::before,
#paymentModal .moh-payment-card::before,
#bouquetContributionModal .modal-bouquet-content::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.20), transparent 34%),
linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%);
}
#bouquetModal .moh-bouquet-decision-card > *,
#paymentModal .moh-payment-card > *,
#bouquetContributionModal .modal-bouquet-content > * {
position: relative;
z-index: 1;
}
.moh-bouquet-modal-icon {
width: 54px;
height: 54px;
margin: 0 auto 12px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #86efac;
font-size: 28px;
line-height: 1;
background: rgba(34, 197, 94, 0.13);
border: 1px solid rgba(134, 239, 172, 0.42);
box-shadow: 0 0 26px rgba(34, 197, 94, 0.20);
}
.moh-bouquet-modal-eyebrow {
margin: 0 0 8px;
color: rgba(187, 247, 208, 0.90);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
#bouquetModal .moh-bouquet-decision-card h3,
#paymentModal .moh-payment-card h3,
#bouquetContributionModal .modal-bouquet-content h3 {
margin: 0;
color: #ffffff;
font-size: clamp(21px, 4.8vw, 28px);
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.035em;
}
.moh-premium-green,
#bouquetContributionModal .modal-bouquet-content b {
color: #22c55e;
}
.moh-bouquet-modal-copy,
#bouquetContributionModal .modal-bouquet-content p {
margin: 12px auto 0 !important;
max-width: 34rem;
color: rgba(226, 232, 240, 0.86);
font-size: 14px;
line-height: 1.55 !important;
}
.moh-feed-modal-actions,
#paymentModal .button-row,
#bouquetContributionModal .contrib-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.moh-feed-modal-action,
#paymentModal .button-row button,
#bouquetContributionModal .contrib-actions button {
width: auto;
min-width: 132px;
min-height: 42px;
margin: 0;
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid rgba(22, 163, 74, 0.22);
background: #ffffff;
color: #111827;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
box-shadow:
0 8px 22px rgba(15, 23, 42, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}
.moh-feed-modal-action:hover,
#paymentModal .button-row button:hover,
#bouquetContributionModal .contrib-actions button:hover {
background: #ffffff;
border-color: rgba(22, 163, 74, 0.46);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.18),
0 0 0 3px rgba(34, 197, 94, 0.12);
transform: translateY(-1px);
}
.moh-feed-modal-action-primary,
#yesButton.moh-feed-modal-action-primary,
#proceedPaymentButton.moh-feed-modal-action-primary,
#bouquetContributionModal #contribContinue {
border-color: rgba(34, 197, 94, 0.48);
background: linear-gradient(180deg, #ffffff, #f0fdf4);
color: #064e3b;
}
/* =========================================================
Paid Bouquet Placement Modal Clarity V1 (START)
- Centers the single placement button after Stripe payment.
- Keeps "No, cancel" hidden only for paid placement/recovery.
========================================================= */
#bouquetModal.moh-paid-placement-flow .moh-feed-modal-actions {
justify-content: center;
}
#bouquetModal.moh-paid-placement-flow #noButton {
display: none !important;
}
#bouquetModal.moh-paid-placement-flow #yesButton {
min-width: 190px;
padding-inline: 22px;
}
/* Paid Bouquet Placement Modal Clarity V1 (END) */
#paymentModal #proceedPaymentButton {
min-width: 178px;
padding-inline: 10px;
font-size: 9px;
letter-spacing: 0.035em;
line-height: 1.05;
white-space: normal;
flex-direction: column;
gap: 2px;
}
#paymentModal #proceedPaymentButton span {
display: block;
}
.moh-feed-modal-action-secondary,
#noButton.moh-feed-modal-action-secondary,
#cancelPaymentButton.moh-feed-modal-action-secondary,
#bouquetContributionModal #contribCancel {
background: rgba(255, 255, 255, 0.94);
color: #1f2937;
}
#paymentModal .moh-payment-label {
display: block;
margin: 18px 0 7px;
color: rgba(187, 247, 208, 0.92);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.10em;
text-transform: uppercase;
text-align: left;
}
#paymentModal .input-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin: 0;
}
#paymentModal .input-row span {
display: none;
}
#paymentModal .input-row input,
#paymentModal .expiration-date input,
#paymentModal .cvv-input {
width: 100%;
min-width: 0;
height: 44px;
box-sizing: border-box;
border-radius: 14px;
border: 1px solid rgba(134, 239, 172, 0.28);
background: rgba(15, 23, 42, 0.78);
color: #f8fafc;
padding: 9px 10px;
text-align: center;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.01em;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#paymentModal .input-row input:focus,
#paymentModal .expiration-date input:focus,
#paymentModal .cvv-input:focus {
border-color: rgba(34, 197, 94, 0.86);
box-shadow:
0 0 0 3px rgba(34, 197, 94, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#paymentModal .moh-payment-small-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 2px;
}
#paymentModal .expiration-date {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 7px;
margin: 0;
}
#paymentModal .expiration-date span {
color: rgba(226, 232, 240, 0.82);
font-weight: 900;
}
#bouquetContributionModal .contrib-close {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.88);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
#bouquetContributionModal .contrib-skip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
color: rgba(226, 232, 240, 0.82);
font-size: 13px;
}
#bouquetContributionModal .contrib-skip input {
accent-color: #22c55e;
}
/* =========================================================
PayPal V1-C — bouquet payment choice cards (START)
- Stripe remains primary.
- PayPal appears as a secondary secure option when enabled.
========================================================= */
#bouquetContributionModal .moh-bouquet-payment-choice {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 18px;
}
#bouquetContributionModal .moh-bouquet-payment-choice-card {
width: 100%;
min-height: 62px;
appearance: none;
-webkit-appearance: none;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 6px;
padding: 13px 14px;
border-radius: 18px;
border: 1px solid rgba(134, 239, 172, 0.26);
background: rgba(15, 23, 42, 0.72);
color: #f8fafc;
text-align: left;
cursor: pointer;
font-family: inherit;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition:
transform 0.18s ease,
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease;
}
#bouquetContributionModal .moh-bouquet-payment-choice-card:hover,
#bouquetContributionModal .moh-bouquet-payment-choice-card:focus-visible {
transform: translateY(-1px);
border-color: rgba(34, 197, 94, 0.62);
background: rgba(15, 23, 42, 0.90);
box-shadow:
0 16px 34px rgba(0, 0, 0, 0.28),
0 0 0 3px rgba(34, 197, 94, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
outline: none;
}
#bouquetContributionModal .moh-bouquet-payment-choice-card--primary {
border-color: rgba(34, 197, 94, 0.58);
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.78));
color: #f8fafc;
}
#bouquetContributionModal .moh-bouquet-payment-choice-card--primary:hover,
#bouquetContributionModal .moh-bouquet-payment-choice-card--primary:focus-visible {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.88));
}
#bouquetContributionModal .moh-bouquet-payment-choice-card--paypal {
border-color: rgba(96, 165, 250, 0.44);
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.74));
}
#bouquetContributionModal .moh-bouquet-payment-choice-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
#bouquetContributionModal .moh-bouquet-payment-brand-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
padding: 5px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
#bouquetContributionModal .moh-bouquet-payment-brand-badge--stripe {
color: #635bff;
}
#bouquetContributionModal .moh-bouquet-payment-brand-badge--paypal {
color: #003087;
}
#bouquetContributionModal .moh-bouquet-payment-choice-title {
display: block;
font-size: 14px;
font-weight: 650;
line-height: 1.18;
letter-spacing: -0.01em;
}
#bouquetContributionModal .moh-bouquet-payment-choice-subtitle {
display: block;
color: #22c55e;
opacity: 1;
font-size: 12px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
}
#bouquetContributionModal .moh-bouquet-payment-helper {
margin-top: 12px !important;
color: rgba(226, 232, 240, 0.74) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
}
@media (min-width: 520px) {
#bouquetContributionModal .moh-bouquet-payment-choice {
grid-template-columns: 1fr 1fr;
}
}
/* PayPal V1-C — bouquet payment choice cards (END) */
@media (max-width: 430px) {
#bouquetModal .moh-bouquet-decision-card,
#paymentModal .moh-payment-card,
#bouquetContributionModal .modal-bouquet-content {
width: min(94vw, 390px);
padding: 22px 16px 18px;
border-radius: 24px;
}
.moh-feed-modal-actions,
#paymentModal .button-row,
#bouquetContributionModal .contrib-actions {
gap: 10px;
}
.moh-feed-modal-action,
#paymentModal .button-row button,
#bouquetContributionModal .contrib-actions button {
min-width: 0;
flex: 1 1 130px;
padding-inline: 12px;
}
#paymentModal .moh-payment-small-grid {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* Bouquet checkout premium modal polish (E N D) */
/* GIVERS List Styles */
.givers-list {
width: 100%;
padding: 10px;
border-radius: 20px;
z-index: 1000;
}
.givers-list h3 {
margin-top: 5;
font-size: 14px;
text-align: left;
}
.giver-item {
display: flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s;
}
.giver-item:hover {
background-color: #f1f1f1;
}
.giver-item img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 5px;
}
.giver-name {
font-size: 12px;
color: #333;
}
/* ***** END OF CSS for GIVERS List***** */
/* === Profile-popover (click any avatar) ============================== */
.profile-popover{
position:absolute; /* pins next to the clicked avatar */
background:#fff;
padding:12px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.15);
transform-origin:top left; /* for the flip-card entrance */
animation:flipIn .35s ease forwards;
z-index:1200; /* above normal content */
}
/* avatar inside the card */
.profile-popover img{
width:120px;
height:120px;
border-radius:6px;
object-fit:cover;
display:block;
}
/* close “×” button */
.profile-popover .close-popover{
position:absolute;
top:6px; right:8px;
background:transparent;
border:none;
font-size:22px;
line-height:1;
cursor:pointer;
}
/* Safari (iOS/iPadOS) sometimes clips inline‐block buttons at 22 px font size */
.profile-popover .close-popover{
line-height: 22px; /* ensure full height so the glyph isn’t cropped */
}
.profile-popover .close-popover{
color:#333; /* always dark so it shows on white */
}
/* ——— tiny “Change picture” button inside the pop-over ——— */
.profile-popover .change-btn{
display:block;
margin:6px auto 0;
padding:4px 10px;
font-size:13px;
border:1px solid #1877f2;
border-radius:4px;
background:#1877f2;
color:#fff;
cursor:pointer;
}
.profile-popover .change-btn:hover{ background:#0b64d9; }
.scroll-arrow img{
width:22px; height:22px;
pointer-events:none; /* so the whole button is clickable */
}
/* sweet card-flip entrance */
@keyframes flipIn{
0%{ transform:rotateX(90deg) scale(.5); opacity:0; }
100%{ transform:rotateX(0deg) scale(1); opacity:1; }
}
/* ===========Profile-popover (E N D)================================== */
/* ==================================================================== */
/* 🌸 Bouquet Overlays for Posts */
.bouquet-overlay-container {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
padding-left: 6px;
}
/* Rail: sits between frame and album */
.bouquet-layer{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
gap:6px 8px; /* tighter, lush */
padding:10px 12px;
margin:6px 0 10px;
border-radius:14px;
background:rgba(255,255,255,0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 6px 18px rgba(0,0,0,0.08) inset, 0 2px 8px rgba(0,0,0,0.06);
align-items:center;
justify-items:center;
pointer-events:none; /* keeps clicks on the media/lightbox */
}
/* Each bouquet icon */
.bouquet-overlay{
width:34px;
height:34px;
object-fit:contain;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)) saturate(1.05);
transform: translateY(0) scale(1);
transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
opacity: 1;
}
/* Freshly-added bouquet: subtle pop-in */
.bouquet-overlay.bouquet-new{
animation: bouquet-pop 220ms ease-out forwards, bouquet-glow 900ms ease-out;
}
@keyframes bouquet-pop{
0% { transform: translateY(calc(var(--jitter) + 6px)) scale(.82) rotate(var(--tilt)); opacity: 0; }
60% { transform: translateY(calc(var(--jitter) - 2px)) scale(1.08) rotate(var(--tilt)); opacity: 1; }
100% { transform: translateY(var(--jitter)) scale(1) rotate(var(--tilt)); }
}
@keyframes bouquet-glow{
0% { filter: drop-shadow(0 0 0 rgba(255,180,0,.0)) saturate(1.1); }
30% { filter: drop-shadow(0 0 8px rgba(255,180,0,.45)) saturate(1.15); }
100% { filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)) saturate(1.05); }
}
/* Slightly larger on narrow screens for “lush” feel */
@media (max-width: 480px){
.bouquet-overlay{ width:38px; height:38px; }
.bouquet-layer{ gap:6px 6px; padding:12px; }
}
/******************Bouquet Overlays for Posts END******************************/
.post img,
.post video {
max-width: 100%;
height: auto;
display: block;
}
/* ✨ Username button container inside each post */
.user-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
/********************************************************************/
/* ✨ Username text styled as a button (non-clickable for now) */
.username-button {
font-family: 'Segoe UI Historic', sans-serif;
font-size: 14px;
font-weight: bold;
color: rgb(6, 6, 6);
background-color: transparent;
border: none;
cursor: default;
padding: 0;
}
/********** Inline GIVERS list for each post ********/
.post-givers-list {
list-style: none;
padding: 0;
margin-top: 10px;
font-size: 12px;
color: #666;
text-align: left;
}
/********** Inline GIVERS list for each post END ********/
/* === iOS anti-zoom: keep login inputs ≥16 px ========== */
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
font-size: 17px; /* 16 is the minimum; 17 looks a bit crisper */
}
/* === iOS anti-zoom - END ========== */
/* === ************Logout icon – desktop defaults **********=== */
.logout-button {
background:#fff;
border:none;
padding:0rem;
cursor:pointer;
/* NEW – always fixed in the same spot */
position:fixed;
top:6px;
right:12px;
z-index:1100; /* stays above header content */
}
.logout-button:hover { background:#f1f2f6; }
/* === ************Logout icon – E N D **********=== */
/* Login & sign-up inputs: thin text */
.login-form input{
font-family: 'Segoe UI', sans-serif;
font-weight: 400; /* normal */
}
/* ===============================================
RESPONSIVE TWEAKS – added 2025‑06‑09 (Georgia)
Keeps header icons horizontal & hides fixed
buttons / instructions on small screens
=============================================== */
/* Bouquet instructions – mobile layout (visible & below header) */
.first-bouquet-text {
position: relative; /* stays in flow, can layer above others */
z-index: 900; /* above the static avatar buttons */
margin: 110px auto 4px; /* 110 px = header (90) + breathing room */
width: 92%;
text-align: left;
display: block !important; /* override inline 'display:none' */
}
.INSTRUCTIONS-bouquet-button-container {
position: relative;
z-index: 900;
width: 100%;
margin: 6px auto 18px;
justify-content: center;
flex-wrap: wrap;
display: flex !important; /* override inline 'display:none' */
}
/* =======================SIDE BAR================================
FIX: 2025-06-11 – Bouquet instructions in right bar
============================================================== */
:root {
--sidebar-width: 320px; /* tweak at will */
}
/* Right-hand sidebar container – anchors everything */
.right-sidebar {
position: fixed;
top: 110px; /* below the 90 px header + 20 px gap */
right: 10px;
width: var(--sidebar-width);
z-index: 1000; /* stays above posts */
/* NEW – make every child stack full-width */
display: flex;
flex-direction: column;
/*container ignores taps*/
pointer-events: none;
}
.right-sidebar *{
pointer-events: auto;
}
/* Sidebar container sticks under the header as you scroll */
.sidebar-sticky {
position: sticky;
top: 16px; /* space from the top while pinned */
align-self: start; /* helps in CSS grid layouts */
height: fit-content; /* avoid stretching the column height */
}
/* Every direct child stacks at full width inside the sidebar */
.right-sidebar > * { flex: 0 0 100%; }
/****** === Bouquet INSTRUCTIONS pill – steady blur *****============= */
.first-bouquet-text {
background-color: rgba(245,245,245,0.92); /* matches layout */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
/* ✨ prepare for scroll glow */
transition: box-shadow 0.25s ease, filter 0.25s ease;
}
/****** === Bouquet INSTRUCTIONS pill – steady blur - E N D *****============= */
/* === Glow while scrolling ================================== */
.first-bouquet-text.scroll-active {
filter: brightness(1.05) saturate(1.25);
box-shadow: 0 2px 8px rgba(0,0,0,0.16);
}
/* === Glow while scrolling - E N D================================== */
/* =====================================================================
2025-06-15 • 10 px breathing room for the Instructions pill
Applies to all screens so you always see the rounded right edge.
===================================================================== */
/* ❶ GLOBAL default — inline-block so pill hugs text */
body .first-bouquet-text {
display: inline-block; /* shrink to content + padding */
max-width: calc(100% - 20px); /* never touch viewport edges */
margin: 0 10px 2px 10px; /* top 0 | right 10 | bottom 2 | left 10 */
}
/* ❷ Desktop / tablet sidebar — equal side margins inside sidebar */
.right-sidebar .first-bouquet-text {
width: auto !important; /* override earlier 100 % or 92 % */
margin: 0 10px 8px 10px !important; /* top 0 | right 10 | bottom 8 | left 10 */
}
/* ❶ GLOBAL default — E N D */
/* Feed shifts left so it doesn't hide behind sidebar
──────────────────────────────────────────────────── */
@media (min-width: 1024px) {
.feed { margin-right: calc(var(--sidebar-width) + 30px); }
}
/* NEW: mid-width laptops (768 – 1023 px) */
@media (min-width: 768px) and (max-width: 1023px) {
.feed {
margin-right: calc(var(--sidebar-width) + 30px);
width: auto; /* ← override the old 95 % */
max-width: calc(100% - var(--sidebar-width) - 40px); /* respect sidebar */
}
.feed{
margin-right: calc(var(--sidebar-width) + 20px); /* room for new sidebar */
max-width: calc(100% - var(--sidebar-width) - 40px); /* always visible */
}
}
/* NARROW WIDESCREEN – shrink sidebar so it never overlaps feed */
@media (max-width: 1200px) {
:root { --sidebar-width: 260px; } /* was 320 */
}
/* ULTRA-NARROW WIDESCREEN – even slimmer (optional) */
/* =======================================================================
2025-06-15 FINAL TABLET LANDSCAPE FIX – bouquet bar locked to ONE row
Replaces the former @media (max-width: 1024px) rule
======================================================================= */
@media screen and (min-width: 768px) and (max-width: 1365px) and (orientation: landscape) {
/* keep sidebar wide enough on iPads */
:root { --sidebar-width: 300px; } /* roomy bar, was in old block */
/* 🎯 five-icon bouquet bar */
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
display: grid !important; /* beats old flex */
grid-auto-flow: column; /* single horizontal track */
grid-template-columns: repeat(5, 40px);
grid-auto-rows: 40px;
gap: 4px;
width: max-content;
margin: 0 auto;
}
/* 🚫 prevent icons from stretching & wrapping */
.right-sidebar .INSTRUCTIONS-bouquet-button-container
.INSTRUCTIONS-bouquet-small-button {
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
}
}
/* ===== END 2025-06-15 tablet landscape bouquet fix ==================== */
/* Bouquet instructions inside sidebar */
.right-sidebar .first-bouquet-text {
/* —— override global sticky settings —— */
position: static; /* was: sticky */
top: auto; /* clear old offset */
margin: 0 0 8px 0; /* normal spacing under header */
width: 100%; /* span full sidebar */
/* —— keep typography —— */
font-size: 14px;
font-weight: 500;
text-align: left;
}
@media (min-width: 1025px) { /* ← NEW wrapper */
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 4px;
width: 100%; /* NEW – occupy full sidebar width */
/* —— override the old fixed positioning —— */
position: static; /* was: fixed */
top: auto;
right: auto;
margin: 0; /* let the sidebar’s normal spacing take over */
}
}
/* Givers list now lives below instructions */
.right-sidebar .givers-list {
position: static;
margin-top: 18px;
}
/***** TABLETS & SMALL LAPTOPS (≤ 992 px) *******───────────── */
@media (max-width: 992px) {
/* Keep the header itself on one line */
.header {
flex-wrap: nowrap;
justify-content: flex-start; /* logo + nav row left-aligned */
}
/* Optional: shrink or hide the big title to free space */
.header h1 {
font-size: 16px; /* ↓ smaller text */
margin: 0 8px 0 0; /* tiny gap after logo */
white-space: nowrap; /* don’t break */
}
/* Nav row stays horizontal & scrollable */
.header-buttons {
flex: 1 1 auto; /* grow to fill remaining width */
display: flex;
flex-wrap: nowrap; /* never wrap */
overflow-x: auto; /* enables side-scroll if cramped */
gap: 8px;
padding-right: 160px; /* ⬅ NEW – width of the logout icon + gap */
margin: 0; /* kill old 10% + 550 px margins */
white-space: nowrap; /* keep buttons on one visual line */
}
/* Prevent buttons from flex-shrinking below icon width */
.header-buttons button { flex: 0 0 auto; }
/* ---- Header navigation row --------------------------------- */
/* Optional: tiny scrollbar so users know they can swipe/scroll */
.header-buttons::-webkit-scrollbar { height: 6px; }
.header-buttons::-webkit-scrollbar-thumb { background:#ccc;border-radius:3px; }
/******* KEEP THIS JUST IN CASE WE NEED IT LATER ON ***********/
/* ---- Two fixed avatar buttons (left side) ------------------ */
/* They block the feed on narrow screens, so hide them */
/** #staticButton, **/
/** #staticButton-insideHeaven { **/
/** display: none; **/
/* } **/
/******* END ***********/
/* ---- Bouquet “Instructions” overlay ------------------------ */
/* Let them flow naturally instead of fixed in top‑right corner */
.first-bouquet-text
{
position: static; /* exits fixed / sticky mode */
margin: 10px 0 0; /* simple spacing above feed */
right: auto; top: auto; margin-left: 0;
}
/* ---- Optional: hide the side Givers list IN PHONES AND TABLETS------------------- */
/* Uncomment if 300 px panel feels cramped below 992 px*/
/*.givers-list { display:none; }*/
}
/****** UNIVERSAL NAV FIX – applies to every width ≤ 1400 px
Keeps header nav icons on ONE horizontal row *******/
@media (max-width: 1920px) {
.header {
flex-wrap: nowrap;
justify-content: flex-start;
}
.header h1 {
font-size: 18px;
margin: 0 8px 0 0;
white-space: nowrap;
}
@media (max-width: 1024px) { .header h1 { font-size: 16px; } }
@media (max-width: 820px) { .header h1 { display: none; } }
.header-buttons {
flex: 1 1 auto;
display: flex;
flex-wrap: nowrap !important;
overflow-x: auto;
gap: 8px;
margin: 0 !important;
white-space: nowrap;
}
.header-buttons button { flex: 0 0 auto; }
}
/********** UNIVERSAL NAV FIX -----E N D *********/
/* MID-WIDTH (tablet landscape & narrow laptops) – move avatar buttons bottom-left */
/* HIDE static avatar buttons on every screen ≤ 1200 px */
@media (max-width: 767px) {
#staticButton,
#staticButton-insideHeaven {
display: none !important; /* beats any inline JS styles */
}
}
/********** (tablet landscape & narrow laptops) -----E N D *********/
/*****************************************************************/
/* ------------------ Phones / narrow tablets ------------------ */
@media (max-width: 768px) {
/* === ❶ Sticky sidebar under the header ==================== */
.right-sidebar {
position: sticky;
top: 110px; /* header(90) + 20 px gap */
width: 100%;
margin: 0 auto;
z-index: 999;
pointer-events: none;
}
/* === NEW: tighter Create-post spacing on phones ============= */
.post-form {
margin: 6rem auto 0; /* was 9rem globally */
}
/* === ❷ Feed: full width, starts *below* bouquet bar ======= */
.feed {
margin-right: 0;
margin-top: 95px; /* header 90 + text ~20 + buttons 40 + 5px */
}
/* === ❸ Hide big title & avatar buttons on phones ========= */
.header h1 { display: none; }
#staticButton,
#staticButton-insideHeaven { display: none; }
/* === ❹ Hide “List of GIVERS” panel on phones ============== */
body .givers-list { display: none !important; } /* beats inline JS */
/* === ❺ Instruction text (left-aligned) ==================== */
.right-sidebar .first-bouquet-text {
margin: 0 0 2px 10px; /* left 10 px, tiny gap below */
}
/* === ❻ Five-icon bouquet row (one line, left) ============= */
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
/* kill the old fixed offset that pushed it down */
position: relative; /* was fixed in global rule */
top: 0 !important; /* ← overrides old top:135px */
right: auto !important; /* clear old right:20px */
width: max-content; /* shrink to icon width */
margin: 0 0 10px 10px; /* tight under the text */
display: flex !important;
justify-content: flex-start;
flex-wrap: nowrap; /* never wrap on phones */
}
/* Disable sticky on small screens so it doesn’t fight the layout */
.sidebar-sticky {
position: static;
top: auto;
}
/* =========================================================
Mobile header / sticky sidebar / feed spacing alignment
- keep the sticky instructions fully below the fixed header
- keep the normal feed safely below that strip
- give Search-opened memorial feed a little extra room
========================================================= */
/* ❶ Sticky sidebar fully below the mobile header */
.right-sidebar {
top: calc(var(--header-h) + 8px);
}
/* ❷ Instructions pill fully visible */
.right-sidebar .first-bouquet-text {
margin: 0 10px 2px 10px !important;
}
/* ❸ Bouquet row tucked neatly under the instructions */
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
margin: 0 0 10px 10px !important;
}
/* ❹ Normal feed starts below the sticky strip */
.feed {
margin-top: 78px !important;
}
/* ❺ Search-opened memorial surface:
push the "Feed" row a little lower so it clears the strip */
.post-form[aria-hidden="true"] ~ .feed {
margin-top: 112px !important;
}
/* =========================================================
Mobile header / sticky sidebar / feed spacing alignment (E N D)
========================================================= */
/* ▶ Reserve 70 px on the right so nav buttons never slide under Logout */
.header {
overflow: hidden; /* clip anything that still tries */
}
/* === Curtain under the fixed Logout icon =================== */
.header::after{
content:"";
position:absolute;
top:0;
right:0;
width:80px; /* 40-px icon + ~40-px cushion */
height:100%;
background:#ffffff; /* same as header background */
pointer-events:none; /* let taps go through */
z-index:1000; /* below Logout (1100) */
}
}
/* === Hide-on-scroll helper (phones only) ========================= */
.hidden-on-scroll{
opacity:0; /* fade out */
pointer-events:none; /* ignore taps */
transition:opacity .35s ease;
}
/* ------------------ Phones / narrow tablets — END ------------ */
/***************************************************************/
/* === iPad Landscape hot-fix – keep 5 bouquets on one row === */
@media (max-width: 1024px) {
body .right-sidebar .INSTRUCTIONS-bouquet-button-container {
display: grid !important; /* strongest override */
grid-template-columns: repeat(5, 1fr); /* 5 equal slots */
grid-auto-rows: 40px; /* lock height */
gap: 4px;
width: max-content;
}
}
/* =====================================================================
2025-06-16 • Bouquet-button PILL – fits icons exactly
===================================================================== */
body .INSTRUCTIONS-bouquet-button-container,
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
/* Pill look (keep from Option B) */
background-color: rgba(245,245,245,0.92) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
/* Tight fit */
display: inline-flex !important; /* hug content */
width: max-content !important;
padding: 2px; /* just enough to show curve */
gap: 0; /* no gaps from flex */
}
body .INSTRUCTIONS-bouquet-button-container
.INSTRUCTIONS-bouquet-small-button {
margin: 0 !important; /* abolish per-icon margins */
}
/* =======================================================================
2025-06-16 • Bouquet button PILL — flush-fit version
✦ Lighter original grey (#F5F5F5 ≈ rgba(245,245,245,0.92))
✦ Pill height 44 px (40 px icon + 2 px cushion top & bottom)
✦ No side padding ▶ pill left/right edges align with icons
======================================================================= */
/* 1️⃣ Pill container — applies everywhere (sidebar + phone) */
body .INSTRUCTIONS-bouquet-button-container,
.right-sidebar .INSTRUCTIONS-bouquet-button-container {
/* —— Visual style —— */
background-color: rgba(245,245,245,0.92) !important; /* original grey */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
/* —— Geometry —— */
display: inline-flex !important; /* shrink-wrap to icons */
align-items: center !important; /* vertical centring */
width: max-content !important; /* width = icons only */
padding: 2px 0 !important; /* 2 px top/bottom, 0 sides */
height: auto !important; /* auto = 44 px (40 + 2 + 2) */
gap: 0; /* no flex gaps */
overflow: hidden; /* trims rounded ends flush */
}
/* 2️⃣ Each bouquet button inside the pill */
body .INSTRUCTIONS-bouquet-button-container
.INSTRUCTIONS-bouquet-small-button,
.right-sidebar .INSTRUCTIONS-bouquet-button-container
.INSTRUCTIONS-bouquet-small-button {
/* remove original 5 px padding so squares align */
padding: 0 !important;
margin: 0 !important;
/* lock each grey square to 40 × 40 px */
width: 40px !important;
height: 40px !important;
box-sizing: border-box;
}
/* You can fine-tune the curve thickness by changing the top/bottom
padding (currently 2 px). Increase for a fatter pill, set to 1 px
for slimmer edges. */
/******************************************************/
/******* 🗑 Delete-post trash-can **********/
.delete-post-btn{
background:transparent;
border:none;
padding:4px;
cursor:pointer;
position:absolute;
top:8px;
right:8px;
}
/* Darken only while .pressed is set in JS */
.delete-post-btn.pressed{
filter:brightness(0.8);
}
/* Extra hover for real mice only */
@media (hover:hover) and (pointer:fine){
.delete-post-btn:hover{ filter:brightness(0.8); }
}
/******* 🗑 Delete-post trash-can (END) **********/
/************ iOS/Android: prevent sticky tap-highlight on action buttons */
.delete-post-btn,
.like-btn, /* we'll add these class names in JS below */
.comment-btn{
-webkit-tap-highlight-color: transparent; /* kills grey flash */
}
/************ iOS/Android: prevent sticky tap-highlight on action buttons (E N D)****/
/********* --- tiny confirm modal ------------------------------------ */
.confirm-modal{
display:none; /* hidden by default */
position:fixed; inset:0;
background:rgba(0,0,0,0.45);
align-items:center; justify-content:center;
z-index:4000;
}
.confirm-box{
background:#fff; padding:16px 20px;
border-radius:10px; width:260px;
font:16px/1.4 "Segoe UI",sans-serif;
text-align:center;
}
.confirm-actions{ margin-top:14px; display:flex; gap:12px; justify-content:center }
.confirm-actions button{
flex:1 1 0; padding:6px 0; border:none; border-radius:6px;
background:#007bff; color:#fff; font-size:15px;
}
.confirm-actions button:last-child{ background:#aaa }
.confirm-actions button:active{ opacity:.7 } /* quick tap flash */
/********* --- tiny confirm modal (E N D)------------------------------------ */
/* =========================================================
Report Post V1
- non-owner top-right report pill
- glass modal for report reason + optional note
========================================================= */
.report-post-btn{
position:absolute;
top:10px;
right:10px;
z-index:6;
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 12px;
border:none;
border-radius:999px;
cursor:pointer;
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.01em;
background:rgba(15,23,42,0.72);
box-shadow:0 10px 24px rgba(0,0,0,0.18);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
-webkit-tap-highlight-color: transparent;
}
.report-post-btn:hover{
background:rgba(15,23,42,0.84);
}
.report-post-btn:active{
transform:translateY(1px);
}
.report-post-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(2,6,23,0.34);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
z-index:4200;
}
.report-post-modal.open{
display:flex;
}
.report-post-card{
width:min(500px, 92vw);
max-width:100%;
border-radius:26px;
border:1px solid rgba(226,232,240,0.16);
background:rgba(15,23,42,0.68);
box-shadow:
0 28px 70px rgba(0,0,0,0.34),
inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter:blur(22px) saturate(145%);
-webkit-backdrop-filter:blur(22px) saturate(145%);
overflow:hidden;
color:#f8fafc;
}
.report-post-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:18px 18px 0;
}
.report-post-title{
font-size:22px;
line-height:1.1;
font-weight:800;
color:#4ade80;
}
.report-post-close{
border:none;
background:transparent;
color:rgba(248,250,252,0.88);
font-size:28px;
line-height:1;
cursor:pointer;
}
.report-post-copy{
margin:10px 18px 0;
color:rgba(226,232,240,0.88);
font-size:14px;
line-height:1.5;
}
/* =========================================================
Report Profile/User V1 — premium modal layout polish
- keeps the existing beautiful dark/glass background
- fixes title spacing, modern select, textarea alignment, and compact actions
========================================================= */
#reportProfileModal .report-post-card{
position:relative;
box-sizing:border-box;
width:min(500px, calc(100vw - 34px));
max-height:calc(100dvh - 42px);
overflow:auto;
padding:0;
}
#reportProfileModal .report-post-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
padding:22px 22px 0;
}
#reportProfileModal .report-post-eyebrow{
margin:0 0 7px;
color:rgba(74,222,128,0.92);
font-size:12px;
line-height:1.1;
font-weight:900;
letter-spacing:0.08em;
text-transform:uppercase;
}
#reportProfileModal .report-post-header h3{
margin:0;
color:#f8fafc;
font-size:24px;
line-height:1.12;
font-weight:900;
letter-spacing:-0.03em;
}
#reportProfileModal .report-post-close{
flex:0 0 auto;
width:38px;
height:38px;
display:grid;
place-items:center;
margin:-5px -5px 0 0;
border:1px solid rgba(226,232,240,0.14);
border-radius:999px;
background:rgba(15,23,42,0.48);
color:rgba(248,250,252,0.9);
font-size:24px;
line-height:1;
}
#reportProfileModal .report-post-copy{
margin:14px 22px 0;
color:rgba(226,232,240,0.84);
font-size:14px;
line-height:1.5;
}
#reportProfileModal .report-post-label{
display:block;
margin:16px 22px 8px;
color:rgba(226,232,240,0.88);
font-size:13px;
line-height:1.2;
font-weight:900;
}
#reportProfileModal .report-post-select{
display:block;
width:calc(100% - 44px);
min-height:48px;
margin:0 22px;
padding:0 44px 0 14px;
border:1px solid rgba(74,222,128,0.28);
border-radius:16px;
outline:none;
appearance:none;
-webkit-appearance:none;
box-sizing:border-box;
color:#f8fafc;
font:inherit;
font-size:14px;
font-weight:800;
background:
linear-gradient(45deg, transparent 50%, rgba(248,250,252,0.78) 50%) right 18px center / 7px 7px no-repeat,
linear-gradient(135deg, rgba(248,250,252,0.78) 50%, transparent 50%) right 13px center / 7px 7px no-repeat,
rgba(15,23,42,0.62);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 10px 26px rgba(0,0,0,0.16);
}
#reportProfileModal .report-post-select:focus{
border-color:rgba(74,222,128,0.62);
box-shadow:
0 0 0 3px rgba(34,197,94,0.14),
inset 0 1px 0 rgba(255,255,255,0.05);
}
#reportProfileModal .report-post-textarea{
display:block;
width:calc(100% - 44px);
min-height:112px;
margin:0 22px;
padding:13px 14px;
border:1px solid rgba(226,232,240,0.14);
border-radius:18px;
outline:none;
resize:vertical;
box-sizing:border-box;
color:#f8fafc;
font:inherit;
font-size:14px;
line-height:1.45;
background:rgba(255,255,255,0.07);
}
#reportProfileModal .report-post-textarea::placeholder{
color:rgba(226,232,240,0.52);
}
#reportProfileModal .report-post-textarea:focus{
border-color:rgba(74,222,128,0.48);
box-shadow:0 0 0 3px rgba(34,197,94,0.12);
}
#reportProfileModal .report-post-message{
min-height:18px;
margin:10px 22px 0;
color:rgba(248,113,113,0.92);
font-size:13px;
font-weight:800;
line-height:1.35;
}
#reportProfileModal .report-post-actions{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:12px;
margin:18px 22px 22px;
}
#reportProfileModal .report-post-actions button{
width:auto;
min-width:118px;
min-height:42px;
padding:0 18px;
border-radius:999px;
font-size:13px;
}
#reportProfileModal .report-post-submit{
min-width:142px;
}
@media (max-width: 420px){
#reportProfileModal .report-post-card{
width:calc(100vw - 28px);
max-height:calc(100dvh - 34px);
}
#reportProfileModal .report-post-header{
padding:20px 18px 0;
}
#reportProfileModal .report-post-copy,
#reportProfileModal .report-post-label,
#reportProfileModal .report-post-message{
margin-left:18px;
margin-right:18px;
}
#reportProfileModal .report-post-select,
#reportProfileModal .report-post-textarea{
width:calc(100% - 36px);
margin-left:18px;
margin-right:18px;
}
#reportProfileModal .report-post-actions{
margin:17px 18px 20px;
gap:10px;
}
#reportProfileModal .report-post-actions button{
min-width:104px;
padding:0 14px;
}
#reportProfileModal .report-post-submit{
min-width:132px;
}
}
/* =========================================================
Report Profile/User V1 — premium modal layout polish (E N D)
========================================================= */
.report-post-form{
padding:16px 18px 18px;
}
.report-post-reasons{
display:grid;
gap:10px;
}
.report-post-reason{
display:flex;
align-items:flex-start;
gap:10px;
padding:12px 13px;
border-radius:16px;
border:1px solid rgba(226,232,240,0.12);
background:rgba(255,255,255,0.05);
cursor:pointer;
}
.report-post-reason input{
margin-top:2px;
}
.report-post-reason span{
color:#f8fafc;
font-size:14px;
line-height:1.35;
}
.report-post-note-wrap{
display:block;
margin-top:14px;
}
.report-post-note-label{
display:block;
margin-bottom:8px;
color:rgba(226,232,240,0.88);
font-size:13px;
font-weight:700;
}
.report-post-note-wrap textarea{
width:100%;
min-height:110px;
resize:vertical;
border:none;
border-radius:16px;
padding:12px 13px;
font:inherit;
color:#f8fafc;
background:rgba(255,255,255,0.07);
box-sizing:border-box;
}
.report-post-note-wrap textarea::placeholder{
color:rgba(226,232,240,0.56);
}
.report-post-actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:16px;
}
.report-post-actions button{
min-height:46px;
padding:0 16px;
border:none;
border-radius:14px;
cursor:pointer;
font-weight:800;
font-size:14px;
}
.report-post-cancel{
background:rgba(255,255,255,0.12);
color:#f8fafc;
}
.report-post-submit{
background:rgba(34,197,94,0.22);
color:#f0fdf4;
border:1px solid rgba(74,222,128,0.26);
}
.report-post-submit:disabled{
opacity:0.6;
cursor:not-allowed;
}
@media (max-width: 768px){
.report-post-btn{
top:8px;
right:8px;
padding:6px 10px;
font-size:11px;
}
.report-post-card{
width:min(94vw, 460px);
border-radius:24px;
}
.report-post-actions{
flex-direction:column-reverse;
}
/* =========================================================
Mobile sizing for tiny "Reported" pill
- keep the action rail compact on phones
========================================================= */
.post-user-info.post-user-info--with-reported{
padding-right: 138px;
}
.post-top-actions .report-post-btn.is-reported{
min-width: 58px;
height: 24px;
padding: 0 8px;
font-size: 9.5px;
}
/* =========================================================
Mobile sizing for tiny "Reported" pill (E N D)
========================================================= */
}
/* =========================================================
Report Post V1 (E N D)
========================================================= */
/* ==============================================================
FINAL LOCK – Logout icon & nav-row buffer (added 2025-06-19)
Guarantees:
• Logout button is always fixed top-right on EVERY width
• Nav-row can never scroll past the icon
============================================================== */
/* 1️⃣ Logout button – strongest override */
.logout-button{
position:fixed !important;
top:6px !important;
right:12px !important;
z-index:1100 !important; /* above header & nav row */
}
/* 2️⃣ Nav row buffer – phones & tablets (≤ 992 px) */
@media (max-width: 992px){
.header-buttons{
padding-right:72px !important; /* 40 px icon + 32 px gap */
}
}
/* ===========================================================
LOGIN-/SIGN-UP mini-layout (added 2025-06-27)
-----------------------------------------------------------
• Stacks every label/input together (.auth-field)
• Keeps the two “forgot …” links on one tidy line
• Puts Login + Create buttons on one row, right-aligned
• Adds blue + grey button palettes you can reuse everywhere
=========================================================== */
.auth-field{
display:flex;
flex-direction:column;
margin-bottom:12px;
}
.auth-field label{ margin-bottom:4px; font-weight:600; }
.auth-field input{
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}
.link-row{
display:flex;
justify-content:space-between; /* puts each link at an edge */
margin-bottom:16px;
font-size:0.9rem;
}
.link-row a{
text-decoration:none;
color:#007bff;
}
.link-row a:hover{ text-decoration:underline; }
.btn-row{
display:flex;
gap:12px;
justify-content:flex-end; /* buttons hug the right side */
}
/* Re-usable button palettes
(keeps global “button { … }” for generic default) */
.btn-primary{
background:#007bff;
color:#fff;
border:none;
padding:8px 16px;
border-radius:4px;
cursor:pointer;
}
.btn-secondary{
background:#6c757d;
color:#fff;
border:none;
padding:8px 16px;
border-radius:4px;
cursor:pointer;
}
.btn-primary:hover { background:#0056b3; }
.btn-secondary:hover { background:#545b62; }
/* ===================LOGIN-/SIGN-UP mini-layout (E N D)======================================== */
/*****************************************************************/
/* ===== Pre-login: default-hidden fixed avatar buttons ========= */
#staticButton,
#staticButton-insideHeaven {
display: none; /* CSS default = hidden */
}
/* They’re shown later via showUserInterface() with inline style */
/* ===== Pre-login: (E N D))========= */
/*****************************************************************/
/* Tiny inline error text */
.error-text{
color:#dc3545;
font-size:0.85rem;
margin-top:4px;
}
.input-error{
border:1px solid #dc3545 !important; }
/* === FINAL OVERRIDE: show fixed avatar buttons on tablets ============ */
@media (min-width: 768px) and (max-width: 1024px) {
#staticButton-insideHeaven {
left: 10px !important;
top: 245px !important; /* below the profile pill */
z-index: 900 !important; /* under .profile-controls (1300) */
transform: scale(0.85);
}
}
/* ===================================================================== */
/* universal tiny avatar */
#avatar,
.avatar,
.avatar-miniature {
width : 40px; /* or 25px if you prefer smaller */
height: 40px;
border-radius: 50%;
object-fit: cover; /* crop instead of stretching */
}
/* --------------------------------------------------
PHONE bottom-nav (keeps ALL buttons, with arrows)
-------------------------------------------------- */
@media (max-width: 767px){
/* sticky header stays, we’re only styling the bottom nav */
.mobile-nav{
position: fixed;
left: 0; right: 0; bottom: 0;
/* Always kiss the device edge; content clears the home-indicator */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
/* Normalize bar height (no double-count). Chrome will feel less tall too. */
height: 56px;
background: #fff;
border-top: 1px solid #ccc;
display: flex; align-items: center;
z-index: 1100;
/* movement handled via iOS-only override; keep base neutral */
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0); /* composite the bar; avoids tiny desyncs */
contain: layout paint; /* isolate layout/paint for stability */
}
.header-buttons{
flex:1 1 auto; display:flex; overflow-x:auto;
scroll-behavior:smooth; /* finger glide */
}
.header-buttons::-webkit-scrollbar{ display:none; } /* hide chrome */
.feed{ padding-bottom: calc(70px + env(safe-area-inset-bottom)); } /* keeps posts above bar */
/* arrows overlay at the hard edges */
.scroll-arrow{
flex:0 0 48px; height:48px; margin:0;
background:#fff; border:none; font-size:22px; color:#666;
display:flex; align-items:center; justify-content:center;
}
.scroll-arrow:active{ filter:brightness(.9); } /* ripple */
}
.scroll-arrow img{ pointer-events:none; } /* whole button stays clickable */
@media (max-width:767px){
.header .header-buttons{ display:none; }
}
/* === Altar frames – square container (v3) ============================= */
.frame-wrapper {
position: relative;
display: block;
aspect-ratio: 1 / 1; /* perfect square */
overflow: hidden;
max-width: 600px;
margin: 0 auto;
}
/* neutral matte + soft blur halo */
.frame-wrapper::before {
content: '';
position: absolute;
inset: 0;
background:#7c543c; /* slightly darker grey */
filter:blur(15px); /* stronger, softer halo */
transform: scale(1.05); /* spill a bit past the edge for softness */
z-index: 0;
pointer-events: none;
}
/* ornate PNG frame */
.frame-wrapper::after {
z-index: 3; /* always on top */
}
/* media itself */
.frame-wrapper img,
.frame-wrapper video{
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
object-fit: contain;
object-position: 50% 50%;
margin: auto;
border-radius: 8px;
z-index: 1;
/* NEW — tell browsers “give me all touch events, don’t scroll” */
touch-action:none;
}
/* === Mobile fine-tune: full-width square & flex-centred === */
@media (max-width: 767px){
.frame-wrapper{
width: 100%; /* fill the card */
max-width: none; /* override 600 px cap */
display:flex; /* ↓ centres child before JS runs */
align-items:center;
justify-content:center;
}
}
/* Fallback for older Safari / Edge (no aspect-ratio) */
@supports not (aspect-ratio: 1 / 1) {
.frame-wrapper::before {
content: '';
float: left;
padding-top: 100%; /* 1 : 1 square */
}
.frame-wrapper::after {
content: '';
display: table;
clear: both;
}
}
/* One ::after rule per frame */
.frame-lyla::after,
.frame-monarchy::after,
.frame-old-new-york::after, /* <-- ALL LOWERCASE, HYPHENS */
.frame-royal::after,
.frame-victorian::after,
.frame-waldorf-astoria::after, /* <-- ALL LOWERCASE, HYPHENS */
.frame-comodore::after,
.frame-kennedy::after {
content: '';
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}
.frame-lyla::after { background-image: url('/images/frames/lyla.png'); }
.frame-monarchy::after { background-image: url('/images/frames/monarchy.png'); }
.frame-old-new-york::after { background-image: url('/images/frames/old-new-york.png'); } /* <-- ALL LOWERCASE, HYPHENS */
.frame-royal::after { background-image: url('/images/frames/royal.png'); }
.frame-victorian::after { background-image: url('/images/frames/victorian.png'); }
.frame-waldorf-astoria::after { background-image: url('/images/frames/waldorf-astoria.png'); } /* <-- ALL LOWERCASE, HYPHENS */
.frame-comodore::after { background-image: url('/images/frames/comodore.png'); }
.frame-kennedy::after { background-image: url('/images/frames/kennedy.png'); }
/* keep the ornate PNG above the media */
.frame-wrapper::after {
z-index: 3; /* > image (1) > blur layer (0) */
}
/* Images become free-floating when zoomable */
.frame-wrapper img{
position:absolute;
top:50%; left:50%; /* centre reference for translate() */
transform:translate(-50%, -50%) scale(1);
transform-origin:center;
}
/***************************************************/
/* ===== Altar 2.0 — Album strip look & feel ===== */
.album-strip {
position: relative;
display: flex;
align-items: center;
gap: 12px;
overflow-x: auto;
padding: 10px 12px;
min-height: 110px;
border-radius: 14px;
background: rgba(14,16,20,0.65);
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 8px 20px rgba(0,0,0,0.28);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* subtle “flip-flop” sheen */
.album-strip::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
background-size: 200% 100%;
pointer-events: none;
opacity: .25;
animation: albumSheen 8s linear infinite;
border-radius: inherit;
}
@keyframes albumSheen {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* hide heavy scrollbars while keeping accessibility */
.album-strip::-webkit-scrollbar { height: 8px; }
.album-strip::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 10px;
}
.album-strip { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
/* Each thumbnail holder */
.album-thumb {
position: relative;
flex: 0 0 auto;
width: 120px;
height: 82px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
overflow: hidden;
display: grid;
place-items: center;
transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.album-thumb:hover {
transform: translateY(-1px);
filter: brightness(1.25);
border-color: rgba(255,255,255,0.22);
}
/* Real media inside thumb */
.album-thumb img,
.album-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Ghost placeholders when empty (teach side-scroll) */
.album-thumb.ghost {
background:
radial-gradient(120px 60px at 40% 30%, rgba(255,255,255,0.08), transparent 60%),
rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.18);
}
/* Delete pill (owner only) */
.album-del {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,0.55);
color: #fff;
font-weight: 700;
cursor: pointer;
line-height: 22px;
display: grid;
place-items: center;
}
/* +Add CTA inside strip */
.album-add-btn {
order: -1; /* 👈 move to the beginning */
flex: 0 0 auto;
padding: 8px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.06);
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.album-add-btn:hover {
filter: brightness(1.2);
border-color: rgba(255,255,255,0.26);
}
/* ===== Altar 2.0 — Album strip look & feel (E N D)===== */
/***************************************************/
/* =====================================================================
Fix #2 — LIGHTBOX (Album) visuals
===================================================================== */
.mohe-lightbox-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
/* hidden by default so it can't intercept taps */
display: none;
pointer-events: none;
align-items: center;
justify-content: center;
z-index: 3000; /* above everything */
}
.mohe-lightbox-content{
max-width: 92vw;
max-height: 90vh;
}
.mohe-lightbox-media{
display: block;
max-width: 92vw;
max-height: 90vh;
}
.mohe-lightbox-close{
position: absolute;
top: 12px;
right: 18px;
font-size: 40px;
color: #fff;
background: none;
border: none;
cursor: pointer;
line-height: 1;
}
.mohe-lightbox-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px;
color: #fff;
background: none;
border: none;
cursor: pointer;
padding: 8px 12px;
}
.mohe-lightbox-arrow.mohe-left { left: 12px; }
.mohe-lightbox-arrow.mohe-right{ right: 12px; }
/* ==============Fix #2 — LIGHTBOX (Album) visuals (E N D)============== */
/* ===================================================================== */
/* =====================================================================
Fix #2.1 — Lightbox animation + swipe helpers
===================================================================== */
.mohe-lightbox-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
/* hidden by default so it can't intercept taps */
display: none;
pointer-events: none;
align-items: center;
justify-content: center;
z-index: 3000;
opacity: 0; /* fade-in */
transition: opacity .18s ease-out;
}
.mohe-lightbox-backdrop.show{
/* only when shown, it should exist and accept input */
display: flex;
pointer-events: auto;
opacity: 1;
}
.mohe-lightbox-content{
max-width: 92vw;
max-height: 90vh;
transform: scale(.985); /* small scale-in */
opacity: 0;
transition: transform .18s ease-out, opacity .18s ease-out;
will-change: transform, opacity;
}
.mohe-lightbox-backdrop.show .mohe-lightbox-content{
transform: scale(1);
opacity: 1;
}
.mohe-lightbox-media{
display: block;
max-width: 92vw;
max-height: 90vh;
user-select: none;
-webkit-user-drag: none;
touch-action: pan-y; /* allow vertical scroll intent */
}
.mohe-lightbox-close{
position: absolute;
top: 12px;
right: 18px;
font-size: 40px;
color: #fff;
background: none;
border: none;
cursor: pointer;
line-height: 1;
}
.mohe-lightbox-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 36px;
color: #fff;
background: none;
border: none;
cursor: pointer;
padding: 8px 12px;
}
.mohe-lightbox-arrow.mohe-left { left: 12px; }
.mohe-lightbox-arrow.mohe-right{ right: 12px; }
/* Swipe feedback: turn off transitions while finger is down */
.mohe-swipe-active .mohe-lightbox-content{
transition: none !important;
}
/* ====Fix #2.1 — Lightbox animation + swipe helpers (E N D)============ */
/* ===================================================================== */
/* =====================================================================
Fix #3 — Album upload progress chip
===================================================================== */
.album-upload-chip{
position: absolute; /* anchored to the .album-strip */
right: 12px;
bottom: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
color: #fff;
background: rgba(25,28,35,0.75);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
backdrop-filter: blur(10px) saturate(120%);
box-shadow: 0 8px 18px rgba(0,0,0,0.35);
pointer-events: none; /* never block clicks */
z-index: 2;
opacity: 0;
transform: translateY(6px);
transition: opacity .18s ease-out, transform .18s ease-out;
}
.album-upload-chip.show{ opacity: 1; transform: translateY(0); }
.album-upload-chip .label{ opacity:.9; letter-spacing:.2px; }
.album-upload-chip .pct{ font-weight:800; }
.album-upload-chip .rail{
width: 120px; height: 4px; border-radius: 999px; overflow: hidden;
background: rgba(255,255,255,0.12);
}
.album-upload-chip .bar{
width: 0%; height: 100%;
background: rgba(255,255,255,0.85);
transition: width .15s linear;
}
.album-upload-chip.ok{ background: rgba(21,108,43,0.78); }
.album-upload-chip.err{ background: rgba(138,28,28,0.80); }
/* (already present) .album-strip is position:relative; we rely on that */
/* ====Fix #3 — Album upload progress chip (E N D)============ */
/* ===================================================================== */
/* =========================================================
Album thumb removal — 120ms dissolve
========================================================= */
.album-strip .album-thumb{
transition: opacity .12s ease, transform .12s ease;
}
.album-strip .album-thumb.mohe-removing{
opacity: 0;
transform: scale(.92);
filter: saturate(.6);
}
/* Album delete confirmation modal (START)
Protects album media from accidental one-tap deletion. */
.album-delete-confirm-backdrop {
position: fixed;
inset: 0;
z-index: 99980;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
background:
radial-gradient(circle at top, rgba(20, 184, 111, 0.18), transparent 34%),
rgba(5, 8, 12, 0.76);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.album-delete-confirm-modal {
position: relative;
width: min(420px, 100%);
max-height: min(86vh, 720px);
overflow-y: auto;
border-radius: 26px;
padding: 24px 20px 18px;
color: #f8fafc;
text-align: center;
background:
linear-gradient(180deg, rgba(24, 31, 40, 0.96), rgba(10, 14, 20, 0.97));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.58),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.album-delete-confirm-close {
position: absolute;
top: 12px;
right: 14px;
width: 34px;
height: 34px;
border: 0;
border-radius: 999px;
color: rgba(255, 255, 255, 0.82);
background: rgba(255, 255, 255, 0.08);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.album-delete-confirm-icon {
width: 44px;
height: 44px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 999px;
color: #10b981;
font-size: 25px;
font-weight: 900;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.36);
box-shadow: 0 0 24px rgba(16, 185, 129, 0.18);
}
.album-delete-confirm-title {
margin: 0 0 8px;
font-size: 1.18rem;
line-height: 1.22;
font-weight: 800;
letter-spacing: -0.02em;
}
.album-delete-confirm-title span,
.album-delete-confirm-copy span {
color: #10b981;
}
.album-delete-confirm-copy {
margin: 0 auto 16px;
max-width: 34ch;
color: rgba(226, 232, 240, 0.84);
font-size: 0.94rem;
line-height: 1.45;
}
.album-delete-confirm-preview {
width: min(210px, 72vw);
aspect-ratio: 1 / 1;
margin: 0 auto 18px;
overflow: hidden;
border-radius: 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}
.album-delete-confirm-media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.album-delete-confirm-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.album-delete-confirm-keep,
.album-delete-confirm-remove {
min-height: 44px;
border: 0;
border-radius: 999px;
padding: 0 14px;
font-size: 0.93rem;
font-weight: 800;
cursor: pointer;
}
.album-delete-confirm-keep {
color: #052016;
background: linear-gradient(135deg, #34d399, #10b981);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.24);
}
.album-delete-confirm-remove {
color: #fff;
background: linear-gradient(135deg, #b42318, #7f1d1d);
box-shadow: 0 12px 28px rgba(127, 29, 29, 0.28);
}
.album-delete-confirm-remove:disabled {
opacity: 0.7;
cursor: wait;
}
@media (max-width: 420px) {
.album-delete-confirm-backdrop {
padding: 16px;
align-items: flex-end;
}
.album-delete-confirm-modal {
width: 100%;
border-radius: 26px 26px 22px 22px;
padding: 24px 16px 16px;
}
.album-delete-confirm-actions {
grid-template-columns: 1fr;
}
.album-delete-confirm-keep,
.album-delete-confirm-remove {
width: 100%;
}
}
/* Album delete confirmation modal (END) */
.album-strip.mohe-busy{
pointer-events: none; /* avoid double taps while removing */
}
/* ====Album thumb removal — 120ms dissolve (E N D)============ */
/* ===================================================================== */
/* =========================================================
Bouquets should render above the ornate frame
========================================================= */
.frame-wrapper .bouquet-overlay{
position: absolute;
z-index: 5; /* higher than .frame-wrapper::after (z:3) */
pointer-events: none; /* decorative; don’t block taps */
}
/* ====Bouquets should render above the ornate frame (E N D)============ */
/* ***********************************************************************/
/* =========================================================
/* ===== Bouquets rail (between frame and album) ===== */
/*========================================================= */
.bouquet-layer{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end; /* stems align like real bouquets */
gap: 0; /* ✅ overlap is controlled by JS (20%) */
margin: 12px 0 8px;
position: static !important;
}
/* Reset any legacy absolute styles on images */
.bouquet-layer .bouquet-overlay{
display: block;
width: 40px;
height: 40px;
object-fit: contain; /* ✅ photo-real PNGs keep shape */
pointer-events: none;
position: relative; /* ✅ required so z-index from JS works */
transform-origin: bottom center;
will-change: transform; /* smoother pop on mobile */
--tilt: 0deg;
--jitter: 0px;
transform: translateY(var(--jitter)) rotate(var(--tilt));
filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
transition: transform 180ms ease, filter 180ms ease;
}
.bouquet-bigpop{
animation: bouquet-bigpop 2200ms cubic-bezier(.18,.9,.22,1) both;
z-index: 5;
}
@keyframes bouquet-bigpop{
0%{
transform: translateY(calc(var(--jitter) + 10px)) scale(.72) rotate(var(--tilt));
filter: drop-shadow(0 0 0 rgba(16,185,129,0)) saturate(1.05);
opacity: .55;
}
16%{
transform: translateY(calc(var(--jitter) - 8px)) scale(1.55) rotate(var(--tilt));
filter:
drop-shadow(0 0 14px rgba(16,185,129,.62))
drop-shadow(0 10px 18px rgba(0,0,0,.30))
saturate(1.22);
opacity: 1;
}
36%{
transform: translateY(var(--jitter)) scale(1.08) rotate(var(--tilt));
filter:
drop-shadow(0 0 8px rgba(16,185,129,.42))
drop-shadow(0 5px 10px rgba(0,0,0,.24))
saturate(1.15);
}
58%{
transform: translateY(calc(var(--jitter) - 4px)) scale(1.28) rotate(var(--tilt));
filter:
drop-shadow(0 0 16px rgba(16,185,129,.58))
drop-shadow(0 8px 16px rgba(0,0,0,.26))
saturate(1.22);
}
78%{
transform: translateY(var(--jitter)) scale(1.04) rotate(var(--tilt));
filter:
drop-shadow(0 0 7px rgba(16,185,129,.30))
drop-shadow(0 3px 7px rgba(0,0,0,.20))
saturate(1.12);
}
100%{
transform: translateY(var(--jitter)) scale(1) rotate(var(--tilt));
filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)) saturate(1.05);
opacity: 1;
}
}
.chip-bounce{
animation: chip-bounce 520ms cubic-bezier(.2,.9,.2,1);
}
@keyframes chip-bounce{
0% { transform: scale(1); }
35% { transform: scale(1.22); }
70% { transform: scale(.96); }
100% { transform: scale(1); }
}
.bouquet-confetti{
position:absolute;
width:1px;
height:1px;
pointer-events:none;
z-index: 9999;
}
.bouquet-confetti .confetti-piece{
position:absolute;
left:0;
top:0;
width:7px;
height:12px;
border-radius: 999px;
background: hsl(var(--h) 70% 80% / 0.95);
box-shadow: 0 2px 6px rgba(0,0,0,.18);
transform: translate(0,0) rotate(0deg);
animation: confetti-fly 1900ms ease-out forwards;
}
@keyframes confetti-fly{
0% { transform: translate(0,0) rotate(0deg) scale(1); opacity:1; }
100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.2); opacity:0; }
}
/* ====Bouquets rail (between frame and album) (E N D)============ */
/* *********************************************************/
/* *********************************************************/
/* Hide any accidental bouquet icons dropped inside the frame */
.media-container > img[src*="Bouquet"] {
display: none !important;
}
/* ====Hide any accidental bouquet icons (E N D)============ */
/* *********************************************************/
/* =========================================================
Onboarding / Activation V1
- gentle starter card above the feed tabs
========================================================= */
.activation-start-card {
position: relative;
margin: 14px 0 16px;
padding: 18px;
border-radius: 20px;
border: 1px solid rgba(34, 197, 94, 0.28);
background:
radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 34%),
rgba(255, 255, 255, 0.96);
box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
color: #111827;
}
.activation-start-card[hidden] {
display: none !important;
}
.activation-start-copy {
padding-right: 34px;
}
.activation-start-kicker {
margin: 0 0 4px;
font-size: 0.78rem;
font-weight: 800;
color: #16803a;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.activation-start-copy h3 {
margin: 0 0 6px;
font-size: 1.12rem;
line-height: 1.2;
color: #111827;
}
.activation-start-copy p:last-child {
margin: 0;
color: #4b5563;
line-height: 1.45;
}
.activation-start-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.activation-start-btn {
border: 1px solid rgba(22, 128, 58, 0.32);
background: rgba(255, 255, 255, 0.9);
color: #166534;
border-radius: 999px;
padding: 9px 13px;
font-size: 0.88rem;
font-weight: 800;
cursor: pointer;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.activation-start-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(22, 128, 58, 0.14);
}
.activation-start-btn.primary {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: rgba(22, 128, 58, 0.4);
color: #ffffff;
}
.activation-start-dismiss {
position: absolute;
top: 12px;
right: 12px;
width: 30px;
height: 30px;
border: 1px solid rgba(17, 24, 39, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: #64748b;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.activation-start-dismiss:hover {
color: #111827;
background: #ffffff;
}
/* =========================================================
Empty Feed / First Session Guidance V2-A
- animated first-memory guide for new/quiet Home feeds
- CSS lives here; app.js only renders behavior/markup
========================================================= */
.activation-empty-feed-guidance {
position: relative;
margin: 14px 0 18px;
padding: 18px;
border: 1px solid rgba(34, 197, 94, 0.26);
border-radius: 24px;
color: #f8fafc;
background:
radial-gradient(circle at 12% 4%, rgba(34, 197, 94, 0.22), transparent 32%),
radial-gradient(circle at 92% 18%, rgba(16, 185, 129, 0.16), transparent 28%),
linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.94));
box-shadow:
0 22px 58px rgba(0, 0, 0, 0.26),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
overflow: hidden;
isolation: isolate;
}
.activation-empty-feed-guidance::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.10) 24%, transparent 46%);
transform: translateX(-120%);
animation: activationEmptyGuideSheen 4s ease-in-out infinite;
z-index: -1;
}
.activation-empty-feed-guidance--v2a {
display: grid;
grid-template-columns: minmax(0, 1fr) 170px;
gap: 18px;
align-items: center;
}
.activation-empty-feed-guidance__content {
min-width: 0;
}
.activation-empty-feed-guidance__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
color: rgba(240, 253, 244, 0.92);
background: rgba(15, 23, 42, 0.56);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20);
font-size: 20px;
font-weight: 750;
line-height: 1;
cursor: pointer;
transition:
transform 0.16s ease,
background 0.16s ease,
border-color 0.16s ease;
}
.activation-empty-feed-guidance__close:hover {
transform: translateY(-1px);
border-color: rgba(134, 239, 172, 0.35);
background: rgba(34, 197, 94, 0.14);
}
.activation-empty-feed-guidance__eyebrow {
margin: 0 0 7px;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(134, 239, 172, 0.96);
}
.activation-empty-feed-guidance__title {
margin: 0 0 8px;
font-size: clamp(20px, 3.5vw, 27px);
line-height: 1.08;
font-weight: 900;
color: #ffffff;
letter-spacing: -0.025em;
}
.activation-empty-feed-guidance__text {
max-width: 46rem;
margin: 0 0 15px;
font-size: 14px;
line-height: 1.5;
color: rgba(226, 232, 240, 0.9);
}
.activation-empty-feed-guide {
position: relative;
display: grid;
gap: 10px;
margin: 14px 0 16px;
padding: 4px 0 4px 2px;
}
.activation-empty-feed-guide__line {
position: absolute;
left: 10px;
top: 17px;
bottom: 18px;
width: 2px;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgba(134, 239, 172, 0.15),
rgba(34, 197, 94, 0.78),
rgba(134, 239, 172, 0.15)
);
overflow: hidden;
}
.activation-empty-feed-guide__line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.95), transparent);
transform: translateY(-100%);
animation: activationEmptyGuideLineFlow 2.8s ease-in-out infinite;
}
.activation-empty-feed-guide__step {
position: relative;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
align-items: start;
opacity: 0;
transform: translateY(8px);
animation: activationEmptyGuideStepIn 5.6s ease-in-out infinite;
}
.activation-empty-feed-guide__step--write {
animation-delay: 0s;
}
.activation-empty-feed-guide__step--media {
animation-delay: 0.45s;
}
.activation-empty-feed-guide__step--post {
animation-delay: 0.9s;
}
.activation-empty-feed-guide__dot {
position: relative;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 999px;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.13),
0 0 24px rgba(34, 197, 94, 0.34);
}
.activation-empty-feed-guide__dot::after {
content: "";
position: absolute;
inset: 5px;
border-radius: inherit;
background: #052e16;
opacity: 0.82;
}
.activation-empty-feed-guide__step strong {
display: block;
margin-bottom: 2px;
color: #ffffff;
font-size: 13px;
line-height: 1.22;
}
.activation-empty-feed-guide__step span:not(.activation-empty-feed-guide__dot) {
display: block;
color: rgba(203, 213, 225, 0.78);
font-size: 12px;
line-height: 1.3;
}
.activation-empty-feed-guidance__actions {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
}
.activation-empty-feed-guidance__button {
appearance: none;
border-radius: 999px;
padding: 10px 14px;
font-size: 13px;
font-weight: 850;
cursor: pointer;
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
border-color 0.16s ease,
background 0.16s ease;
}
.activation-empty-feed-guidance__button:hover {
transform: translateY(-1px);
}
.activation-empty-feed-guidance__button--primary {
border: 1px solid rgba(134, 239, 172, 0.46);
color: #052e16;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow: 0 14px 30px rgba(34, 197, 94, 0.26);
}
.activation-empty-feed-guidance__button--secondary {
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(240, 253, 244, 0.92);
background: rgba(255, 255, 255, 0.075);
}
.activation-empty-feed-guidance__button--secondary:hover {
border-color: rgba(134, 239, 172, 0.30);
background: rgba(34, 197, 94, 0.12);
}
.activation-empty-feed-guidance__hint {
margin: 11px 0 0;
font-size: 12px;
color: rgba(203, 213, 225, 0.72);
}
.activation-empty-feed-visual {
position: relative;
min-height: 188px;
display: grid;
place-items: center;
}
.activation-empty-feed-visual__glow {
position: absolute;
width: 120px;
height: 120px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.20);
filter: blur(24px);
animation: activationEmptyGuideGlow 3.2s ease-in-out infinite;
}
.activation-empty-feed-visual__card {
position: relative;
z-index: 1;
width: min(150px, 100%);
min-height: 164px;
padding: 14px;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 244, 0.90));
border: 1px solid rgba(134, 239, 172, 0.50);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.34),
0 0 0 5px rgba(255, 255, 255, 0.05);
transform-origin: center;
animation: activationEmptyGuideCardFloat 3.8s ease-in-out infinite;
}
.activation-empty-feed-visual__avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background:
radial-gradient(circle at 35% 30%, #ffffff, transparent 28%),
linear-gradient(135deg, #bbf7d0, #16a34a);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}
.activation-empty-feed-visual__lines {
display: grid;
gap: 7px;
margin: 13px 0;
}
.activation-empty-feed-visual__lines span {
display: block;
height: 7px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.14);
overflow: hidden;
}
.activation-empty-feed-visual__lines span:nth-child(1) {
width: 92%;
}
.activation-empty-feed-visual__lines span:nth-child(2) {
width: 78%;
}
.activation-empty-feed-visual__lines span:nth-child(3) {
width: 58%;
}
.activation-empty-feed-visual__lines span::after {
content: "";
display: block;
width: 55%;
height: 100%;
border-radius: inherit;
background: rgba(34, 197, 94, 0.30);
transform: translateX(-120%);
animation: activationEmptyGuideTyping 3.2s ease-in-out infinite;
}
.activation-empty-feed-visual__lines span:nth-child(2)::after {
animation-delay: 0.32s;
}
.activation-empty-feed-visual__lines span:nth-child(3)::after {
animation-delay: 0.64s;
}
.activation-empty-feed-visual__photo {
height: 46px;
border-radius: 15px;
background:
linear-gradient(135deg, rgba(22, 163, 74, 0.18), rgba(15, 23, 42, 0.09));
display: grid;
place-items: center;
overflow: hidden;
}
.activation-empty-feed-visual__photo span {
width: 24px;
height: 24px;
border-radius: 9px;
background:
radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.9), transparent 18%),
linear-gradient(135deg, #86efac, #15803d);
animation: activationEmptyGuidePhotoPop 3.2s ease-in-out infinite;
}
.activation-empty-feed-visual__post-button {
width: fit-content;
margin: 12px 0 0 auto;
padding: 6px 12px;
border-radius: 999px;
color: #052e16;
font-size: 11px;
font-weight: 900;
background: linear-gradient(135deg, #86efac, #22c55e);
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.24);
animation: activationEmptyGuidePostPulse 3.2s ease-in-out infinite;
}
.activation-retention-guide-pill-wrap {
margin: 12px 0 14px;
display: flex;
align-items: center;
}
.activation-retention-guide-pill {
appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
max-width: 100%;
padding: 7px 12px;
border: 1px solid rgba(34, 197, 94, 0.18);
border-radius: 999px;
background: rgba(15, 23, 42, 0.58);
color: rgba(226, 232, 240, 0.86);
font-size: 0.82rem;
font-weight: 750;
line-height: 1.25;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
cursor: pointer;
transition:
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
.activation-retention-guide-pill span {
color: rgba(34, 197, 94, 0.92);
font-size: 0.92rem;
font-weight: 900;
}
.activation-retention-guide-pill:hover {
transform: translateY(-1px);
border-color: rgba(34, 197, 94, 0.34);
background: rgba(15, 23, 42, 0.70);
color: #ffffff;
}
@keyframes activationEmptyGuideSheen {
0%, 64% {
transform: translateX(-120%);
}
82%, 100% {
transform: translateX(120%);
}
}
@keyframes activationEmptyGuideLineFlow {
0%, 20% {
transform: translateY(-100%);
opacity: 0;
}
45%, 70% {
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
@keyframes activationEmptyGuideStepIn {
0%, 8% {
opacity: 0;
transform: translateY(8px);
}
16%, 74% {
opacity: 1;
transform: translateY(0);
}
86%, 100% {
opacity: 0.72;
transform: translateY(0);
}
}
@keyframes activationEmptyGuideGlow {
0%, 100% {
transform: scale(0.92);
opacity: 0.72;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
@keyframes activationEmptyGuideCardFloat {
0%, 100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-6px) rotate(1deg);
}
}
@keyframes activationEmptyGuideTyping {
0%, 25% {
transform: translateX(-120%);
}
58%, 100% {
transform: translateX(150%);
}
}
@keyframes activationEmptyGuidePhotoPop {
0%, 46% {
transform: scale(0.76);
opacity: 0.48;
}
58%, 100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes activationEmptyGuidePostPulse {
0%, 62%, 100% {
transform: scale(1);
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.24);
}
74% {
transform: scale(1.06);
box-shadow: 0 12px 28px rgba(34, 197, 94, 0.38);
}
}
@media (max-width: 680px) {
.activation-empty-feed-guidance--v2a {
grid-template-columns: 1fr;
gap: 12px;
}
.activation-empty-feed-visual {
min-height: 146px;
}
.activation-empty-feed-visual__card {
width: min(210px, 78vw);
min-height: 120px;
display: grid;
grid-template-columns: 36px 1fr;
gap: 9px 10px;
align-items: start;
}
.activation-empty-feed-visual__avatar {
grid-row: span 2;
}
.activation-empty-feed-visual__lines {
margin: 2px 0 0;
}
.activation-empty-feed-visual__photo {
grid-column: 1 / -1;
height: 34px;
}
.activation-empty-feed-visual__post-button {
grid-column: 1 / -1;
margin-top: 0;
}
.activation-empty-feed-guidance__actions {
display: grid;
grid-template-columns: 1fr;
}
.activation-empty-feed-guidance__button {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.activation-empty-feed-guidance::before,
.activation-empty-feed-guide__line::after,
.activation-empty-feed-guide__step,
.activation-empty-feed-visual__glow,
.activation-empty-feed-visual__card,
.activation-empty-feed-visual__lines span::after,
.activation-empty-feed-visual__photo span,
.activation-empty-feed-visual__post-button {
animation: none !important;
}
.activation-empty-feed-guide__step {
opacity: 1;
transform: none;
}
}
/* =========================================================
Empty Feed / First Session Guidance V2-A (E N D)
========================================================= */
/* =========================================================
Activation memory CTA spotlight
- briefly highlights the real composer after Start here
========================================================= */
.post-form.activation-memory-spotlight {
border-color: rgba(34, 197, 94, 0.7);
box-shadow:
0 0 0 3px rgba(34, 197, 94, 0.14),
0 14px 34px rgba(22, 128, 58, 0.18);
animation: activationMemorySpotlightPulse 1.6s ease-in-out 2;
}
@keyframes activationMemorySpotlightPulse {
0% {
transform: translateY(0);
}
35% {
transform: translateY(-2px);
}
70% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.post-form.activation-memory-spotlight {
animation: none;
}
}
/* =========================================================
Activation memory CTA spotlight (E N D)
========================================================= */
@media (max-width: 640px) {
.activation-start-card {
margin: 12px 0 14px;
padding: 16px;
border-radius: 18px;
}
.activation-start-actions {
flex-direction: column;
}
.activation-start-btn {
width: 100%;
}
}
/* =========================================================
Activation Card V2-C — close preference modal
- premium dark/glass modal for Start Guide close choice
========================================================= */
.activation-close-choice-layer {
position: fixed;
inset: 0;
z-index: 2147483646;
display: flex;
align-items: center;
justify-content: center;
padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
background: rgba(7, 11, 20, 0.68);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.activation-close-choice-card {
width: min(420px, 94vw);
border-radius: 22px;
padding: 20px;
color: #f9fafb;
background:
radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 34%),
linear-gradient(145deg, rgba(17, 24, 39, 0.96), rgba(3, 7, 18, 0.96));
border: 1px solid rgba(34, 197, 94, 0.28);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
text-align: left;
}
.activation-close-choice-eyebrow {
margin: 0 0 8px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #22c55e;
}
.activation-close-choice-title {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.2;
font-weight: 800;
}
.activation-close-choice-text {
margin: 0 0 16px;
color: rgba(249, 250, 251, 0.78);
line-height: 1.45;
font-size: 14px;
}
.activation-close-choice-actions {
display: grid;
gap: 10px;
}
.activation-close-choice-button {
width: 100%;
border: 0;
border-radius: 15px;
padding: 12px 14px;
font-weight: 800;
cursor: pointer;
min-height: 46px;
}
.activation-close-choice-button--primary {
color: #052e16;
background: linear-gradient(135deg, #86efac, #22c55e);
box-shadow: 0 10px 24px rgba(34, 197, 94, 0.22);
}
.activation-close-choice-button--secondary {
color: #f9fafb;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.activation-close-choice-button--cancel {
color: rgba(249, 250, 251, 0.72);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.activation-close-choice-button:active {
transform: translateY(1px);
}
@media (max-width: 520px) {
.activation-close-choice-layer {
align-items: flex-end;
}
.activation-close-choice-card {
border-radius: 24px 24px 18px 18px;
}
}
/* =========================================================
Activation Card V2-C — close preference modal (E N D)
========================================================= */
/* =========================================================
Onboarding / Activation V1 (E N D)
========================================================= */
/* Feed switch under composer */
.feed-switch {
display:flex; gap:8px; margin:8px 0 14px;
}
.feed-tab {
border:1px solid #60a5fa; color:#0b66ff; border-radius:999px; padding:6px 12px;
background:#dbeafe; font-size:14px; cursor:pointer;
}
.feed-tab.active { background:#4CAF50; color:#fff; border-color:#0b66ff; }
.feed-tab:focus { outline:2px solid #a7c4ff; outline-offset:2px; }
/* =========================================================
Feed Load More Button
- appears only when the feed has another backend page available
========================================================= */
.feed-load-more {
display: block;
margin: 18px auto 28px;
padding: 10px 18px;
border: 1px solid rgba(76, 175, 80, 0.55);
border-radius: 999px;
background: #f0fff4;
color: #166534;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.feed-load-more:hover {
background: #dcfce7;
}
.feed-load-more:focus {
outline: 2px solid rgba(76, 175, 80, 0.45);
outline-offset: 3px;
}
/* =========================================================
Feed Load More Button (E N D)
========================================================= */
/* ============Feed Switch (E N D)======================== */
/* *********************************************************/
/* ---------- Visibility badge ---------- */
.post.post-item{ position: relative; } /* safe even if already present */
/* Flowing badge under username (no overlay) */
.visibility-badge{
position: static; /* ← no absolute */
display:inline-flex;
align-items:center;
gap:5px;
margin: 4px 0 8px 0; /* space around the chip */
padding: 2px 7px;
border-radius: 999px;
background:#eef2ff;
color:#4338ca; /* indigo vibe */
border:1px solid #d7def0;
font-size:.78rem;
font-weight:300;
line-height:1;
white-space:nowrap;
}
.visibility-badge .vb-emoji{
font-size:.90rem;
}
/* Row that will host the badge under the header (we’ll create it in JS) */
/*======================================================*\
*==== Post badge row / top dashboard control layout ====*\
\*======================================================*/
.post-badge-row{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
margin-left: 0 !important; /* ← align with avatar & card inner corner */
}
.post-badge-row .visibility-badge,
.post-badge-row .image-controls-btn,
.post-badge-row .moved-frame-btn{
flex: 0 0 auto;
}
/*==== End badge label size reduction + row spacing tightening ===== */
/***********************************************************/
/* ---------- Visibility badge (E N D) ---------- */
/* *********************************************************/
/************************************************************/
/* ---------- Owner image controls + lock shield ---------- */
/*======================================================*\
*==== Top dashboard row buttons: image controls/frame ==*\
\*======================================================*/
.image-controls-btn{
display:inline-flex;
align-items:center;
justify-content:center;
background:transparent !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
width:44px !important;
height:44px !important;
min-width:44px !important;
min-height:44px !important;
border-radius:12px !important;
box-shadow:none !important;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
flex:0 0 44px !important;
overflow:hidden !important;
}
.image-controls-btn:hover,
.image-controls-btn:focus,
.image-controls-btn:active{
background:rgba(59,130,246,0.08) !important;
border:0 !important;
box-shadow:none !important;
outline:none !important;
}
.image-controls-btn img{
width:42px !important;
height:42px !important;
max-width:none !important;
max-height:none !important;
display:block;
object-fit:contain;
}
/*==== Top dashboard row buttons: image controls/frame ==*/
/*====================E N D==================================*/
/* ===== Frame picker button: make the visible art feel bigger without growing the whole row ===== */
.moved-frame-btn{
display:inline-flex;
align-items:center;
justify-content:center;
background:transparent !important;
border:0 !important;
padding:0 !important;
margin:0 2px 0 0 !important;
width:44px !important;
height:44px !important;
min-width:44px !important;
min-height:44px !important;
border-radius:12px !important;
box-shadow:none !important;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
flex:0 0 44px !important;
overflow:hidden !important;
position:relative;
}
.moved-frame-btn:hover,
.moved-frame-btn:focus,
.moved-frame-btn:active{
background:rgba(76,175,80,0.10) !important;
border:0 !important;
box-shadow:none !important;
outline:none !important;
}
.moved-frame-btn img{
width:40px !important;
height:40px !important;
max-width:none !important;
max-height:none !important;
display:block;
object-fit:contain;
object-position:center;
transform:none !important;
/* trims likely transparent padding from the PNG so the visible art stands out more */
clip-path: inset(14% 14% 14% 14%);
/* gives the icon more visual presence even if the source art is delicate */
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18));
}
/* ===== End frame picker button visual prominence patch ===== */
/*==== Top dashboard row buttons: image controls/frame ==*\
/*===================E N D============================*/
/*******************************************************/
.media-container{
position:relative;
}
.media-lock-shield{
position:absolute;
inset:0;
z-index:4;
background:transparent !important;
border:0 !important;
outline:none !important;
box-shadow:none !important;
padding:0;
margin:0;
cursor:default;
touch-action:pan-y;
appearance:none;
-webkit-appearance:none;
-webkit-tap-highlight-color: transparent;
user-select:none;
}
.media-lock-shield:hover,
.media-lock-shield:focus,
.media-lock-shield:active,
.media-lock-shield:focus-visible{
background:transparent !important;
border:0 !important;
outline:none !important;
box-shadow:none !important;
filter:none !important;
}
.media-edit-unlocked .media-lock-shield{
display:none !important;
}
/* =========================================================
Media Edit Guidance V1-F — Keep Slim Bar, Kill Center Circle
- removes only the experimental center circle/bubble/guide
- keeps the Slim Edit Bar
- keeps the real frame layer untouched
========================================================= */
.media-center-guide,
.media-edit-glass-scope,
.media-glass-scope-shine,
.media-glass-scope-dot,
.media-glass-scope-ring,
.media-center-dot,
.media-center-ring{
content:none !important;
display:none !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
max-width:0 !important;
max-height:0 !important;
opacity:0 !important;
pointer-events:none !important;
visibility:hidden !important;
background:none !important;
background-image:none !important;
border:0 !important;
box-shadow:none !important;
filter:none !important;
transform:none !important;
}
/* Keep the green edit state, but remove the extra pseudo badge/bubble.
Do NOT target .frame-wrapper::after; that is the real frame. */
.media-container.media-edit-unlocked{
box-shadow:
0 0 0 2px rgba(76, 175, 80, 0.42),
0 14px 34px rgba(22, 163, 74, 0.14);
}
.media-container.media-edit-unlocked::before{
content:"" !important;
position:absolute;
top:10px;
right:10px;
z-index:8;
width:13px;
height:13px;
border-radius:999px;
display:block !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:none !important;
background:#22c55e !important;
border:2px solid rgba(240, 253, 244, 0.92) !important;
box-shadow:
0 0 0 0 rgba(34, 197, 94, 0.58),
0 0 12px rgba(34, 197, 94, 0.72) !important;
animation: mediaEditCornerRadarPing 1.35s ease-out infinite;
}
@keyframes mediaEditCornerRadarPing{
0%{
box-shadow:
0 0 0 0 rgba(34, 197, 94, 0.58),
0 0 12px rgba(34, 197, 94, 0.72);
}
70%{
box-shadow:
0 0 0 12px rgba(34, 197, 94, 0),
0 0 14px rgba(34, 197, 94, 0.60);
}
100%{
box-shadow:
0 0 0 0 rgba(34, 197, 94, 0),
0 0 12px rgba(34, 197, 94, 0.72);
}
}
/* =========================================================
Media Edit Guidance V1-F — Keep Slim Bar, Kill Center Circle (E N D)
========================================================= */
.media-edit-bar{
position: relative;
margin: 8px 0 10px;
border: 1px solid rgba(76, 175, 80, 0.22);
border-radius: 16px;
padding: 10px 44px 10px 10px;
background:
radial-gradient(circle at top left, rgba(76, 175, 80, 0.10), transparent 34%),
linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.90));
color: #fff;
box-shadow:
0 10px 24px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.07);
display: grid;
gap: 9px;
animation: mediaEditBarIn .16s ease-out;
}
@keyframes mediaEditBarIn{
from{ opacity:0; transform:translateY(-4px); }
to{ opacity:1; transform:translateY(0); }
}
.media-edit-bar-close{
position: absolute;
top: 9px;
right: 9px;
width: 28px;
height: 28px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
color: #d1fae5;
font-size: 18px;
line-height: 1;
font-weight: 750;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
.media-edit-bar-close:hover,
.media-edit-bar-close:focus-visible{
background: rgba(255,255,255,.14);
outline: 2px solid rgba(74,222,128,.25);
outline-offset: 2px;
}
.media-edit-bar-copy{
display: grid;
gap: 3px;
}
.media-edit-bar-copy span{
color: #4ade80;
font-size: 10px;
font-weight: 950;
letter-spacing: .08em;
text-transform: uppercase;
}
.media-edit-bar-copy strong{
color: #f8fafc;
font-size: 12px;
line-height: 1.25;
font-weight: 900;
}
.media-edit-bar-copy small{
color: rgba(226, 232, 240, .78);
font-size: 11px;
line-height: 1.35;
}
.media-edit-bar-copy b{
color: #86efac;
font-weight: 950;
}
.media-edit-bar-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.media-edit-bar-actions button{
border-radius: 999px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.08);
color: #f8fafc;
padding: 8px 9px;
font-size: 11px;
line-height: 1.15;
font-weight: 850;
cursor: pointer;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
.media-edit-bar-actions button:hover,
.media-edit-bar-actions button:focus-visible{
background: rgba(255,255,255,.14);
outline: none;
}
.media-edit-bar-actions .media-edit-save-lock-btn{
border-color: rgba(74, 222, 128, .44);
background: linear-gradient(135deg, rgba(34,197,94,.92), rgba(22,163,74,.92));
color: #052e16;
font-weight: 950;
box-shadow: 0 10px 24px rgba(34,197,94,.20);
}
.media-edit-bar-actions .media-edit-save-lock-btn:hover,
.media-edit-bar-actions .media-edit-save-lock-btn:focus-visible{
background: linear-gradient(135deg, rgba(74,222,128,.98), rgba(34,197,94,.98));
}
@media (max-width: 480px){
.media-edit-bar{
border-radius: 15px;
padding: 9px 42px 9px 9px;
gap: 8px;
}
.media-edit-bar-copy strong{
font-size: 11.5px;
}
.media-edit-bar-actions{
grid-template-columns: 1fr;
}
}
/* =========================================================
Media Edit Guidance V1-E — No Center Overlay + Exit-Safe Slim Edit Bar (E N D)
========================================================= */
/* =========================================================
Media Edit Guidance V1-H — Safe Drag Radar Guide
- same visual language as the "Use Drag" teaching modal
- intentionally does NOT use old .media-center-guide classes
- stays above the media/frame, but never blocks touch/drag
========================================================= */
.media-edit-radar-guide {
position: absolute;
left: 50%;
top: 50%;
width: 72px;
height: 72px;
transform: translate(-50%, -50%);
z-index: 12;
pointer-events: none;
opacity: 0.96;
}
.media-edit-radar-dot {
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
background: #4CAF50;
transform: translate(-50%, -50%);
box-shadow:
0 0 0 6px rgba(76, 175, 80, 0.12),
0 0 16px rgba(76, 175, 80, 0.42);
z-index: 3;
}
.media-edit-radar-ring {
position: absolute;
left: 50%;
top: 50%;
width: 56px;
height: 56px;
border-radius: 50%;
border: 2px solid rgba(76, 175, 80, 0.72);
transform: translate(-50%, -50%) scale(.65);
animation: mediaEditRadarPulse 1.5s ease-out infinite;
z-index: 2;
}
.media-edit-radar-ring-2 {
animation-delay: .22s;
}
.media-edit-radar-ring-3 {
animation-delay: .44s;
}
@keyframes mediaEditRadarPulse {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(.55);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.45);
}
}
/* =========================================================
Media Edit Guidance V1-H — Safe Drag Radar Guide (E N D)
========================================================= */
.image-controls-overlay{
position:fixed;
inset:0;
z-index:2147483646;
display:none;
align-items:center;
justify-content:center;
}
.image-controls-overlay.show{
display:flex;
}
.image-controls-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,0.78);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}
.image-controls-sheet{
position:relative;
z-index:1;
width:min(92vw, 420px);
border-radius:22px;
background:rgba(17,24,39,0.92);
color:#fff;
box-shadow:0 18px 60px rgba(0,0,0,0.46);
border:1px solid rgba(255,255,255,0.12);
padding:18px 16px 16px;
}
.image-controls-close{
position:absolute;
top:8px;
right:8px;
width:38px;
height:38px;
border-radius:999px;
border:0;
background:rgba(255,255,255,0.10);
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
}
.image-controls-title{
font-size:22px;
line-height:1.15;
font-weight:800;
margin:2px 34px 10px 0;
color:#fff;
}
.image-controls-copy{
margin:0 0 14px;
color:rgba(255,255,255,0.90);
line-height:1.45;
font-size:14px;
}
.key-green{
color:#4CAF50;
font-weight:800;
}
.image-controls-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.image-controls-actions.stack{
flex-direction:column;
}
.image-controls-actions button{
border:1px solid rgba(255,255,255,0.14);
background:rgba(255,255,255,0.08);
color:#fff;
border-radius:14px;
padding:10px 12px;
font-weight:700;
cursor:pointer;
}
.image-controls-actions button:hover,
.image-controls-close:hover{
background:rgba(255,255,255,0.16);
}
.gesture-demo{
position:relative;
height:220px;
border-radius:18px;
background:linear-gradient(180deg, rgba(55,65,81,0.92), rgba(31,41,55,0.98));
border:1px solid rgba(255,255,255,0.08);
overflow:hidden;
margin:6px 0 14px;
}
.gesture-hand{
position:absolute;
display:block;
object-fit:contain;
opacity:.98;
z-index:2;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
filter:drop-shadow(0 2px 10px rgba(0,0,0,.18));
}
.gesture-drag-demo .gesture-hand.one-finger{
width:88px;
height:88px;
left:50%;
top:50%;
transform:translate(-50%,-12%);
animation:dragHandMove 2.2s ease-in-out infinite;
}
.gesture-zoom-demo .gesture-hand.pinch-hand{
width:129px;
height:129px;
left:57.5%;
top:30%;
transform:translate(-50%,-8%);
animation:zoomHandPulse 1.5s ease-in-out infinite;
}
.gesture-demo .gesture-hand{
image-rendering: -webkit-optimize-contrast;
image-rendering: smooth;
opacity: .94;
}
.gesture-zoom-demo .zoom-arrow{
display:none !important;
}
@keyframes dragHandMove{
0%,100% { transform:translate(-50%,-38%) translate(0,0); }
20% { transform:translate(-50%,-38%) translate(-14px,0); }
40% { transform:translate(-50%,-38%) translate(14px,0); }
60% { transform:translate(-50%,-38%) translate(0,-14px); }
80% { transform:translate(-50%,-38%) translate(0,14px); }
}
@keyframes zoomHandPulse{
0%,100% { transform:translate(-50%,-8%) scale(.96); }
50% { transform:translate(-50%,-8%) scale(1.05); }
}
.touch-dot,
.zoom-dot{
position:absolute;
width:22px;
height:22px;
border-radius:50%;
background:#4CAF50;
box-shadow:0 0 0 6px rgba(76,175,80,0.12);
z-index:3;
}
.touch-dot{
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.touch-ring{
position:absolute;
left:50%;
top:50%;
width:56px;
height:56px;
border-radius:50%;
border:2px solid rgba(76,175,80,0.72);
transform:translate(-50%,-50%) scale(.65);
animation:dragPulse 1.5s ease-out infinite;
}
.touch-ring.ring-2{ animation-delay:.22s; }
.touch-ring.ring-3{ animation-delay:.44s; }
@keyframes dragPulse{
0% { opacity:0; transform:translate(-50%,-50%) scale(.55); }
30% { opacity:1; }
100% { opacity:0; transform:translate(-50%,-50%) scale(1.45); }
}
.drag-arrows .arrow,
.zoom-arrow{
position:absolute;
width:18px;
height:18px;
z-index:4;
animation:arrowBlink 1.3s ease-in-out infinite;
opacity:.95;
}
.drag-arrows .arrow::before,
.zoom-arrow::before{
content:"";
position:absolute;
inset:0;
border-top:3px solid #4CAF50;
border-right:3px solid #4CAF50;
box-sizing:border-box;
filter:drop-shadow(0 0 8px rgba(76,175,80,0.18));
}
.drag-arrows .up{ left:50%; top:24px; transform:translateX(-50%) rotate(-45deg); }
.drag-arrows .right{ right:26px; top:50%; transform:translateY(-50%) rotate(45deg); }
.drag-arrows .down{ left:50%; bottom:24px; transform:translateX(-50%) rotate(135deg); }
.drag-arrows .left{ left:26px; top:50%; transform:translateY(-50%) rotate(225deg); }
@keyframes arrowBlink{
0%,100%{ opacity:.45; }
50%{ opacity:1; }
}
.zoom-dot-a{
left:39%;
top:38%;
animation:zoomDotA 1.5s ease-in-out infinite;
}
.zoom-dot-b{
left:61%;
top:62%;
animation:zoomDotB 1.5s ease-in-out infinite;
}
.zoom-arrow-a{
left:58%;
top:24%;
animation:zoomArrowA 1.5s ease-in-out infinite;
}
.zoom-arrow-b{
left:61%;
top:53%;
animation:zoomArrowB 1.5s ease-in-out infinite;
}
.zoom-arrow-a::before,
.zoom-arrow-b::before,
.drag-arrows .arrow::before{
transform:none;
}
@keyframes zoomDotA{
0%,100%{ transform:translate(0,0) scale(1); }
50%{ transform:translate(-16px,-16px) scale(1.05); }
}
@keyframes zoomDotB{
0%,100%{ transform:translate(0,0) scale(1); }
50%{ transform:translate(16px,16px) scale(1.05); }
}
@keyframes zoomArrowA{
0%,100%{ transform:translate(0,0) rotate(-45deg); opacity:.55; }
50%{ transform:translate(-10px,-10px) rotate(-45deg); opacity:1; }
}
@keyframes zoomArrowB{
0%,100%{ transform:translate(0,0) rotate(135deg); opacity:.55; }
50%{ transform:translate(10px,10px) rotate(135deg); opacity:1; }
}
@media (max-width: 480px){
.image-controls-sheet{
width:min(94vw, 380px);
padding:16px 12px 14px;
}
.image-controls-title{
font-size:20px;
}
.gesture-demo{
height:190px;
}
}
/* ---------- Owner image controls + lock shield (E N D) ---------- */
/********************************************************************/
/* --- Feed crumbs + "View all" link --- */
.feed-crumbs-wrap { display:flex; align-items:center; gap:10px; margin:6px 0 12px; }
.btn-ghost { border:1px solid #e5e7eb; background:#f9fafb; padding:6px 10px; border-radius:10px; cursor:pointer; }
.view-all-from{
margin-top:8px; font-size:0.9rem; border:none; background:transparent; color:#2563eb; cursor:pointer;
}
.view-all-from:hover{ text-decoration: underline; }
/* ============Feed crumbs + "View all" (E N D)======================== */
/* **********************************************************************/
/* *********************************************************/
/* ************Follow button *******************************/
.follow-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border-color, #2b6cb0);
background: #2b6cb0;
color: var(--link-color, white);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 60ms;
}
.follow-btn:hover {
background: rgba(43, 108, 176, 0.08);
}
.follow-btn:active {
transform: translateY(1px);
}
.follow-btn.is-following {
background: #4CAF50;
color: white;
border-color: #4CAF50;
}
/* ============Follow button (E N D)======================== */
/* *********************************************************/
/* =========================================================
Post header lane for Report + Follow coexistence
- only applies on cards that actually have a Report button
========================================================= */
.post-user-info--with-report{
padding-right: 96px;
min-height: 40px;
}
@media (max-width: 768px){
.post-user-info--with-report{
padding-right: 88px;
min-height: 38px;
}
}
/* =========================================================
Post header lane for Report + Follow coexistence (E N D)
========================================================= */
/* ******************************/
/* ---- Feed scope switch ---- */
#feedScope {
margin: 10px 0 14px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#feedScope .scope-btn {
padding: 8px 14px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 999px;
background: #ffffff;
color: #111827;
font-weight: 600;
cursor: pointer;
transition: transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease;
user-select: none;
}
#feedScope .scope-btn:hover { transform: translateY(-1px); }
#feedScope .scope-btn.active {
background: #2563eb; /* blue */
color: #fff;
border-color: #2563eb;
}
/* Dark mode safety (only if you use a dark body class) */
body.dark #feedScope .scope-btn {
background: #111827;
color: #e5e7eb;
border-color: #374151;
}
body.dark #feedScope .scope-btn.active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
/* ============Feed scope switch (E N D)======================== */
/* *********************************************************/
/* ────────────────────────────────────────────────────────────
GIVERS sidebar: scrollable list
Target: #giversListContent (the inner container we fill from app.js)
──────────────────────────────────────────────────────────── */
#giversListContent {
/* layout */
display: grid;
grid-auto-rows: minmax(44px, auto);
row-gap: 8px;
/* scrolling */
max-height: calc(100vh - 160px); /* adjust 160px if your header is taller/shorter */
overflow-y: auto;
overscroll-behavior: contain; /* prevents bounce from scrolling the whole page */
-webkit-overflow-scrolling: touch; /* smooth on iOS */
scrollbar-gutter: stable; /* keeps content from shifting when scrollbar appears */
/* padding so the scrollbar doesn't overlap content */
padding-right: 6px;
}
/* nice, subtle scrollbar (Chromium/WebKit) */
#giversListContent::-webkit-scrollbar {
width: 8px;
}
#giversListContent::-webkit-scrollbar-thumb {
border-radius: 8px;
background: rgba(0,0,0,0.25);
}
#giversListContent::-webkit-scrollbar-track {
background: transparent;
}
/* Mobile: cap the list height a bit lower so it doesn’t dominate the screen */
@media (max-width: 900px) {
#giversListContent {
max-height: 240px;
}
}
/* ============GIVERS sidebar: scrollable list (E N D)======================== */
/* *****************************************************************************/
/* Profile controls live inside the header flow (no fixed/sticky) */
.profile-controls{
position: static; /* participate in header’s flex row */
display: none; /* responsive: hidden by default */
align-items: center;
gap: 8px;
}
/* Mobile/tablet: show inside header */
@media (max-width: 900px){
.header .profile-controls{
display: inline-flex;
margin-left: 8px; /* tiny breathing room next to name */
}
}
/* Desktop: keep hidden (desktop header likely has other controls) */
/* Desktop/tablet (>900px): show the avatar+name pill; hide the ⋮ */
@media (min-width: 901px){
.header .profile-controls{ display: inline-flex !important; }
.header .profile-controls .icon-button{ display: none !important; }
.header .profile-controls #staticButton{ display: inline-flex !important; }
.header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
.header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }
}
/* ====Profile controls live inside the header flow (no fixed/sticky) (E N D)====== */
/* ==================================================================================/
/* Let the avatar pill sit inline inside the wrapper */
#staticButton{
position: static !important;
top: auto !important;
left: auto !important;
margin: 0;
}
/* tiny three-dots button */
.icon-button{
background: #d1d6dc;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 6px;
line-height: 0; /* tight icon box */
cursor: pointer;
color: #111827; /* ← three-dots color (slate-900) */
}
.icon-button:hover{
color: #2563eb; /* ← hover color (blue-600) */
}
.icon-button:active{ transform: translateY(1px); }
.icon-button .kebab{ font-size: 18px; line-height: 1; display: inline-block; }
/* dropdown panel */
.profile-menu[hidden]{ display: none !important; }
.profile-menu{
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 232px;
background: rgba(15, 23, 42, 0.54);
border: 1px solid rgba(74,222,128,0.18);
border-radius: 18px;
box-shadow:
0 18px 44px rgba(0,0,0,0.30),
inset 0 1px 0 rgba(255,255,255,0.06);
backdrop-filter: blur(22px) saturate(145%);
-webkit-backdrop-filter: blur(22px) saturate(145%);
padding: 10px;
display: grid;
gap: 8px;
z-index: 1200;
overflow: hidden;
}
.profile-menu::before {
content: "";
position: absolute;
left: 22px;
top: 26px;
bottom: 26px;
width: 2px;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgba(134, 239, 172, 0.10),
rgba(34, 197, 94, 0.52),
rgba(134, 239, 172, 0.10)
);
pointer-events: none;
opacity: 0.72;
}
.profile-menu::after {
content: "";
position: absolute;
left: 22px;
top: 26px;
width: 2px;
height: 34%;
border-radius: 999px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.78), transparent);
pointer-events: none;
animation: profileMenuRailFlow 3.2s ease-in-out infinite;
opacity: 0.68;
}
.profile-menu button{
position: relative;
width: 100%;
min-height: 40px;
text-align: left;
background: rgba(15, 23, 42, 0.42);
border: 1px solid rgba(74,222,128,0.16);
border-radius: 14px;
padding: 9px 12px 9px 34px;
cursor: pointer;
color: #f8fafc;
font-size: 14px;
font-weight: 400;
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
overflow: hidden;
}
.profile-menu button::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
width: 12px;
height: 12px;
border-radius: 999px;
transform: translateY(-50%);
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.10),
0 0 18px rgba(34, 197, 94, 0.28);
}
.profile-menu button::after {
content: "";
position: absolute;
left: 11px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 999px;
transform: translateY(-50%);
background: rgba(5, 46, 22, 0.78);
}
.profile-menu button:hover{
background: rgba(74,222,128,0.16);
border-color: rgba(74,222,128,0.30);
color: #ffffff;
}
/* danger action */
.profile-menu .danger-btn{
background: rgba(127, 29, 29, 0.36);
border-color: rgba(248,113,113,0.28);
color: #fee2e2;
}
.profile-menu .danger-btn::before {
background: linear-gradient(135deg, #fecaca, #ef4444);
box-shadow:
0 0 0 4px rgba(239, 68, 68, 0.10),
0 0 18px rgba(239, 68, 68, 0.24);
}
.profile-menu .danger-btn::after {
background: rgba(69, 10, 10, 0.78);
}
.profile-menu .danger-btn:hover{
background: rgba(185, 28, 28, 0.48);
border-color: rgba(248,113,113,0.40);
color: #ffffff;
}
@keyframes profileMenuRailFlow {
0%, 18% {
transform: translateY(-125%);
opacity: 0;
}
42%, 68% {
opacity: 0.68;
}
100% {
transform: translateY(245%);
opacity: 0;
}
}
/* === Profile dropdown — END ================================== */
/* ***************************************************************/
/* ***************************************************************/
/* === FINAL AUTHORITY for the profile controls (removed)
The header now controls layout; no fixed positioning here. */
/* ***************************************************************/
/* Keep the Profile pill inside the wrapper, never fixed */
#staticButton{
position: static !important;
top: auto !important;
left: auto !important;
margin: 0;
}
/* === Profile dropdown: subtle fade/slide ===================== */
.profile-menu{
/* start closed */
opacity: 0;
transform: translateY(-4px);
transition: opacity .18s ease, transform .18s ease;
}
/* when open */
.profile-menu.open{
opacity: 1;
transform: translateY(0);
}
/* during the short closing animation, ignore pointer input */
.profile-menu:not(.open){
pointer-events: none;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
.profile-menu{ transition: none; transform: none; }
}
/* === Profile dropdown animation subtle fade/slide — END ======================= */
/* ********************************************************************************/
/* --- Make the Back button stand out --- */
#feed-back-btn.btn-ghost{
background:#eff6ff; /* soft blue pill */
border-color:#93c5fd;
color:#1d4ed8; /* blue-700 */
font-weight:600;
padding:8px 12px;
border-radius:9999px; /* full pill */
box-shadow:0 1px 2px rgba(0,0,0,.06);
transition:background .15s ease, border-color .15s ease, transform .05s ease;
}
#feed-back-btn.btn-ghost:hover{
background:#dbeafe; /* stronger on hover */
border-color:#60a5fa;
}
#feed-back-btn.btn-ghost:active{
transform:translateY(1px); /* tactile press */
}
#feed-back-btn.btn-ghost:focus-visible{
outline:2px solid #60a5fa; /* accessible focus ring */
outline-offset:2px;
}
/* === Make the Back button stand out — (E N D) ======================= */
/* ********************************************************************************/
/* ── Mobile user badge ───────────────────────────────────────────── */
.mobile-user-badge {
display: none; /* shown only on small screens */
align-items: center;
gap: 8px;
padding: 8px 2px;
justify-content: flex-start;
border-bottom: 0px solid rgba(0,0,0,0.08);
background: #fff;
position: sticky; /* keeps it visible while scrolling */
top: var(--header-h); /* sit right below the fixed header */
z-index: 1001; /* above content, below modals */
}
.mobile-user-badge img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.mobile-user-badge .name {
font-weight: 600;
font-size: 13px;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 70vw;
}
/* Show only on mobile/tablet */
@media (max-width: 900px) {
.mobile-user-badge { display: flex; }
/* optional: align it to the right inside header */
/* .mobile-user-badge { margin-left: auto; } */
}
@media (min-width: 901px) {
.mobile-user-badge { display: none !important; }
}
/* ========= Mobile user badge — (E N D) ======================= */
/* ***************************************************************/
/* === Mobile header: show ⋮ next to the display name ==================== */
@media (max-width: 900px){
/* Make the mobile badge a tight row: [avatar][name] */
#mobileUserBadge{
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: -18px;
}
/* Turn the profile-controls back on INSIDE the header, right after the badge */
.header .profile-controls{
display: inline-flex !important; /* override the auth-level hide */
position: static; /* flow with header */
margin-left: 6px; /* sits just to the right of the name */
align-items: center;
gap: 6px;
}
/* Hide the duplicate username pill inside profile-controls on phones */
.header .profile-controls #staticButton{
display: none !important;
}
/* Keep only the three-dots button visible on phones */
.header .profile-controls .icon-button{
display: inline-flex;
}
/* Optional: reduce extra spacing in the header on phones */
.header{
justify-content: center; /* title centered */
}
}
/* === Mobile header — END =============================================== */
/* *************************************************************************/
/* === Mobile header layout (≤900px): show badge + ⋮, hide bulky items ====== */
@media (max-width: 900px){
/* Hide heavy header content to free space */
.header .header-buttons{ display: none !important; }
.header h1{ display: none !important; }
.header .logo-container{ display: inline-flex !important; }
/* Keep header simple and left-aligned */
.header{
justify-content: flex-start; /* align items in a row */
overflow: hidden; /* keep but now nothing overflows */
}
/* Show the mobile badge: [avatar][display name] */
#mobileUserBadge{
display: inline-flex !important;
align-items: center;
gap: 6px;
}
/* Put the ⋮ immediately to the right of the display name */
.header .profile-controls{
display: inline-flex !important; /* override auth-level hide */
position: static; /* participate in header flow */
margin-left: 6px; /* sits right after the name */
align-items: center;
gap: 6px;
}
/* On phones we only want the ⋮ from profile-controls (avoid duplicate name pill) */
.header .profile-controls #staticButton{
display: none !important;
}
/* Ensure the actual three-dots button is visible */
.header .profile-controls .icon-button{
display: inline-flex;
}
}
/* === Mobile header layout — END =========================================== */
/* *************************************************************************/
/* === Mobile header layout (≤900px): badge + ⋮, no clutter ================= */
@media (max-width: 900px){
/* Hide bulky header items to free space on phones */
.header .header-buttons{ display: none !important; }
.header h1{ display: none !important; }
.header .logo-container{ display: inline-flex !important; }
/* Keep header compact and left-aligned */
.header{
justify-content: flex-start;
overflow: hidden;
}
/* Show mobile badge: [avatar][display name] */
#mobileUserBadge{
display: inline-flex !important;
align-items: center;
gap: 6px;
}
/* Show ⋮ immediately to the right of the display name */
.header .profile-controls{
display: inline-flex !important; /* override the global auth-level hide */
position: static; /* flow inside the header row */
margin-left: 6px;
align-items: center;
gap: 6px;
}
/* Avoid duplicate name pill inside profile-controls on phones */
.header .profile-controls #staticButton{
display: none !important;
}
/* Ensure the three-dots button itself is visible */
.header .profile-controls .icon-button{
display: inline-flex;
}
}
/* Desktop/tablet (≥901px): show the avatar+name pill; hide the ⋮ */
@media (min-width: 901px){
.header .profile-controls{ display: inline-flex !important; align-items: center; gap: 8px; }
.header .profile-controls .icon-button{ display: none !important; } /* no ⋮ on desktop */
.header .profile-controls #staticButton{ display: inline-flex !important; } /* show pill */
.header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
.header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }
}
/* === Mobile header layout (≤900px): badge + ⋮, no clutter — END ======== */
/* *************************************************************************/
/* Mobile (≤900px): show only the ⋮ to the right of the display name */
@media (max-width: 900px){
#mobileUserBadge{
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-left: -14px; /* ← bring badge closer to the logo */
}
.header .profile-controls{
display: inline-flex !important;
position: static;
margin-left: 6px; /* sits just after the name */
align-items: center;
gap: 6px;
}
/* mobile = no duplicate name: hide the pill */
.header .profile-controls #staticButton{ display: none !important; }
/* keep only three-dots */
.header .profile-controls .icon-button{ display: inline-flex !important; }
}
/* === Mobile (≤900px): show only the ⋮ to the right of the display name — (E N D) ======== */
/* *****************************************************************************************/
/* ==== FINAL HEADER VISIBILITY (wins over earlier duplicates) ==== */
/* Desktop/tablet (≥901px): show the avatar+name pill in the header, hide ⋮ and the phone badge */
@media (min-width: 901px){
.header .profile-controls{
display: inline-flex !important;
position: static !important;
align-items: center; gap: 8px;
}
.header .profile-controls .icon-button{ display: none !important; } /* no ⋮ on desktop */
.header .profile-controls #staticButton{ display: inline-flex !important; } /* show pill */
#mobileUserBadge{ display: none !important; } /* kill duplicate badge */
.header .logo-container{ width: auto !important; height: auto !important; flex: 0 0 auto !important; }
.header .logo-container > img.logo-Face{ height: 48px !important; width: auto !important; object-fit: contain !important; }
}
/* Mobile (≤900px): show the phone badge + only the ⋮ right of the name */
@media (max-width: 900px){
#mobileUserBadge{
display: inline-flex !important;
align-items: center; gap: 6px;
}
.header .profile-controls{
display: inline-flex !important;
position: static !important;
margin-left: 6px; align-items: center; gap: 6px;
}
.header .profile-controls #staticButton{ display: none !important; } /* avoid duplicate name pill */
.header .profile-controls .icon-button{ display: inline-flex !important; } /* keep ⋮ visible */
}
/* ======= FINAL HEADER VISIBILITY (wins over earlier duplicates) ==== (E N D) ===== */
/* ***********************************************************************************/
/* ==== MOBILE: make the brand logo visible again (wins over earlier hides) ==== */
@media (max-width: 900px){
/* Unhide whichever selector your logo uses */
.header .logo-container,
.header .logo-Face,
#LOGO3 {
display: inline-flex !important;
align-items: center;
}
/* Optional: keep the layout tidy */
.header .logo-container img,
#LOGO3 img {
max-height: none !important;
height: auto;
width: auto;
}
/* Optional ordering (logo left, name center, ⋮ just right of name) */
.header .logo-container, .header .logo-Face, #LOGO3 { order: 0; }
#mobileUserBadge { order: 1; }
.header .profile-controls { order: 2; } /* this holds the ⋮ on phones */
#logoutBtn { order: 3; }
}
/* ======= MOBILE: make the brand logo visible again (wins over earlier hides) === (E N D) ===== */
/* ************************************************************************************************/
/* ==== MOBILE: show the brand logo + keep clean layout (final override) ==== */
@media (max-width: 900px){
/* 1) Unhide the logo on phones regardless of earlier rules */
.header .logo-container,
.header .logo-Face,
#LOGO3{
display: inline-flex !important;
align-items: center;
flex: 0 0 auto; /* don't let logo stretch */
order: 0; /* logo at the left */
}
.header .logo-container img,
#LOGO3 img{
max-height: none !important;
height: auto;
width: auto;
}
/* 2) Let the name area expand in the middle and avoid pushing the logo off */
#mobileUserBadge{
display: inline-flex !important;
align-items: center;
gap: 6px;
flex: 1 1 auto; /* take the remaining space */
min-width: 0; /* allow text truncation */
order: 1;
justify-content: flex-start; /* keep the name visually centered */
text-align: center;
margin-left: 3px;
}
/* If the name is long, truncate instead of pushing things out */
#mobileUserBadge *{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 3) ⋮ stays immediately to the right of the name, but doesn't steal space */
.header .profile-controls{
display: inline-flex !important;
position: static !important;
order: 2;
flex: 0 0 auto; /* fixed-size next to the name */
margin-top: 40px;
align-items: center;
gap: 6px;
z-index: 1001;
}
/* 4) Logout at the far right; keep it compact so the logo can fit */
#logoutBtn{
order: 3;
flex: 0 0 auto;
}
/* 5) Header spacing tuned for phones */
.header{
display: flex;
align-items: center;
justify-content: space-between;
gap: 3px;
}
}
/* ======= MOBILE: show the brand logo + keep clean layout (final override)=== (E N D) ===== */
/* *******************************************************************************************/
/* ==== FINAL: ensure logo shows on phones, keep layout tidy ==== */
@media (max-width: 900px){
.header .logo-container,
.header .logo-Face{
display: inline-flex !important;
align-items: center;
flex: 0 0 auto;
order: 0;
}
.header .logo-container img{
max-height: none !important;
height: auto;
width: auto;
}
}
/* ======= FINAL: ensure logo shows on phones, keep layout tidy=== (E N D) ===== */
/* *******************************************************************************/
/* === FINAL-FINAL: mobile logo size (beats every earlier cap) === */
@media (max-width: 900px){
/* ensure the container itself isn't constraining the img */
.header .logo-container{
width: auto !important;
height: auto !important;
flex: 0 0 auto !important;
}
/* target the ACTUAL ![]()
, with higher specificity than any prior rules */
.header .logo-container > img.logo-Face{
height: 44px !important; /* ← set your mobile size here */
width: auto !important;
max-height: none !important;
max-width: none !important;
object-fit: contain !important;
display: inline-block !important;
}
}
/* === FINAL-FINAL: mobile logo size (beats every earlier cap)===(E N D) ===== */
/* *******************************************************************************/
/* === FINAL AUTHORITATIVE LOGO SIZE — KEEP AT EOF === */
/* Mobile (≤900px) */
@media (max-width: 900px){
.header .logo-container > img.logo-Face{
height: 104px !important;
width: auto !important;
object-fit: contain !important;
display: inline-block !important;
}
}
/* Desktop / Tablet (≥901px) */
@media (min-width: 901px){
.header .logo-container > img.logo-Face{
height: 105px !important;
width: auto !important;
object-fit: contain !important;
display: inline-block !important;
}
}
/* === FINAL LOGO SIZE (authoritative) (E N D) ========================= */
/* *******************************************************************************/
/* === MOBILE: place kebab next to the badge; prevent overlap === */
@media (max-width: 900px){
.header{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
flex-wrap: nowrap; /* avoid wrapping that pushes kebab out */
}
/* Ensure order: LOGO → Badge → Kebab → (rest) → Logout */
.logo-container{ order: 0; }
#mobileUserBadge{ order: 1; }
.profile-controls{
order: 2;
display: flex !important;
align-items: center;
gap: 4px;
}
/* Make the kebab visible and snug next to the badge */
#profileMenuToggle{
display: inline-flex !important;
order: 2;
margin-left: 2px; /* nudge closer to the badge */
position: relative;
z-index: 5; /* sit above logout if they overlap */
}
/* Push logout to the far right and behind in stacking if needed */
#logoutBtn{
order: 9; /* keep it at the end of the row */
position: relative;
z-index: 1;
}
/* (Optional) Hide the desktop header buttons on mobile, if not already */
.header-buttons{ display: none !important; }
}
/* === === MOBILE: place kebab next to the badge; prevent overlap (E N D) =========== */
/* *******************************************************************************/
/* === MOBILE HEADER LAYOUT: make kebab visible & place it next to the badge === */
@media (max-width: 900px){
.header{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:6px !important;
flex-wrap:nowrap !important;
overflow:visible !important;
}
/* Hide non-essential stuff on phones to free space */
.header h1{ display:none !important; }
.header-buttons{ display:none !important; }
/* Left-to-right order: LOGO → Badge → Kebab … → Logout (far right) */
.logo-container{ order:0 !important; flex:0 0 auto !important; }
#mobileUserBadge{ order:1 !important; flex:0 1 auto !important; margin-left:0 !important; }
/* Ensure the profile-controls row exists and only shows the kebab */
.profile-controls{
order:2 !important;
display:flex !important;
align-items:center !important;
gap:4px !important;
flex:0 0 auto !important;
}
#staticButton{ display:none !important; } /* hide the big button on mobile */
#profileMenuToggle{
display:inline-flex !important;
order:0 !important; /* first inside profile-controls */
margin-left:0 !important;
position:relative !important;
z-index:1001 !important; /* above neighbors if they overlap */
flex:0 0 auto !important;
}
/* Logout goes all the way to the right */
#logoutBtn{
order:9 !important;
margin-left:auto !important;
position:relative !important;
z-index:1100 !important;
flex:0 0 auto !important;
margin-top: -65px !important;
margin: -5x !important;
}
}
/* ========= MOBILE HEADER LAYOUT: make kebab visible & place it next to the badge === (E N D) =========== */
/* *******************************************************************************/
/* === Mobile bottom bar: force the button strip visible, regardless of header rules === */
@media (max-width: 900px){
.mobile-nav .header-buttons{
display: flex !important; /* override any blanket hides */
align-items: center;
gap: 0;
overflow-x: auto;
}
.mobile-nav .header-buttons button{
display: inline-flex !important; /* ensure buttons render */
align-items: center;
justify-content: center;
}
.mobile-nav .header-buttons img{
display: block !important; /* ensure icons aren’t suppressed */
}
}
/* === Mobile bottom bar: force the button strip visible, regardless of header rules ==== (E N D) =========== */
/* *******************************************************************************/
/* === AUTH STATE VISIBILITY (tiny, robust) ===================== */
/* When NOT authed (e.g., login form), hide badge + kebab on all viewports */
body:not(.authed) #mobileUserBadge,
body:not(.authed) #profileMenuToggle {
display: none !important;
}
/* When authed, ensure they can appear */
body.authed #profileMenuToggle { display: inline-flex !important; }
body.authed #mobileUserBadge { display: inline-flex !important; }
/* Desktop: do NOT show the header's profile-controls row; use a desktop badge instead */
@media (min-width: 901px){
.header .profile-controls { display: none !important; }
#desktopUserBadge { display: block; margin-bottom: 6px; font-weight: 600; }
}
/* === AUTH STATE VISIBILITY (tiny, robust) =====================(E N D) =========== */
/* *******************************************************************************/
/* === AUTH VISIBILITY GUARDS (authoritative) ================== */
/* Logged OUT: keep header clean on the login screen */
body:not(.authed) .header,
body:not(.authed) #mobileUserBadge,
body:not(.authed) #profileMenuToggle,
body:not(.authed) .profile-controls,
body:not(.authed) #desktopUserBadge {
display: none !important;
}
/* Logged IN: allow these to render */
body.authed #profileMenuToggle { display: inline-flex !important; }
body.authed #mobileUserBadge { display: inline-flex !important; }
/* Desktop: we show name above the "Your Heaven" button instead of in header */
@media (min-width: 901px){
.header .profile-controls { display: none !important; }
}
/* === AUTH VISIBILITY GUARDS (authoritative) ==================(E N D) =========== */
/* *******************************************************************************/
/* =========================================================
Main feed post composer textarea visibility
- restores the regular Home-feed text box
- lets users create text-only thoughts/reflections again
- keeps visibility controlled by the existing .post-form JS display logic
========================================================= */
#postForm #postContent{
display: block !important;
width: 100%;
min-height: 88px;
box-sizing: border-box;
margin: 10px 0 8px;
padding: 12px 14px;
border: 1px solid rgba(17, 24, 39, 0.14);
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
color: #111827;
font-size: 15px;
line-height: 1.45;
resize: vertical;
outline: none;
}
#postForm #postContent::placeholder{
color: rgba(75, 85, 99, 0.72);
}
#postForm #postContent:focus{
border-color: rgba(22, 163, 74, 0.52);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
/* Safety: if the textarea ever gets wrapped again, do not hide that wrapper. */
#postForm .post-text,
#postForm .text-area-wrapper,
#postForm label[for="postContent"]{
display: block !important;
}
#postForm{
gap: 10px;
}
@media (max-width: 900px){
#postForm #postContent{
min-height: 78px;
padding: 11px 12px;
font-size: 14px;
border-radius: 14px;
}
}
/* =========================================================
Main feed post composer textarea visibility (E N D)
========================================================= */
/* =========================================================
Composer Activation Assist V1
- makes the main composer explain the posting flow by itself
- compact numbered stepper, inspired by Activation guide motion language
========================================================= */
#postForm.composer-activation-steps {
position: relative;
display: grid;
gap: 12px;
padding: 2px 0 0;
}
#postForm.composer-activation-steps::before {
content: "";
position: absolute;
left: 15px;
top: 22px;
bottom: 26px;
width: 2px;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgba(134, 239, 172, 0.08),
rgba(34, 197, 94, 0.46),
rgba(134, 239, 172, 0.08)
);
pointer-events: none;
}
#postForm.composer-activation-steps::after {
content: "";
position: absolute;
left: 15px;
top: 22px;
width: 2px;
height: 26%;
border-radius: 999px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.82), transparent);
pointer-events: none;
opacity: 0.62;
animation: composerGuideRailFlow 3.4s ease-in-out infinite;
}
.composer-step {
position: relative;
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.composer-step-badge {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #052e16;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.10),
0 0 18px rgba(34, 197, 94, 0.24);
font-size: 13px;
font-weight: 900;
line-height: 1;
}
.composer-step-body {
min-width: 0;
padding: 10px 11px;
border: 1px solid rgba(34, 197, 94, 0.14);
border-radius: 17px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 250, 251, 0.86));
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.composer-step-label {
display: block;
margin: 0 0 7px;
color: #166534;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.035em;
text-transform: uppercase;
}
.composer-step--media .post-media-row {
margin-top: 2px;
}
#postForm.composer-activation-steps #postContent {
margin: 0;
}
#postForm.composer-activation-steps #postVisibility {
width: 100%;
min-height: 38px;
box-sizing: border-box;
border-radius: 14px;
border: 1px solid rgba(17, 24, 39, 0.14);
background: rgba(255, 255, 255, 0.96);
color: #111827;
padding: 8px 10px;
font-size: 14px;
font-weight: 650;
outline: none;
}
#postForm.composer-activation-steps #postVisibility:focus {
border-color: rgba(22, 163, 74, 0.52);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
#postForm.composer-activation-steps .composer-step--submit button[type="submit"] {
width: 100%;
min-height: 42px;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.65);
background:
linear-gradient(135deg, rgba(219, 234, 254, 1), rgba(191, 219, 254, 0.98));
color: #0b66ff;
font-size: 15px;
font-weight: 900;
box-shadow: 0 12px 24px rgba(59, 130, 246, 0.14);
}
#postForm.composer-activation-steps .composer-step--submit button[type="submit"]:hover {
background:
linear-gradient(135deg, rgba(207, 228, 255, 1), rgba(191, 219, 254, 1));
border-color: rgba(79, 151, 248, 0.86);
}
.post-form.composer-activation-assist-live .composer-step-badge {
animation: composerGuideBadgePulse 1.45s ease-in-out 4;
}
.post-form.composer-activation-assist-live .composer-step-body {
animation: composerGuideBodyGlow 1.45s ease-in-out 4;
}
.post-form.composer-activation-assist-live .composer-step--media .composer-step-body {
border-color: rgba(34, 197, 94, 0.44);
box-shadow:
0 0 0 3px rgba(34, 197, 94, 0.10),
0 14px 30px rgba(22, 128, 58, 0.12);
}
@keyframes composerGuideRailFlow {
0%, 18% {
transform: translateY(-125%);
opacity: 0;
}
42%, 68% {
opacity: 0.62;
}
100% {
transform: translateY(285%);
opacity: 0;
}
}
@keyframes composerGuideBadgePulse {
0%, 100% {
transform: scale(1);
}
45% {
transform: scale(1.08);
box-shadow:
0 0 0 5px rgba(34, 197, 94, 0.14),
0 0 24px rgba(34, 197, 94, 0.34);
}
}
@keyframes composerGuideBodyGlow {
0%, 100% {
border-color: rgba(34, 197, 94, 0.14);
}
45% {
border-color: rgba(34, 197, 94, 0.34);
}
}
@media (max-width: 900px) {
.composer-step {
grid-template-columns: 30px minmax(0, 1fr);
gap: 9px;
}
.composer-step-badge {
width: 28px;
height: 28px;
font-size: 12px;
}
.composer-step-body {
padding: 9px 10px;
border-radius: 15px;
}
#postForm.composer-activation-steps::before,
#postForm.composer-activation-steps::after {
left: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
#postForm.composer-activation-steps::after,
.post-form.composer-activation-assist-live .composer-step-badge,
.post-form.composer-activation-assist-live .composer-step-body {
animation: none !important;
}
}
/* =========================================================
Composer Activation Assist V1 (E N D)
========================================================= */
/* =========================================================
First Memory Momentum Card V1
- inline next-step card after a successful Home-feed post
- keeps momentum without interrupting the new post view
========================================================= */
.first-memory-momentum-card {
position: relative;
width: min(100%, 420px);
margin: 8px auto 22px;
padding: 17px 16px 16px;
box-sizing: border-box;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: 22px;
color: #f8fafc;
background:
radial-gradient(circle at 16% 0%, rgba(34, 197, 94, 0.24), transparent 32%),
radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.14), transparent 30%),
linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.94));
box-shadow:
0 22px 52px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
overflow: hidden;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.22s ease,
transform 0.22s ease;
}
.first-memory-momentum-card::before {
content: "";
position: absolute;
inset: -1px;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.10) 24%, transparent 46%);
transform: translateX(-120%);
animation: firstMemoryMomentumSheen 4.4s ease-in-out infinite;
}
.first-memory-momentum-card::after {
content: "";
position: absolute;
left: 37px;
top: 60px;
bottom: 18px;
width: 2px;
border-radius: 999px;
background: linear-gradient(
to bottom,
rgba(134, 239, 172, 0.08),
rgba(34, 197, 94, 0.38),
rgba(134, 239, 172, 0.08)
);
pointer-events: none;
}
.first-memory-momentum-card.is-visible {
opacity: 1;
transform: translateY(0);
}
.first-memory-momentum-card.is-leaving {
opacity: 0;
transform: translateY(6px);
}
.first-memory-momentum-card > * {
position: relative;
z-index: 1;
}
.first-memory-momentum-card__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(240, 253, 244, 0.88);
background: rgba(15, 23, 42, 0.54);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 19px;
font-weight: 850;
line-height: 1;
cursor: pointer;
}
.first-memory-momentum-card__close:hover {
background: rgba(34, 197, 94, 0.14);
border-color: rgba(134, 239, 172, 0.35);
}
.first-memory-momentum-card__mark {
width: 38px;
height: 38px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #052e16;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
box-shadow:
0 0 0 5px rgba(34, 197, 94, 0.10),
0 0 24px rgba(34, 197, 94, 0.28);
font-size: 18px;
font-weight: 950;
animation: firstMemoryMomentumMarkPulse 2.6s ease-in-out infinite;
}
.first-memory-momentum-card__body {
min-width: 0;
padding-right: 22px;
}
.first-memory-momentum-card__eyebrow {
margin: 0 0 4px;
color: rgba(134, 239, 172, 0.95);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.first-memory-momentum-card__title {
margin: 0;
color: #ffffff;
font-size: clamp(16px, 4.2vw, 19px);
line-height: 1.18;
font-weight: 950;
letter-spacing: -0.02em;
}
.first-memory-momentum-card__text {
margin: 8px 0 0;
color: rgba(226, 232, 240, 0.84);
font-size: 13px;
line-height: 1.42;
}
.first-memory-momentum-card__actions {
margin-top: 13px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.first-memory-momentum-card__button {
appearance: none;
border: 1px solid rgba(134, 239, 172, 0.18);
border-radius: 999px;
padding: 8px 11px;
color: rgba(240, 253, 244, 0.92);
background: rgba(15, 23, 42, 0.48);
font-size: 12px;
font-weight: 850;
line-height: 1.1;
cursor: pointer;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
transition:
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease;
}
.first-memory-momentum-card__button:hover {
transform: translateY(-1px);
border-color: rgba(134, 239, 172, 0.36);
background: rgba(34, 197, 94, 0.12);
}
.first-memory-momentum-card__button--primary {
color: #052e16;
background: linear-gradient(135deg, #bbf7d0, #22c55e);
border-color: rgba(187, 247, 208, 0.55);
}
.first-memory-momentum-card__button--primary:hover {
background: linear-gradient(135deg, #dcfce7, #22c55e);
}
@keyframes firstMemoryMomentumSheen {
0%, 38% {
transform: translateX(-120%);
opacity: 0;
}
48%, 62% {
opacity: 1;
}
76%, 100% {
transform: translateX(120%);
opacity: 0;
}
}
@keyframes firstMemoryMomentumMarkPulse {
0%, 100% {
transform: scale(1);
}
45% {
transform: scale(1.07);
box-shadow:
0 0 0 6px rgba(34, 197, 94, 0.13),
0 0 28px rgba(34, 197, 94, 0.34);
}
}
@media (max-width: 680px) {
.first-memory-momentum-card {
width: 100%;
grid-template-columns: 40px minmax(0, 1fr);
padding: 16px 14px 15px;
border-radius: 20px;
}
.first-memory-momentum-card::after {
left: 33px;
}
.first-memory-momentum-card__mark {
width: 34px;
height: 34px;
font-size: 16px;
}
.first-memory-momentum-card__body {
padding-right: 20px;
}
.first-memory-momentum-card__actions {
display: grid;
grid-template-columns: 1fr;
}
.first-memory-momentum-card__button {
width: 100%;
justify-content: center;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.first-memory-momentum-card,
.first-memory-momentum-card::before,
.first-memory-momentum-card__mark {
animation: none !important;
transition: none !important;
}
}
/* =========================================================
First Memory Momentum Card V1 (E N D)
========================================================= */
/* *******************************************************************************/
/*****************************************************************************
/* === Make the "Choose file" button look like a feed tab =================== */
/* Base button */
#postMedia::file-selector-button,
#postForm input[type="file"]::-webkit-file-upload-button{
display: inline-flex;
align-items: center;
justify-content: center;
/* Size to match tabs (tweak if your tabs differ slightly) */
height: 36px;
padding: 0 14px;
border-radius: 18px; /* pill like your tabs */
border: 1px solid #60a5fa; /* tab border */
background: #dbeafe; /* tab bg */
color: #0b66ff; /* tab text */
font-weight: 200;
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
/* Hover / active states to match tabs */
#postMedia::file-selector-button:hover,
#postForm input[type="file"]::-webkit-file-upload-button:hover{
background: #eef2f7;
border-color: #c5ced9;
}
#postMedia::file-selector-button:active,
#postForm input[type="file"]::-webkit-file-upload-button:active{
background: #e5eaf1;
}
/* Focus ring similar to tabs */
#postMedia:focus-visible::file-selector-button,
#postForm input[type="file"]:focus-visible::-webkit-file-upload-button{
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Keep spacing in the form tidy when textarea is hidden */
#postForm input[type="file"]{
margin: 0; /* rely on form gap */
}
/* Mobile: match tab height if yours is smaller */
@media (max-width: 900px){
#postMedia::file-selector-button,
#postForm input[type="file"]::-webkit-file-upload-button{
height: 34px;
padding: 0 12px;
border-radius: 17px;
font-size: 13px;
}
}
/* === Post media row + remove-file button =============================== */
.post-media-row{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
#clearPostMediaBtn,
#postForm .clear-post-media-btn{
align-items: center;
justify-content: center;
height: 36px;
padding: 0 14px;
border-radius: 18px;
border: 1px solid #d1d5db;
background: #f9fafb;
color: #111827;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
}
#clearPostMediaBtn:not([hidden]),
#postForm .clear-post-media-btn:not([hidden]){
display: inline-flex;
}
#clearPostMediaBtn[hidden],
#postForm .clear-post-media-btn[hidden]{
display: none !important;
}
#clearPostMediaBtn:hover,
#postForm .clear-post-media-btn:hover{
background: #eef2f7;
border-color: #c5ced9;
}
#clearPostMediaBtn:active,
#postForm .clear-post-media-btn:active{
transform: translateY(1px);
}
#clearPostMediaBtn:focus-visible,
#postForm .clear-post-media-btn:focus-visible{
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
@media (max-width: 900px){
#clearPostMediaBtn,
#postForm .clear-post-media-btn{
height: 34px;
padding: 0 12px;
border-radius: 17px;
font-size: 13px;
}
}
/* === Post media row + remove-file button (E N D) ======================= */
/*****************************************************************************
/* === ake the "Choose file" button look like a feed tab (E N D)========== */
/* *******************************************************************************/
/* === Make the Post button look like a feed tab (blue variant) ========== */
/* Support both