/* --------------------------------------------------- Color Scheme: #000000 - Black #282A3A - Dark Grey #735F32 - Brown #C69749 - Dark Beige ----------------------------------------------------- */ /* General Styles */ body { display: flex; flex-direction: column; /* Stack header, main, and footer vertically */ min-height: 100vh; /* Ensure the body is at least the full height of the viewport */ font-family: Bebas Neue, serif; margin: 0; padding: 0; box-sizing: border-box; background-color: #000000; /* Dark Grey */ color: #C69749; /* Dark Beige */ } .bebas-neue-regular { font-family: "Bebas Neue", serif; font-weight: 400; font-style: normal; } /* Push footer to the bottom */ main { flex: 1; /* Allow the main content to grow and fill the space */ } /* Styles specific to the login page: center the login form */ /* Ensure your login.html's tag includes class="login-page" */ .login-page main { display: flex !important; justify-content: center !important; /* Centers horizontally */ align-items: center !important; /* Centers vertically */ min-height: 100vh - 180px; /* Adjust based on your header/footer heights */ width: 100%; } header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: #000000; /* Black */ color: #C69749; /* Dark Beige */ position: relative; } header .logo img { height: 75px; margin-right: auto; /* Pushes the logo to the far left */ } .hamburger { display: none; } /* Center navigation */ nav { margin: 0 auto; /* Ensures nav is centered horizontally */ } nav ul { list-style: none; display: flex; gap: 10rem; margin: 0; padding: 0; } nav a { text-decoration: none; color: #C69749; /* Dark Beige */ font-weight: bold; font-size: 2.1rem; letter-spacing: .2rem; transition: color 0.3s; } nav a:hover { color: #735F32; /* Brown */ } /* Gallery Styles */ .gallery { position: relative; overflow: hidden; max-width: 100%; margin: 0 auto; padding: 2rem; background-color: #282A3A; border-radius: 10px; /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/ } .carousel { display: flex; gap: 40px; /* Increase space between images */ animation: scroll linear infinite; /* Updated scrolling animation */ } .carousel img { width: auto; height: auto; border-radius: 15px; /* Rounded corners */ box-shadow: 0 2px 8px rgba(0, 0, 0, .8); transition: transform 0.3s, box-shadow 0.3s; } /* Define specific margin-top variations */ .margin-top-1 { margin-top: 50px; } .margin-top-2 { margin-top: 10px; } .margin-top-3 { margin-top: 10px; } .margin-top-4 { margin-top: 10px; } .margin-top-5 { margin-top: 10px; } /* Different sizes for a "gallery wall" look */ .carousel img.small { width: 300px; height: 200px; } .carousel img.medium { width: 600px; height: 400px; } .carousel img.large { width: 800px; height: 600px; } /* Hover Effect */ .carousel img:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Animation */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Container for the login form */ .login-container { background-color: #282A3A; /* Dark Gray background for the form container */ padding: 40px 120px; border: 2px solid #000000; /* Added border (Black) */ border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } /* Style the login form to stack its children vertically */ #login-form { display: flex; flex-direction: column; gap: 1rem; /* Space between input fields and the button */ } /* Style for input fields and the button */ #login-form input, #login-form button { padding: 0.8rem 2rem; font-size: 1rem; border: 1px solid #7E99A3; /* Medium Gray-Blue for the border */ border-radius: 5px; } /* Button specific styling */ #login-form button { background-color: #4C585B; /* Dark Gray-Blue for the button */ color: #F4EDD3; /* Soft Beige text */ border: none; cursor: pointer; transition: background-color 0.3s; } #login-form button:hover { background-color: #7E99A3; /* Medium Gray-Blue on hover */ } .dashboard-container { background-color: #282A3A; /* Dark Gray */ color: #F4EDD3; /* Soft Beige text */ padding: 5rem 20rem; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center; } /* --------------------------------------------------- Gallery Page Layout for Sports, Macro, Scapes ----------------------------------------------------- */ .gallery-page { display: flex; height: 100%; /* Fill available height */ } /* Left Column: Folder List */ .folder-list { width: 200px; background-color: #282A3A; /* Matches body background */ overflow-y: auto; padding: 1rem; border-right: 1px solid #C69749; } .folder-list ul { list-style: none; padding: 0; margin: 0; } .folder-list li { margin-bottom: 10px; padding: 5px; cursor: pointer; color: #C69749; } .folder-list li:hover { background-color: #735F32; /* Brown on hover */ } /* Right Column: Gallery Container */ .gallery-container { flex: 1; padding: 1rem; overflow-y: auto; background-color: #282A3A; } /* Gallery Grid: Four Columns with 15px gap */ #gallery-grid { /* Use CSS multi-column layout for a masonry effect */ column-count: 4; /* Four columns */ column-gap: 18px; /* 15px gap between columns */ } /* Hide the mobile menu by default */ .mobile-menu { display: none; position: absolute; top: 60px; /* Adjust to position below the header */ right: 0; background-color: #282A3A; /* Matches your body/ gallery background */ width: 200px; /* Adjust as needed */ z-index: 1000; } @media (max-width: 768px) { body { overflow-x: hidden; } .desktop-nav { display: none; } nav ul { display: none; } /* Optionally, hide any existing dynamic auth link in the header too */ header .dynamic-auth-link { display: none; } .hamburger { display: block; position: absolute; right: 20px; top: 20px; font-size: 4rem; color: #C69749; /* Match your designated color */ cursor: pointer; } .mobile-menu { display: none; position: absolute; top: 60px; right: 0; background-color: #282A3A; width: 125px; height: 200px; z-index: 1000; padding: 10px; border-radius: 10px; } /* Show the mobile menu when it has the 'open' class */ .mobile-menu.open { display: block; } .mobile-menu ul { display: block; } .mobile-menu ul li { margin-bottom: 10px; padding-left: 5px; } /* Stack the folder list and gallery container vertically */ .gallery-page { flex-direction: column; } /* Make the folder list span full width */ .folder-list { width: 100%; display: flex; overflow-x: auto; /* Allow horizontal scrolling if items exceed viewport */ padding: 15px; /* Optional: add some padding around the list */ border-bottom: 1px solid #C69749; /* Optional: add a separator */ } /* Remove default vertical list styling */ .folder-list ul { display: flex; flex-direction: row; padding: 0; margin: 0; list-style: none; } /* Add spacing between folder items */ .folder-list li { margin-right: 15px; white-space: nowrap; /* Prevent folder names from wrapping */ padding: 5px 10px; background-color: #282A3A; /* Use matching background color */ color: #C69749; /* Dark Beige text */ border-radius: 5px; cursor: pointer; } /* Make the gallery container span full width */ .gallery-container { width: 100%; } /* Adjust the column count for the gallery grid if needed */ #gallery-grid { column-count: 1; /* Single column for small screens */ } #gallery-grid img { width: 90%; margin-left: auto; margin-right: auto; } } /* Gallery Images */ /* Style the images to work within a multi-column layout */ #gallery-grid img { width: 100%; /* Take full column width */ display: inline-block; /* Prevent them from breaking columns */ margin-bottom: 15px; /* 15px space below each image */ object-fit: cover; /* Preserve aspect ratio and cover the container */ transition: transform 0.3s; cursor: pointer; } #gallery-grid img:hover { transform: scale(1.05); } /* Lightbox Styles */ .lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; } .lightbox-overlay img { max-width: 70%; max-height: 70%; } /* Footer */ footer { text-align: center; padding: 1rem; background-color: #000000; /* Black */ color: #C69749; /* Dark Beige */ } /* Social Media Links in Footer */ footer .social-links { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem; } footer .social-links a img { width: 40px; /* Adjust icon size as needed */ height: auto; /* Optionally, if you have monochrome icons, you can use filter to set their color. For example, if your icons are black and you want to match the Dark Beige (#C69749): filter: invert(0.8) sepia(1) saturate(3) hue-rotate(10deg); */ }