Skip to content

Styled dark mode for faq page. #739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KalangiGeetaneha wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Styled dark mode for faq page. #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a7a6a5
Styled navbar and footer for faq page.
KalangiGeetaneha Oct 20, 2025
8764644
Navbar styled properly for companies page.
KalangiGeetaneha Oct 20, 2025
789ce3f
Dark mode styling for faq page (hero section).
KalangiGeetaneha Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
336 changes: 177 additions & 159 deletions companies.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,165 +188,196 @@
}

/* ================= Header & Navbar ================= */
.header {
background: var(--background);
box-shadow: var(--shadow-md);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}

.toggle-btn {
margin: 20px;
padding: 10px 20px;
cursor: pointer;
}

.navbar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem var(--container-padding);
}

.nav-brand .logo {
height: 45px;
width: auto;
}

/* Nav Menu */
.nav-menu {
list-style: none;
display: flex;
align-items: center;
gap: 1.5rem;
}

.nav-menu li {
position: relative;
}

.nav-link {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
padding: 0.5rem;
transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
color: var(--accent);
}

/* Dropdown */
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 180px;
padding: 0.5rem 0;
animation: fadeIn 0.3s ease;
}

.dropdown-content a {
display: block;
padding: 0.6rem 1rem;
color: var(--text-primary);
text-decoration: none;
transition: background 0.2s ease;
}

.dropdown-content a:hover {
background: var(--primary-50);
color: var(--accent);
}

.dropdown:hover .dropdown-content {
display: block;
}

/* Nav Actions */
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}

.theme-toggle {
background: transparent;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: var(--text-secondary);
transition: color 0.3s ease;
}
/* Header */
header {
background:white;
color:#60a5fa;
padding:12px 25px;
position: sticky;
top:0;
z-index:1000;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
transition:0.3s;
}

.theme-toggle:hover {
color: var(--accent);
}
.container {
display:flex;
justify-content:space-between;
align-items:center;
max-width:1300px;
margin:auto;
}

/* Buttons */
.btn {
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
/* Logo */
.logo a {
display:flex;
align-items:center;
color:#60a5fa;
text-decoration:none;
font-size:28px;
font-weight:700;
letter-spacing:1px;
}
.logo img {height:40px; margin-right:8px;}

/* Nav */
nav ul {
list-style:none;
display:flex;
align-items:center;
gap:15px;
}
nav ul li {position:relative;}
nav ul li a {
color:#60a5fa;
text-decoration:none;
padding:10px 18px;
display:block;
font-weight:500;
border-radius:5px;
transition:0.3s;
}
nav ul li a:hover {
background:#2563eb;
color:#2563eb;
}

.btn-ghost {
color: var(--accent);
background: transparent;
border: 1px solid var(--accent);
}
/* Dropdown */
.dropdown-menu {
display:none;
position:absolute;
top:100%;
left:0;
background:white;
min-width:220px;
border-radius:5px;
overflow:hidden;
box-shadow:0 5px 12px rgba(0,0,0,0.15);
z-index:1000;
transition:0.3s;
}
.dropdown-menu li a {padding:10px 15px;}
.dropdown:hover .dropdown-menu {display:block;}

/* Buttons */
.btn {
padding:10px 22px;
border:none;
border-radius:6px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}
.login-btn {background:#2563eb; color:#fff;}
.login-btn:hover {background:#1e40af;}
.signup-btn {background:#fff; color:#2563eb;}
.signup-btn:hover {background:#e0f2fe;}

/* Hamburger */
.hamburger {display:none; font-size:26px; cursor:pointer; color:#2563eb;}

/* Dark/Light Toggle */
.theme-toggle {
margin-left:10px;
cursor:pointer;
font-size:20px;
color:#60a5fa;
transition:0.3s;
}
.theme-toggle:hover {color:#2563eb;}

/* Responsive */
@media(max-width:992px){
nav ul {
position:fixed;
top:0;
left:-100%;
height:100%;
width:260px;
flex-direction:column;
padding-top:70px;
background:#60a5fa;
transition:0.3s;
}
nav ul.show {left:0;}
nav ul li {width:100%;}
nav ul li a {padding:15px 20px;}
.dropdown-menu {position:static; display:none;}
.dropdown.active .dropdown-menu {display:block;}
.hamburger {display:block;}
.login-btn, .signup-btn {width:90%; margin:5px 20px;}
.theme-toggle {position:absolute; bottom:120px; left:20px;}
}

.btn-ghost:hover {
background: var(--accent);
color: var(--white);
}
nav ul li a i {margin-left:5px; transition:0.3s;}
nav ul li:hover a i {transform: rotate(180deg);}

/* Dark Theme */
body.dark {background:#121212; color:#fff;}
body.dark header {background:#1e3a8a;}
body.dark nav ul li a:hover {background:#2563eb;}
body.dark .dropdown-menu {background:#1e3a8a;}
body.dark .login-btn {background:#3b82f6; color:#fff;}
body.dark .login-btn:hover {background:#2563eb;}
body.dark .signup-btn {background:#2563eb; color:#fff;}
body.dark .signup-btn:hover {background:#3b82f6;}
body.dark .theme-toggle {color:#fff;}

/* Hover and dropdown for desktop */
@media(min-width: 993px){
nav ul li a:hover {
background:#2563eb; /* hover color */
color:#fff;
}

.btn-primary {
background: var(--accent);
color: var(--white);
}
nav ul li:hover .dropdown-menu {
display:block; /* show dropdown on hover */
}

.btn-primary:hover {
background: var(--accent-hover);
nav ul li a i {
transition:0.3s;
}
nav ul li:hover a i {
transform: rotate(180deg); /* arrow rotates on hover */
}
}

/* Mobile Responsive */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
top: 70px;
right: -100%;
width: 250px;
height: 100vh;
background: var(--white);
flex-direction: column;
align-items: flex-start;
padding: 2rem 1rem;
gap: 1rem;
box-shadow: var(--shadow-lg);
transition: right 0.3s ease;
/* Mobile/tablet dropdown behavior */
@media(max-width: 992px){
nav ul {
position:fixed;
top:0;
left:-100%;
height:100%;
width:260px;
flex-direction:column;
padding-top:70px;
background:#60a5fa;
transition:0.3s;
}
nav ul.show {left:0;}

.nav-menu.active {
right: 0;
nav ul li a {
padding:15px 20px;
border-radius:0;
}

.nav-actions {
gap: 0.5rem;
/* Dropdown menu for mobile */
.dropdown-menu {
display:none; /* hide by default */
position:static;
background:#60a5fa;
box-shadow:none;
}
.dropdown.active .dropdown-menu {
display:block; /* show on click */
}

/* Buttons full width on mobile */
.login-btn, .signup-btn {width:90%; margin:5px 20px;}

/* Hamburger */
.hamburger {display:block;}
}

/* ================= Footer ================= */
Expand Down Expand Up @@ -581,11 +612,6 @@ body.dark {
color: #e6e6e6;
}

/* Navbar and header in dark mode */
body.dark header,
body.dark .navbar {
background-color: #161b22;
}

/* Section backgrounds */
body.dark section {
Expand All @@ -609,14 +635,6 @@ body.dark .view-btn:hover {
background-color: #1d4ed8;
}

/* Navbar links in dark mode */
body.dark .navbar a {
color: #e6e6e6;
}

body.dark .navbar a:hover {
color: #60a5fa;
}

/* Optional: lighten borders if any */
body.dark * {
Expand Down
Loading