/* --- Global & Font Styling --- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); body { font-family: 'Montserrat', sans-serif; margin: 0; background-color: #ffffff; color: #1a1a1a; } .container { width: 90%; max-width: 1400px; /* A wider container for a more spacious feel */ margin: 0 auto; } /* --- Header & Navigation Bar --- */ header { background-color: #ffffff; border-bottom: 1px solid #e0e0e0; padding: 20px 0; position: sticky; top: 0; z-index: 1000; } .nav-bar { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5em; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .logo a { text-decoration: none; color: #1a1a1a; } /* Main navigation (centered) */ nav.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav.main-nav li { margin: 0 20px; } nav.main-nav a { color: #333; text-decoration: none; font-size: 0.9em; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 5px; position: relative; } nav.main-nav a::after { content: ''; position: absolute; width: 0; height: 1px; display: block; margin-top: 5px; right: 0; background: #1a1a1a; transition: width .3s ease; } nav.main-nav a:hover::after { width: 100%; left: 0; background: #1a1a1a; } /* User navigation (right-aligned icons) */ nav.user-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; } nav.user-nav li { margin-left: 25px; } nav.user-nav a { color: #1a1a1a; font-size: 1.2em; /* Make icons slightly larger */ text-decoration: none; } /* --- Main Content & Item Cards --- */ main { padding-top: 40px; } .items-section h2 { text-align: center; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 50px; } .items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 40px; } .item-card { background-color: transparent; text-align: center; } .item-card img { width: 100%; height: 300px; object-fit: cover; display: block; margin-bottom: 15px; } .card-content h3 { margin: 10px 0 5px 0; font-size: 1.1em; font-weight: 500; } .card-content p { color: #888; font-size: 0.9em; } /* --- Footer --- */ footer { text-align: center; padding: 40px 0; margin-top: 60px; border-top: 1px solid #e0e0e0; } /* --- NEW: Header Inline Search Styling --- */ .header-search-form { display: flex; align-items: center; background-color: #f5f5f5; border-radius: 20px; padding: 2px 5px; } .header-search-form input[type="text"] { border: none; background: transparent; outline: none; padding: 8px 10px; width: 150px; /* Adjust width as needed */ font-family: 'Montserrat', sans-serif; font-size: 0.9em; transition: width 0.4s ease-in-out; } /* Optional: make the search bar expand on focus */ .header-search-form input[type="text"]:focus { width: 200px; } .header-search-form button { border: none; background: transparent; cursor: pointer; padding: 8px; font-size: 1em; color: #555; } /* --- NEW: Instagram-style Auth Page Styling --- */ /* We'll add this class to the tag on the login/register pages */ body.auth-page { background-color: #fafafa; /* The light grey background */ display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; } .auth-container { max-width: 350px; width: 100%; text-align: center; } .auth-box { background-color: #ffffff; border: 1px solid #dbdbdb; border-radius: 3px; padding: 40px; margin-bottom: 10px; } .auth-logo { font-family: 'Montserrat', sans-serif; font-size: 2em; /* A good size for the auth pages */ font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; color: #1a1a1a; } .auth-form input { width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid #dbdbdb; background-color: #fafafa; border-radius: 3px; font-size: 0.9em; box-sizing: border-box; } .auth-form button { width: 100%; padding: 9px; margin-top: 15px; border: none; border-radius: 8px; background-color: #4cb5f9; color: white; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .auth-form button:hover { background-color: #1877f2; } .auth-divider { display: flex; align-items: center; margin: 20px 0; color: #8e8e8e; font-weight: bold; font-size: 0.8em; } .auth-divider::before, .auth-divider::after { content: ''; flex-grow: 1; height: 1px; background-color: #dbdbdb; } .auth-divider::before { margin-right: 18px; } .auth-divider::after { margin-left: 18px; } .forgot-password { margin-top: 15px; font-size: 0.8em; } .forgot-password a { color: #00376b; text-decoration: none; } .switch-auth-box { background-color: #ffffff; border: 1px solid #dbdbdb; border-radius: 3px; padding: 20px; font-size: 0.9em; } .switch-auth-box a { color: #4cb5f9; font-weight: bold; text-decoration: none; } /* --- NEW: Notification Indicator Styling --- */ .user-nav a { position: relative; /* Needed for positioning the dot */ } .notification-indicator { position: absolute; top: -5px; right: -8px; width: 10px; height: 10px; background-color: #ff3b30; /* A bright red */ border-radius: 50%; border: 2px solid white; } /* --- Item Detail Page --- */ .item-detail-container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } .item-detail-image img { width: 100%; border-radius: 5px; } .item-detail-info h1 { margin-top: 0; font-size: 2.5em; font-weight: 700; } .item-detail-info .category { font-weight: 500; color: #888; text-transform: uppercase; } .item-detail-info .description { font-size: 1.1em; line-height: 1.6; } /* --- NEW: Styled Table for View Pages --- */ .styled-table { width: 100%; border-collapse: collapse; margin: 40px 0; font-size: 0.9em; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .styled-table thead tr { background-color: #f8f8f8; color: #333; text-align: left; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; } .styled-table th, .styled-table td { padding: 12px 15px; } .styled-table tbody tr { border-bottom: 1px solid #e0e0e0; } .styled-table tbody tr:last-of-type { border-bottom: 2px solid #1a1a1a; } .styled-table .item-image { max-width: 80px; max-height: 80px; border-radius: 4px; } /* --- NEW: Styling for Admin & Report Tables --- */ table.styled-table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin-top: 20px; } table.styled-table thead { background-color: #f8f8f8; border-bottom: 2px solid #e0e0e0; } table.styled-table th { padding: 15px; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } table.styled-table td { padding: 15px; border-bottom: 1px solid #e0e0e0; } table.styled-table tbody tr:last-child td { border-bottom: none; } table.styled-table .item-image { max-width: 80px; border-radius: 4px; display: block; margin-bottom: 5px; } /* Specific colors for match table headers */ table.styled-table .header-lost { color: #c62828; } table.styled-table .header-found { color: #2e7d32; } /* --- NEW: Notification Indicator Styling --- */ /* This creates a wrapper for the icon and the dot */ .notification-icon-wrapper { position: relative; display: inline-block; } /* This is the red dot */ .notification-indicator { position: absolute; top: -2px; /* Position it slightly above the icon */ right: -3px; /* Position it slightly to the right */ height: 8px; width: 8px; background-color: #c62828; /* A strong red color */ border-radius: 50%; border: 1px solid white; } /* --- NEW: Profile Page Section Styling --- */ .profile-section { border: 1px solid #e0e0e0; margin-top: 30px; padding: 30px; } .profile-section h3 { margin-top: 0; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; margin-bottom: 20px; } .profile-details dl { line-height: 2; } .profile-details dt { font-weight: 700; color: #1a1a1a; width: 150px; float: left; } .profile-details dd { color: #555; margin-left: 170px; margin-bottom: 10px; } .btn-secondary { display: inline-block; padding: 12px 30px; border: 1px solid #1a1a1a; color: #1a1a1a; text-decoration: none; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; transition: all 0.3s ease; } .btn-secondary:hover { background-color: #1a1a1a; color: white; } /* For success/error messages */ .message-box { padding: 15px; text-align: center; margin-bottom: 30px; border: 1px solid transparent; } .success-message { background-color: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; } .error-message { background-color: #ffcdd2; color: #c62828; border-color: #ef9a9a; } /* --- NEW: Item Details Claim Form Styling --- */ .claim-section { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0; } .claim-section h3 { text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 1.2em; margin-bottom: 20px; } /* --- NEW: Required Field Indicator --- */ .required-star { color: #c62828; /* A strong red color */ margin-left: 3px; font-weight: bold; } /* --- NEW: Filter & Sort Modal Styling --- */ .filter-sort-controls { display: flex; justify-content: flex-end; margin-bottom: 20px; } .filter-sort-button { background-color: #f8f8f8; border: 1px solid #ddd; padding: 10px 20px; cursor: pointer; font-weight: 500; font-family: 'Montserrat', sans-serif; display: flex; align-items: center; gap: 8px; /* Space between icon and text */ } /* Modal Background (hidden by default) */ .modal-overlay { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); /* Semi-transparent black */ } /* Modal Content Box */ .modal-content { background-color: #fff; margin: 10% auto; padding: 30px; border: 1px solid #888; width: 90%; max-width: 500px; position: relative; } .close-button { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; } .modal-content h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; } .modal-categories ul { list-style: none; padding: 0; columns: 2; /* Display categories in two columns */ } .modal-categories a { text-decoration: none; color: #333; } .modal-categories a.active { font-weight: bold; } /* --- NEW: Clean Filter Bar Styling --- */ .filter-bar { background-color: #f8f9fa; border: 1px solid #e0e0e0; padding: 15px 20px; margin-bottom: 40px; border-radius: 4px; } .filter-form { display: flex; align-items: center; gap: 20px; /* Space between form elements */ } .filter-form .form-group { margin-bottom: 0; /* Remove default bottom margin */ display: flex; align-items: center; gap: 10px; } .filter-form label { margin-bottom: 0; font-weight: 500; } .filter-form .btn-submit { width: auto; padding: 10px 20px; } .clear-link { margin-left: 10px; color: #555; text-decoration: none; font-size: 0.9em; } .clear-link:hover { text-decoration: underline; } /* --- NEW: Swiper Slider Customization --- */ .swiper-container { width: 100%; padding: 10px 0; /* Add some padding if needed */ } .swiper-slide { display: flex; justify-content: center; align-items: center; } /* Style the navigation arrows */ .swiper-button-next, .swiper-button-prev { color: #1a1a1a; /* Change arrow color to match your design */ transform: scale(0.7); /* Make arrows a bit smaller */ } /* Remove the default background from the arrows */ .swiper-button-next::after, .swiper-button-prev::after { background-image: none !important; font-size: 2em !important; /* Make the arrow icon itself larger */ } /* Find this existing rule in your file */ .form-container { max-width: 450px; /* CHANGE THIS */ margin: 60px auto; padding: 40px; border: 1px solid #e0e0e0; } /* Change it to this: */ .form-container { max-width: 600px; /* A wider container for more complex forms */ margin: 60px auto; padding: 40px; border: 1px solid #e0e0e0; }