diff --git a/Website/css/styles.css b/Website/css/styles.css index 04a9a8c48..cd725ddee 100644 --- a/Website/css/styles.css +++ b/Website/css/styles.css @@ -4,30 +4,26 @@ animation: fadeIn 1s ease-in-out forwards; } - ::-webkit-scrollbar { - width: 7.5px; - } - - ::-webkit-scrollbar-track { - background: #c5d8eb8d; - border-radius: 4px; - } - - ::-webkit-scrollbar-thumb { - /* background: #4d7fff; */ - background: linear-gradient(45deg, rgb(0, 87, 208), #002a95); - border-radius: 10px; - text-shadow: 2px 2px 5px #004cff; - border: 1.5px solid rgba(0, 34, 255, 0.479); - transition: background 0.9s ease-in-out; - } - - ::-webkit-scrollbar-thumb:hover { - /* background: #00ffff; */ - /* background: linear-gradient(45deg, #021e85, #00caca); */ - background: linear-gradient(45deg, rgb(0, 54, 171), #0268a8); - } + width: 7.5px; +} + +::-webkit-scrollbar-track { + background: #c5d8eb8d; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(45deg, rgb(0, 87, 208), #002a95); + border-radius: 10px; + text-shadow: 2px 2px 5px #004cff; + border: 1.5px solid rgba(0, 34, 255, 0.479); + transition: background 0.9s ease-in-out; +} + +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(45deg, rgb(0, 54, 171), #0268a8); +} @keyframes fadeIn { from { @@ -37,224 +33,234 @@ opacity: 1; } } + /* Slide-In Animations */ @keyframes slide-in-right { - 0% { - transform: translateX(100%); - opacity: 0; - } - 100% { - transform: translateX(0); - opacity: 1; - } + 0% { + transform: translateX(100%); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } } - .slide-in-right { - animation: slide-in-right 0.5s ease-out; + animation: slide-in-right 0.5s ease-out; } - /* Ensure full height of the body and remove margin/padding */ html, body { - height: 100%; - margin: 0; - padding: 0; + height: 100%; + margin: 0; + padding: 0; } body { - background-color: #0a0a2e; - font-family: 'Arial', sans-serif; - display: flex; - flex-direction: column; + background-color: #0a0a2e; + font-family: 'Arial', sans-serif; + display: flex; + flex-direction: column; } + header { - background-color: #121245; - padding: 10px 20px; - animation: fadeIn 1s ease-in-out; + background-color: #121245; + padding: 10px 20px; + animation: fadeIn 1s ease-in-out; } .navbar { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } - .logo-container{ - display: flex; - cursor: pointer; - align-items: center; - } +.logo-container { + display: flex; + cursor: pointer; + align-items: center; +} - .logo-container img{ - filter: brightness(1) invert(1); - } +.logo-container img { + filter: brightness(1) invert(1); +} - a.logo-container{ - text-decoration: none; - } - - .logo-icon { - width: 30px; - height: 30px; - margin-right: 10px; - } - - .logo-text { - font-size: 18px; - font-weight: bold; - color: #f1f1f1; - } +a.logo-container { + text-decoration: none; +} + +.logo-icon { + width: 30px; + height: 30px; + margin-right: 10px; +} + +.logo-text { + font-size: 18px; + font-weight: bold; + color: #f1f1f1; +} .brand-name { - font-size: 1.5em; - color: #f1f1f1; - margin-left: 10px; + font-size: 1.5em; + color: #f1f1f1; + margin-left: 10px; } .nav-links { - list-style: none; - display: flex; - flex-grow: 1; - /* Makes the nav links take up available space */ - justify-content: flex-end; - /* Align links to the left */ - gap: 50px; - /* Adds space between each link */ - margin-left: 20px; - right: 10px; - /* Adjust this value for the gap between logo and links */ + list-style: none; + display: flex; + flex-grow: 1; + justify-content: flex-end; + gap: 50px; + margin-left: 20px; + right: 10px; } + .line { - display: none; - flex-direction: column; - cursor: pointer; + display: none; + flex-direction: column; + cursor: pointer; } .line div { - width: 25px; - height: 3px; - background-color: #fff; - margin: 4px 0; - transition: 0.4s; + width: 25px; + height: 3px; + background-color: #fff; + margin: 4px 0; + transition: 0.4s; } /* Hamburger Active State */ .change .bar1 { - transform: rotate(-45deg) translate(-10px, 8px); + transform: rotate(-45deg) translate(-10px, 8px); } .change .bar2 { - opacity: 0; + opacity: 0; } .change .bar3 { - transform: rotate(45deg) translate(-5px, -6px); + transform: rotate(45deg) translate(-5px, -6px); } -.nav-icons{ - display: flex; - gap:20px; + +.nav-icons { + display: flex; + gap: 20px; } + /* Responsive */ @media (max-width: 1024px) { - .nav-links { - flex-direction: column; - align-items: center; - position: absolute; - padding:10px; - top: 40px; - right: 0; - gap: 10px; - width: 100%; - background-color: #13034f; - opacity: 0; - visibility: hidden; - transform: translateY(-20px); - transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; - } + .nav-links { + flex-direction: column; + align-items: center; + position: absolute; + padding: 10px; + top: 40px; + right: 0; + gap: 10px; + width: 100%; + background-color: #13034f; + opacity: 0; + visibility: hidden; + transform: translateY(-20px); + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; + } - .nav-links.active { - opacity: 1; - visibility: visible; - transform: translateY(0); - } + .nav-links.active { + opacity: 1; + visibility: visible; + transform: translateY(0); + } - .nav-links li { - margin: 10px 0; - } + .nav-links li { + margin: 10px 0; + } - .line { - display: flex; - } + .line { + display: flex; + } } - +/* Hover Effect for Navigation Links */ .nav-links a { - text-decoration: none; - color: #f1f1f1; - font-weight: bold; - white-space: nowrap; - /* Prevents wrapping of links */ + text-decoration: none; + color: #f1f1f1; + font-weight: bold; + position: relative; + white-space: nowrap; + transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out; } -.nav-links a img{ - width: 30px; - height: 30px; - border-radius: 50%; - filter: brightness(0) invert(1); - margin-top: -5px; +.nav-links a:hover { + color: yellow; /* Yellow color on hover */ + transform: scale(1.1); + text-shadow: 0 0 10px yellow, 0 0 20px yellow; } -.nav-links a:hover { - text-decoration: underline; +.nav-links a img { + width: 30px; + height: 30px; + border-radius: 50%; + filter: brightness(0) invert(1); + margin-top: -5px; } +/* Dropdown */ .dropdown { - float: left; - overflow: hidden; + float: left; + overflow: hidden; } .dropbtn { - font-size: 16px; - border: none; - outline: none; - color: white; - font-weight: bold; - background-color: inherit; - font-family: inherit; - margin: 0; - cursor: pointer; + font-size: 16px; + border: none; + outline: none; + color: white; + font-weight: bold; + background-color: inherit; + font-family: inherit; + margin: 0; + cursor: pointer; } .dropdown-content { - display: none; - position: absolute; - background-color: #f0f4f8; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: absolute; + background-color: #f0f4f8; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 1; } -.dark-mode .dropdown-content{ - background-color: #170179; + +.dark-mode .dropdown-content { + background-color: #170179; } + .dropdown-content a { - color: black; - padding: 12px 16px; - text-decoration: none; - display: block; - text-align: left; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} + +/* Hover Effect for Dropdown Items */ +.dropdown-content a:hover { + color: #0066cc; } -/* Show dropdown on hover */ .dropdown:hover .dropdown-content { - display: block; + display: block; } .show { - display: block; + display: block; } + main { padding: 20px; flex: 1;