Skip to content
89 changes: 89 additions & 0 deletions css/about.css
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,27 @@ body {
z-index: 10;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Hero Section */
.hero {
text-align: center;
padding: 4rem 2rem;
position: relative;
z-index: 10;
}

.hero-title {
font-size: 4rem;
font-weight: 700;
Expand Down Expand Up @@ -972,6 +993,74 @@ body {
transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--candy-red), var(--sky-blue));
border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--sky-blue), var(--sunny-yellow));
}

/* Mobile responsivness*/
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}
.nav-links.active {
left: 0;
}
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}
}


.footer {
background-color: #ffb6c1;
color: #fff;
Expand Down
80 changes: 68 additions & 12 deletions css/convert.css
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: auto;
margin:0 auto;
}

/* Logo */
Expand All @@ -279,6 +279,16 @@
.nav-links {
display: flex;
list-style: none;
gap: 20px;
margin: 0 auto; /* this centers the nav links between logo & nav-right */
align-items: center;
}

/* Right side container for Feedback, Scale, user-info */
.nav-right {
display: flex;
align-items: center;
margin-left: 12px; /* small spacing from center */
gap: 1.5rem;
}

Expand Down Expand Up @@ -365,6 +375,12 @@
display: none !important;
}

.nav-links .user-info {
display: flex;
align-items: center;
gap: 10px;
}

/* User Info Display */
.user-info {
display: flex;
Expand Down Expand Up @@ -407,6 +423,19 @@
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Main Content */
main {
padding: 2rem 2rem;
Expand Down Expand Up @@ -712,24 +741,51 @@
}

.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
position: fixed;
top: 60px;
left: -100%;
width:auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
padding: 2rem;
gap: 1rem;
z-index: 999;
align-items: center;
padding-top: 2rem;
gap: 15px;/*1rem*/
transition: left 0.3s ease;
z-index: 1000;/*999*/
display: flex;
/* padding: 2rem; */
}

.nav-links.active {
display: flex;
left:0;
}

.mobile-menu {
display: flex;
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}
.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}

main {
Expand Down
62 changes: 61 additions & 1 deletion css/customize.css
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,15 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only {
display: none; /* hidden by default (desktop view) */
}
.desktop-only {
display: flex;
align-items: center;
gap: 10px;
}

/* Main Container */
.container {
max-width: 1000px;
Expand Down Expand Up @@ -634,14 +643,52 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
100% { transform: translateY(-3px) rotate(0deg); }
}

.hamburger {
display: none;
}


/* Mobile Responsive */
@media (max-width: 768px) {
.navbar {
padding: 10px 15px;
}

.nav-links {
display: none;
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}

.nav-links.active {
left: 0;
}

.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}

.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.page-title {
Expand All @@ -667,7 +714,20 @@ background: linear-gradient(45deg, #bf60fa, #fde68a);
max-width: 300px;
justify-content: center;
}

.mobile-only {
display: block; /* show inside hamburger */
}

.desktop-only {
display: none; /* hide on mobile */
}

.navbar-container > .cta-btn {
display: none !important;
}
}

/* NEW: Density Input Styles */
.density-input {
border: 2px solid #c7e9c0;
Expand Down
63 changes: 63 additions & 0 deletions css/feedback.css
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,19 @@ body {
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4) !important;
}

.mobile-only{
display: none;
}
.desktop-only{
display: flex;
align-items: center;
gap: 10px;
}

.hamburger {
display: none;
}

/* Hero Section */
.hero {
text-align: center;
Expand Down Expand Up @@ -932,6 +945,56 @@ body {
transform: translateY(0);
}

/* Mobile responsivness*/
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 60px;
left: -100%;
width: auto;
max-width: 300px;
height: auto;
background: rgba(0, 0, 0, 0.9);
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 2rem;
transition: left 0.3s ease;
z-index: 1000;
display: flex; /* flex*/
}
.nav-links.active {
left: 0;
display: flex;
}
.hamburger {
display: block;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: #fff;
z-index: 1100;
}
.nav-links .cta-btn {
display: block;
margin: 10px auto;
text-align: center;
}

.mobile-only{
display:block;
}

.desktop-only{
display: none;
}

.navbar-container> .cta-btn{
display: none !important;
}
}

/* Mobile Responsive */
@media (max-width: 968px) {
.navbar {
Expand Down
Loading