#items-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Wider cards */
gap: 2rem;
max-width: 80%;
margin: 2rem auto;
}
body img.flying-image {
position: fixed;
z-index: 1001; /* Above everything else */
pointer-events: none; /* Non-interactive */
border-radius: 10px; /* Rounded corners */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
transition: transform 0.3s ease, opacity 0.3s ease;
}
.item-card {
position: relative; /* Add this to ensure proper z-index context */
z-index: 1; /* Ensure cards are above other elements */
background: rgba(255, 255, 255, 0.08); /* Subtle box color */
border: 2px solid rgba(255, 255, 255, 0.2); /* Bordered box */
border-radius: 15px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 8px 16px rgba(150, 120, 200,
0.5); /* Shadow effect */
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1rem;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.item-card:hover {
transform: scale(1.05);
box-shadow: 0px 10px 20px rgba(150, 120, 200, 0.6), 0px 15px 30px rgba(150,
120, 200, 0.4);
}
.item-image {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 1rem;
transition: transform 0.4s ease;
}
.item-card:hover .item-image {
transform: scale(1.1);
}
.item-name {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 0.5rem;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
}
.item-price {
font-size: 1.2rem;
font-weight: 600;
color: #a078d1; /* Purple highlight */
text-align: center;
margin-bottom: 1rem;
}
.header-right {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: row; /* Ensure proper alignment of cart and profile */
gap: 1rem; /* Space between cart and profile */
align-items: center;
justify-content: flex-end; /* Align to the end of the row */
z-index: 1000; /* Keep this higher than search-container */
padding: 0.5rem; /* Add padding for spacing */
background: rgba(0, 0, 0, 0.5); /* Optional background to differentiate */
border-radius: 10px; /* Round the background edges */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for contrast */
}
#profile-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.4);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, filter 0.3s ease;
}
.cart-icon {
width: 35px;
height: 35px;
object-fit: contain;
filter: brightness(0) invert(1);
transition: transform 0.3s ease, filter 0.3s ease;
pointer-events: all;
}
.cart-icon-popup {
width: 35px;
height: 35px;
object-fit: contain;
filter: brightness(0) invert(1);
transition: transform 0.3s ease, filter 0.3s ease;
pointer-events: all;
}
.cart-icon:hover,
#profile-photo:hover {
transform: scale(1.2);
filter: brightness(1.5);
}
.search-container {
position: sticky;
top: 0;
width: 100%;
z-index: 10; /* Reduced from 1000 to allow header elements to be on top */
display: flex;
justify-content: center;
padding: 0.5rem 0;
background: transparent; /* Transparent background */
transition: transform 0.3s ease-in-out; /* Smooth hide/show */
}
/* Search Bar Input */
#search-bar {
width: 80%;
max-width: 600px;
padding: 0.75rem;
border: none;
border-radius: 20px;
font-size: 1rem;
color: black;
font-weight: bold;
font-style: normal;
background: rgba(255, 255, 255, 0.85); /* Glassy effect */
color: black;
outline: none;
transition: all 0.3s ease;
box-shadow:
inset 0px 0px 8px rgba(255, 255, 255, 0.2), /* Inner shadow for depth */
0px 4px 8px rgba(0, 0, 0, 0.4); /* Outer soft shadow */
}
/* Focus Effect */
#search-bar:focus {
background: rgba(255, 255, 255, 0.1);
box-shadow:
inset 0px 0px 10px rgba(255, 255, 255, 0.3), /* Enhanced inner shadow */
0px 6px 12px rgba(150, 120, 200, 0.5), /* Purple glow */
0px 10px 20px rgba(150, 120, 200, 0.3); /* Lighter outer glow */
transform: scale(1.02);
}
/* Placeholder Text */
#search-bar::placeholder {
color: black;
font-weight: bold;
font-size: 0.9rem;
font-style: normal;
}
/* Hover Effect */
#search-bar:hover {
background: rgba(8, 7, 7, 0.3);
box-shadow:
inset 0px 0px 8px rgba(255, 255, 255, 0.2),
0px 6px 10px rgba(255, 255, 255, 0.4),
0px 8px 15px rgba(150, 120, 200, 0.5); /* Enhanced hover glow */
}
/* Responsive Design for Search Bar */
@media (max-width: 768px) {
#search-bar {
width: 90%;
font-size: 0.9rem;
}
}
/* Enhanced Button Container */
/* Enhanced Button Container */
.button-container {
position: fixed;
display: flex;
gap: 0.5rem;
background: rgba(255, 255, 255, 1);
backdrop-filter: blur(10px);
padding: 0.5rem;
border-radius: 15px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 8px 16px rgba(150, 120, 200,
0.5);
animation: slideIn 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
z-index: 999; /* Lower than header-right but above most elements */
border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 768px) {
.button-container {
top: 60px; /* Offset from the top to avoid overlapping with header */
left: 10px; /* Offset from the left */
}
}
/* General Button Styling */
.button-container button {
width: auto; /* Allow buttons to size dynamically */
min-width: 100px; /* Minimum width for readability */
height: 45px;
border-radius: 10px; /* Rounded rectangle shape */
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem; /* Space between icon and text */
border: none;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
backdrop-filter: blur(10px); /* Consistent blur effect */
border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */
box-shadow:
0px 2px 4px rgba(0, 0, 0, 0.1), /* Inner shadow */
0px 4px 8px rgba(0, 0, 0, 0.1); /* Outer shadow */
font-size: 1rem; /* Add text for clarity */
font-weight: bold;
color: white; /* White text for contrast */
}
/* Hover Effect for Buttons */
.button-container button:hover {
transform: scale(1.05);
box-shadow:
0px 4px 8px rgba(0, 0, 0, 0.2),
0px 8px 16px rgba(150, 120, 200, 0.5); /* Enhanced glow on hover */
background: rgba(255, 255, 255, 0.3); /* Slightly brighter background */
}
/* Add-to-Cart Button */
.button-container .add-to-cart {
background: rgba(150, 120, 200, 0.4); /* Purple tint */
border: 1px solid rgba(150, 120, 200, 0.6); /* Matching border */
}
.button-container .add-to-cart:hover {
background: rgba(150, 120, 200, 0.6); /* Brighter purple on hover */
box-shadow:
0px 4px 8px rgba(150, 120, 200, 0.5),
0px 8px 16px rgba(150, 120, 200, 0.3); /* Enhanced purple glow */
}
.button-container .add-to-cart img {
filter: brightness(0) invert(1); /* White icon */
transition: transform 0.3s ease;
}
.button-container .add-to-cart:hover img {
transform: scale(1.1); /* Slight zoom effect */
}
/* Close Button */
.button-container .close {
background: rgba(255, 0, 0, 0.4); /* Intense red tint */
border: 1px solid rgba(255, 0, 0, 0.6); /* Matching red border */
color: white; /* White text for contrast */
position: relative; /* Required for positioning the cross */
}
.button-container .close:hover {
background: rgba(255, 0, 0, 0.6); /* Brighter red on hover */
box-shadow:
0px 4px 8px rgba(255, 0, 0, 0.5),
0px 8px 16px rgba(255, 0, 0, 0.3); /* Enhanced red glow */
}
.button-container .close:active {
background: rgba(130, 0, 0, 0.6); /* Darker red on click */
}
/* Cross Lines */
.button-container .close .X,
.button-container .close .Y {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px; /* Longer lines for visibility */
height: 3px; /* Thicker lines for better contrast */
background-color: white; /* Pure white for maximum visibility */
transform: translate(-50%, -50%) rotate(45deg); /* Centered rotation */
transition: background-color 0.3s ease;
}
.button-container .close .Y {
transform: translate(-50%, -50%) rotate(-45deg); /* Opposite rotation */
}
/* Hover Effect for Cross Lines */
.button-container .close:hover .X,
.button-container .close:hover .Y {
background-color: white; /* Keep white for hover */
}
/* Animations */
@keyframes slideIn {
0% {
transform: translateY(20px) scale(0.9);
opacity: 0;
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
@keyframes slideOut {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(20px) scale(0.9);
opacity: 0;
}
}
.button-container.removing {
animation: slideOut 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
