From ec34303698b99ac9d08dc31321e72d2a87df92ca Mon Sep 17 00:00:00 2001 From: Sweta Gupta Date: Thu, 12 Feb 2026 20:12:35 +0530 Subject: [PATCH] fix: improve accessibility, remove redundant ARIA roles, enhance theme toggle and scroll button --- 404.html | 2 +- css/style.css | 1780 +++++++++++++++++++++++++++ frontend/css/accessibility.css | 229 ++++ frontend/css/style.css | 1725 -------------------------- frontend/js/components.js | 69 +- frontend/js/theme.js | 33 +- frontend/pages/Contribute.html | 5 +- frontend/pages/contributors.html | 10 +- frontend/pages/faq.html | 5 +- frontend/pages/feedback.html | 5 +- frontend/pages/git-playground.html | 4 +- frontend/pages/glossary.html | 5 +- frontend/pages/programs.html | 5 +- frontend/pages/sitemap.html | 5 +- frontend/pages/success-stories.html | 14 +- index.html | 651 +++++----- sw.js | 2 +- 17 files changed, 2439 insertions(+), 2110 deletions(-) create mode 100644 frontend/css/accessibility.css delete mode 100644 frontend/css/style.css diff --git a/404.html b/404.html index 585f15ca..7f6575a1 100644 --- a/404.html +++ b/404.html @@ -397,7 +397,7 @@

Oops — the page you’re looking for can’t be foun Go Home - Explore Programs + Explore Programs diff --git a/css/style.css b/css/style.css index bd09259a..01cb5314 100644 --- a/css/style.css +++ b/css/style.css @@ -224,3 +224,1783 @@ footer p { font-size: 16px; } } +/* ========================= + GLOBAL RESET +========================= */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + max-width: 100%; + overflow-x: hidden; +} + +@keyframes goldenLineReveal { + 0% { + width: 0; + opacity: 0; + } + 100% { + width: 90px; + opacity: 1; + } +} + + +/* ========================= + THEME VARIABLES (CLASSIC) + + */ + +:root { + --primary-gold: #d4af37; + --secondary-gold: #b8860b; + --deep-navy: #1b263b; + --warm-cream: #fdf4e3; + --light-parchment: #fff8e7; + --charcoal-dark: #2c2c2c; + --text-secondary: #5a5a5a; + --shadow-main: 0 8px 32px rgb(0 0 0 / 12%); + --shadow-hover: 0 20px 40px rgb(0 0 0 / 18%); + --bounce-curve: cubic-bezier(0.34, 1.56, 0.64, 1); +} + +body.dark-mode { + /* Backgrounds */ + --deep-navy: #0b1220; + --warm-cream: #141a2b; + --light-parchment: #1b2235; + --charcoal-dark: #070b14; + + /* Golds (slightly softer glow) */ + --primary-gold: #e4c76a; + --secondary-gold: #c9a43b; + --text-primary: #f5f4f0; + --text-secondary: #b9bfd1; + + + --shadow-main: 0 12px 40px rgba(0, 0, 0, 0.65); + --shadow-hover: 0 28px 70px rgba(0, 0, 0, 0.85); + + --border-subtle: rgba(255, 255, 255, 0.08); +} + +/* ========================= + BASE STYLES +========================= */ +body { + font-family: "Crimson Text", "Georgia", serif; + font-size: 15px; + line-height: 1.7; + background: linear-gradient( + 135deg, + var(--light-parchment) 0%, + var(--warm-cream) 100% + ); + color: var(--charcoal-dark); + padding-top: 90px; +} + +/* ========================= + HEADER / NAVBAR +========================= */ + +header { + background: rgb(255 255 255 / 98%); + backdrop-filter: saturate(180%) blur(20px); + border-bottom: 3px solid var(--primary-gold); + padding: 1rem 6%; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + box-shadow: var(--shadow-main); +} + +.navbar-container { + max-width: 1400px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +header h1 { + font-family: "Playfair Display", serif; + font-size: clamp(1.6rem, 3vw, 1.9rem); + font-weight: 700; + background: linear-gradient(135deg, + var(--deep-navy) 0%, + var(--primary-gold) 70%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: -0.01em; +} + +body.dark-mode header h1 { + background: linear-gradient( + 135deg, + #ffffff 0%, + var(--primary-gold) 55%, + var(--secondary-gold) 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.nav-links { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: var(--deep-navy) !important; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 600; + font-size: 0.95rem; + padding: 0.4rem 0; + position: relative; + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + white-space: nowrap; + text-transform: uppercase; + letter-spacing: 0.3px; +} + +.nav-links a::before { + content: ""; + position: absolute; + bottom: 0; + left: 50%; + width: 0; + height: 2px; + background: linear-gradient(90deg, + var(--primary-gold), + var(--secondary-gold)); + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(-50%); + border-radius: 1px; +} + +.nav-links a:hover { + color: var(--primary-gold) !important; + transform: translateY(-1px); +} + +.nav-links a:hover::before { + width: 70%; +} + +.nav-links a.active { + color: var(--primary-gold) !important; + font-weight: 600; +} + +.nav-links a.active::before { + width: 70%; + background: var(--primary-gold); +} + +body.dark-mode header { + background: rgba(27, 38, 59, 0.98); +} + +body.dark-mode .nav-links a { + color: rgba(253, 244, 227, 0.95) !important; +} +.nav-links a:focus-visible, +.nav-links a:hover { + color: var(--primary-gold) !important; +} + +body.dark-mode .nav-links a:hover { + color: var(--primary-gold) !important; +} + +body.dark-mode .nav-links a.active { + color: var(--primary-gold) !important; +} + +main { + margin-top: 0; + padding-top: 0; +} + +header h1 i { + font-size: 0.95em; + line-height: 1; + display: inline-flex; + align-items: center; +} + +/* ========================= + SECTIONS +========================= */ +main section { + max-width: 1400px; + margin: 0 auto; + padding: 5rem 6%; +} + +section h3 { + font-family: "Playfair Display", serif; + font-size: clamp(2.2rem, 4.5vw, 2.9rem); + font-weight: 700; + text-align: center; + color: var(--deep-navy); + margin-bottom: 1.2rem; +} + +section h3::after { + content: ""; + display: block; + height: 3px; + margin: 1.2rem auto 0; + background: linear-gradient( + 90deg, + var(--primary-gold), + var(--secondary-gold) + ); + border-radius: 2px; + animation: goldenLineReveal 0.9s ease-out forwards; +} + +@media (prefers-reduced-motion: reduce) { + section h3::after { + animation: none; + width: 90px; + } +} + + +section p { + text-align: center; + max-width: 750px; + margin: 0 auto 3.5rem; + font-size: 1.05rem; + color: var(--text-secondary); +} + +/* ========================= + CARD GRID & BOUNCY HOVER +========================= */ + +.why-section { + position: relative; + background: linear-gradient(135deg, + var(--light-parchment) 0%, + var(--warm-cream) 50%, + var(--light-parchment) 100%); + overflow: hidden; + padding: 6rem 6% !important; +} + +/* Decorative Background Elements */ +.why-section::before { + content: ""; + position: absolute; + top: -50%; + right: -20%; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%); + border-radius: 50%; + pointer-events: none; +} + +.why-section::after { + content: ""; + position: absolute; + bottom: -40%; + left: -15%; + width: 500px; + height: 500px; + background: radial-gradient(circle, rgba(27, 38, 59, 0.05) 0%, transparent 70%); + border-radius: 50%; + pointer-events: none; +} + +.why-container { + position: relative; + z-index: 1; + max-width: 1400px; + margin: 0 auto; +} + +/* ========== SECTION HEADER ========== */ +.why-header { + text-align: center; + margin-bottom: 4.5rem; +} + +.why-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.6rem 1.5rem; + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.15) 0%, + rgba(212, 175, 55, 0.08) 100%); + border: 1px solid rgba(212, 175, 55, 0.3); + border-radius: 50px; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--secondary-gold); + margin-bottom: 1.5rem; +} + +.why-eyebrow i { + color: var(--primary-gold); + animation: sparkle 2s ease-in-out infinite; +} + +@keyframes sparkle { + 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } + 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; } +} + +.why-header h3 { + font-family: "Playfair Display", serif; + font-size: clamp(2.5rem, 5vw, 3.5rem); + font-weight: 800; + color: var(--deep-navy); + margin-bottom: 1.5rem; + line-height: 1.2; +} + +.why-header h3::after { + content: ""; + display: block; + width: 100px; + height: 4px; + margin: 1.5rem auto 0; + background: linear-gradient(90deg, + transparent, + var(--primary-gold), + var(--secondary-gold), + transparent); + border-radius: 2px; +} + +.why-header p { + font-size: 1.15rem; + line-height: 1.8; + color: var(--text-secondary); + max-width: 700px; + margin: 0 auto; +} + +/* ========== FEATURE CARDS GRID ========== */ +.why-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2.5rem; + margin-bottom: 5rem; +} + +.why-card { + position: relative; + background: rgba(255, 255, 255, 0.9); + border-radius: 24px; + padding: 3rem 2.5rem; + border: 1px solid rgba(212, 175, 55, 0.2); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.08), + 0 1px 3px rgba(0, 0, 0, 0.06); + transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); + overflow: hidden; + cursor: pointer; +} + +.why-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 4px; + background: linear-gradient(90deg, + var(--primary-gold) 0%, + var(--secondary-gold) 100%); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.why-card:hover::before { + transform: scaleX(1); +} + +.why-card:hover { + transform: translateY(-12px) scale(1.02); + box-shadow: + 0 20px 50px rgba(212, 175, 55, 0.25), + 0 10px 20px rgba(0, 0, 0, 0.1); + border-color: rgba(212, 175, 55, 0.5); +} + +/* Card Icon */ +.why-card-icon { + position: relative; + width: 80px; + height: 80px; + margin: 0 auto 2rem; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.1) 0%, + rgba(212, 175, 55, 0.05) 100%); + border-radius: 20px; + border: 2px solid rgba(212, 175, 55, 0.3); + transition: all 0.4s ease; +} + +.icon-glow { + position: absolute; + inset: -10px; + background: radial-gradient(circle, + rgba(212, 175, 55, 0.3) 0%, + transparent 70%); + opacity: 0; + transition: opacity 0.4s ease; + z-index: -1; +} + +.why-card:hover .icon-glow { + opacity: 1; + animation: pulse-glow 2s ease-in-out infinite; +} + +@keyframes pulse-glow { + 0%, 100% { transform: scale(1); opacity: 0.6; } + 50% { transform: scale(1.1); opacity: 0.8; } +} + +.why-card-icon i { + font-size: 2.5rem; + color: var(--primary-gold); + transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); +} + +.why-card:hover .why-card-icon { + transform: rotateY(360deg); + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.2) 0%, + rgba(212, 175, 55, 0.1) 100%); + border-color: rgba(212, 175, 55, 0.6); +} + +.why-card:hover .why-card-icon i { + color: var(--secondary-gold); + transform: scale(1.2); +} + +/* Card Content */ +.why-card-content { + text-align: center; +} + +.why-card-content h4 { + font-family: "Playfair Display", serif; + font-size: 1.65rem; + font-weight: 700; + color: var(--deep-navy); + margin-bottom: 1rem; + transition: color 0.3s ease; +} + +.why-card:hover .why-card-content h4 { + color: var(--primary-gold); +} + +.why-card-content p { + font-size: 1.05rem; + line-height: 1.75; + color: var(--text-secondary); + margin: 0; +} + +/* Decorative Corner Element */ +.why-card-decoration { + position: absolute; + bottom: -2px; + right: -2px; + width: 60px; + height: 60px; + background: linear-gradient(135deg, + transparent 50%, + rgba(212, 175, 55, 0.1) 50%); + border-radius: 24px 0 24px 0; + opacity: 0; + transition: opacity 0.4s ease; +} + +.why-card:hover .why-card-decoration { + opacity: 1; +} + +/* ========== JOURNEY TIMELINE ========== */ +.why-journey { + position: relative; + padding: 3rem 0; + margin-top: 3rem; +} + +.journey-line { + position: absolute; + top: 50%; + left: 10%; + right: 10%; + height: 3px; + background: linear-gradient(90deg, + rgba(212, 175, 55, 0.2) 0%, + rgba(212, 175, 55, 0.6) 50%, + rgba(212, 175, 55, 0.2) 100%); + transform: translateY(-50%); + border-radius: 2px; +} + +.journey-steps { + display: flex; + justify-content: space-around; + align-items: center; + position: relative; + z-index: 1; +} + +.journey-step { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.journey-icon { + width: 70px; + height: 70px; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, + var(--primary-gold) 0%, + var(--secondary-gold) 100%); + border-radius: 50%; + box-shadow: + 0 4px 20px rgba(212, 175, 55, 0.4), + 0 0 0 8px rgba(255, 255, 255, 0.9), + 0 0 0 10px rgba(212, 175, 55, 0.2); + transition: all 0.4s ease; +} + +.journey-icon i { + font-size: 1.8rem; + color: white; +} + +.journey-step span { + font-family: "Inter", -apple-system, sans-serif; + font-weight: 700; + font-size: 1rem; + color: var(--deep-navy); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.journey-step:hover .journey-icon { + transform: scale(1.15) rotate(10deg); + box-shadow: + 0 8px 30px rgba(212, 175, 55, 0.5), + 0 0 0 8px rgba(255, 255, 255, 0.9), + 0 0 0 12px rgba(212, 175, 55, 0.3); +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2.5rem; + justify-items: center; +} + +.card { + width: 100%; + max-width: 360px; + padding: 2.2rem; + border-radius: 20px; + background: rgb(255 255 255 / 95%); + box-shadow: var(--shadow-main); + text-align: center; + position: relative; + border: 1px solid transparent; + transition: + transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), + box-shadow 0.4s ease; + will-change: transform; + cursor: pointer; +} + +.card::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + border: 2px solid transparent; + transition: border-color 0.35s ease, box-shadow 0.35s ease; + pointer-events: none; +} + +.card:hover::before { + border-color: var(--primary-gold); + box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); +} + +.card:hover { + transform: translateY(-6px); + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); + border-color: rgba(212, 175, 55, 0.3); + cursor: pointer; +} + +.card:hover i, +.card:hover h4 i { + transform: scale(1.2) rotate(8deg); + transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); + color: var(--secondary-gold); +} + +.card i, +.card img { + transition: transform 0.5s var(--bounce-curve); +} + +.card:hover img { + transform: scale(1.15) rotate(3deg); +} + +.card .badge { + transition: all 0.4s var(--bounce-curve); +} + +.card:hover .badge { + transform: scale(1.1); + box-shadow: 0 0 15px rgba(46, 204, 113, 0.4); +} + +.card h4 { + font-family: "Playfair Display", serif; + font-size: 1.45rem; + color: var(--deep-navy); + margin-bottom: 1.1rem; +} + +.card p { + font-size: 0.98rem; + color: var(--text-secondary); + line-height: 1.65; +} + +body.dark-mode .card:hover::before { + border-color: var(--primary-gold); + box-shadow: 0 0 22px rgba(228, 199, 106, 0.45); +} + +body.dark-mode .card { + background: linear-gradient( + 145deg, + rgba(20, 26, 43, 0.95), + rgba(27, 34, 53, 0.95) + ); + border: 1px solid rgba(228, 199, 106, 0.18); + box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75); + color: var(--text-primary); + backdrop-filter: blur(12px); +} + +body.dark-mode .card:hover { + transform: translateY(-6px); + box-shadow: + 0 35px 80px rgba(0, 0, 0, 0.9), + 0 0 0 1px rgba(228, 199, 106, 0.35); + border-color: rgba(228, 199, 106, 0.55); +} + +body.dark-mode .card h4 { + color: var(--text-primary); +} + +body.dark-mode .card p { + color: var(--text-secondary); +} + +body.dark-mode .card i { + color: var(--primary-gold); + filter: drop-shadow(0 6px 18px rgba(228, 199, 106, 0.35)); +} + +body.dark-mode .card:hover i { + color: var(--secondary-gold); +} + +body.dark-mode .card .badge { + background: rgba(228, 199, 106, 0.15); + color: var(--primary-gold); + border: 1px solid rgba(228, 199, 106, 0.35); + box-shadow: none; +} + +body.dark-mode .card:hover .badge { + box-shadow: 0 0 18px rgba(228, 199, 106, 0.35); +} + +body.dark-mode .card::before { + content: ""; + position: absolute; + inset: 1px; + border-radius: inherit; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.06), + transparent 35%, + transparent 65%, + rgba(228, 199, 106, 0.08) + ); + pointer-events: none; +} + +/* ========== DARK MODE STYLES FOR WHY SECTION ========== */ +body.dark-mode .why-section { + background: linear-gradient(135deg, + #0f0f0f 0%, + #1a1a1a 50%, + #0f0f0f 100%); +} + +body.dark-mode .why-section::before { + background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%); +} + +body.dark-mode .why-section::after { + background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); +} + +body.dark-mode .why-header h3 { + color: rgba(253, 244, 227, 0.98); +} + +body.dark-mode .why-header p { + color: rgba(253, 244, 227, 0.75); +} + +body.dark-mode .why-eyebrow { + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.2) 0%, + rgba(212, 175, 55, 0.1) 100%); + border-color: rgba(212, 175, 55, 0.4); + color: var(--primary-gold); +} + +body.dark-mode .why-card { + background: rgba(26, 26, 26, 0.95); + border-color: rgba(212, 175, 55, 0.25); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.4), + 0 1px 3px rgba(0, 0, 0, 0.3); +} + +body.dark-mode .why-card:hover { + background: rgba(30, 30, 30, 0.98); + box-shadow: + 0 20px 50px rgba(212, 175, 55, 0.3), + 0 10px 20px rgba(0, 0, 0, 0.5); + border-color: rgba(212, 175, 55, 0.6); +} + +body.dark-mode .why-card-content h4 { + color: rgba(253, 244, 227, 0.95); +} + +body.dark-mode .why-card:hover .why-card-content h4 { + color: var(--primary-gold); +} + +body.dark-mode .why-card-content p { + color: rgba(253, 244, 227, 0.75); +} + +body.dark-mode .why-card-icon { + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.15) 0%, + rgba(212, 175, 55, 0.08) 100%); + border-color: rgba(212, 175, 55, 0.4); +} + +body.dark-mode .why-card:hover .why-card-icon { + background: linear-gradient(135deg, + rgba(212, 175, 55, 0.25) 0%, + rgba(212, 175, 55, 0.15) 100%); +} + +body.dark-mode .journey-icon { + box-shadow: + 0 4px 20px rgba(212, 175, 55, 0.5), + 0 0 0 8px rgba(26, 26, 26, 0.95), + 0 0 0 10px rgba(212, 175, 55, 0.3); +} + +body.dark-mode .journey-step span { + color: rgba(253, 244, 227, 0.9); +} + +body.dark-mode .journey-line { + background: linear-gradient(90deg, + rgba(212, 175, 55, 0.3) 0%, + rgba(212, 175, 55, 0.7) 50%, + rgba(212, 175, 55, 0.3) 100%); +} + +/* ========================= + SCROLL TO TOP BUTTON +========================= */ +#scrollTopBtn { + position: fixed; + bottom: 20px; + right: 13px; + width: 65px; + height: 65px; + background: linear-gradient(135deg, var(--primary-gold) 60%, var(--secondary-gold) 100%); + border-radius: 50%; + box-shadow: 0 4px 24px rgba(0,0,0,0.25); + display: none; + align-items: center; + justify-content: center; + z-index: 10000; + cursor: pointer; + transition: box-shadow 0.2s, transform 0.2s; + border: none; + padding: 10px 12px; +} + +/* When chatbot is present, keep scroll button below it */ +body.has-chatbot #scrollTopBtn { + bottom: 20px; + z-index: 9999; +} + +#scrollTopBtn:hover { + box-shadow: 0 8px 32px rgba(0,0,0,0.35); + transform: translateY(-4px) scale(1.05); +} + +#scrollTopBtn i, +#scrollTopBtn .arrow { + display: flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + font-size: 1.25rem; + color: #222; + pointer-events: none; + margin: 0; + padding: 0; +} + +/* ========================= + SCROLL PROGRESS INDICATOR +========================= */ +#scrollProgress { + position: fixed; + top: 0; + left: 0; + height: 3px; + width: 0%; + background: linear-gradient( + 90deg, + var(--primary-gold), + var(--secondary-gold) + ); + z-index: 2000; + transition: width 0.15s ease-out; +} + +/* ========================= + CURSOR HIGHLIGHT (FEATURE #495)*/ +/* CURSOR HIGHLIGHT (FEATURE #495) */ +#cursor-highlight { + position: fixed; + top: 0; + left: 0; + width: 36px; + height: 36px; + border-radius: 50%; + pointer-events: none; + z-index: 99999; + transform: translate(-50%, -50%); + background: radial-gradient( + circle, + rgba(212, 175, 55, 0.45) 0%, + rgba(212, 175, 55, 0.25) 35%, + rgba(212, 175, 55, 0.08) 60%, + transparent 70% + ); + box-shadow: + 0 0 18px rgba(212, 175, 55, 0.35), + 0 0 32px rgba(212, 175, 55, 0.18); + opacity: 0; + transition: + opacity 0.25s ease, + transform 0.08s linear; +} + +/* Show cursor highlight when active */ +body.cursor-highlight-enabled #cursor-highlight { + opacity: 1; +} + +/* Dark mode tuning */ +body.dark-mode #cursor-highlight { + background: radial-gradient( + circle, + rgba(212, 175, 55, 0.35) 0%, + rgba(212, 175, 55, 0.18) 40%, + rgba(212, 175, 55, 0.06) 65%, + transparent 75% + ); + box-shadow: + 0 0 20px rgba(212, 175, 55, 0.4), + 0 0 36px rgba(212, 175, 55, 0.2); +} + +/* ========================= + UPCOMING BADGE DESIGN +========================= */ + +.badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.65rem 1.5rem; + border-radius: 50px; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 700; + font-size: 0.9rem; + letter-spacing: 0.5px; + text-transform: uppercase; + position: relative; + overflow: hidden; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + cursor: pointer; + border: none; + box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); +} + +/* Animated Pulsing Dot */ +.badge::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ffffff; + display: inline-block; + margin-right: 0.3rem; + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); + } + 50% { + transform: scale(1.1); + box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); + } +} + +/* Shimmer Effect */ +.badge::after { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent + ); + transition: left 0.6s ease; +} + +.badge:hover::after { + left: 100%; +} + +/* Default Dark Mode Look */ +body.dark-mode .badge, +.badge { + background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); +} + +/* Hover State - Dark Mode */ +body.dark-mode .badge:hover, +.badge:hover { + transform: translateY(-3px) scale(1.08); + box-shadow: + 0 8px 25px rgba(46, 204, 113, 0.5), + 0 0 40px rgba(46, 204, 113, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + background: linear-gradient(135deg, #2ecc71 0%, #1fa855 100%); +} + +/* Active/Click State */ +body.dark-mode .badge:active, +.badge:active { + transform: translateY(-1px) scale(1.03); + box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); +} + +/* ========================= + ALTERNATIVE GLASS STYLE (Optional) +========================= */ + +.badge.glass-style { + background: linear-gradient( + 135deg, + rgba(46, 204, 113, 0.25) 0%, + rgba(39, 174, 96, 0.3) 100% + ); + backdrop-filter: blur(12px) saturate(180%); + border: 1px solid rgba(46, 204, 113, 0.5); + color: #2ecc71; + text-shadow: 0 0 10px rgba(46, 204, 113, 0.5); + box-shadow: + 0 4px 20px rgba(46, 204, 113, 0.2), + inset 0 1px 0 rgba(46, 204, 113, 0.3); +} + +.badge.glass-style::before { + background-color: #2ecc71; + box-shadow: 0 0 10px rgba(46, 204, 113, 0.8); +} + +.badge.glass-style:hover { + background: linear-gradient( + 135deg, + rgba(46, 204, 113, 0.35) 0%, + rgba(39, 174, 96, 0.4) 100% + ); + border-color: rgba(46, 204, 113, 0.8); + color: #3be682; + transform: translateY(-3px) scale(1.08); + box-shadow: + 0 8px 30px rgba(46, 204, 113, 0.4), + 0 0 50px rgba(46, 204, 113, 0.3), + inset 0 1px 0 rgba(46, 204, 113, 0.4); +} + +/* ========================= + NEON GLOW STYLE (Optional) +========================= */ + +.badge.neon-style { + background: transparent; + border: 2px solid #2ecc71; + color: #2ecc71; + text-shadow: + 0 0 5px rgba(46, 204, 113, 0.5), + 0 0 10px rgba(46, 204, 113, 0.3); + box-shadow: + 0 0 10px rgba(46, 204, 113, 0.4), + inset 0 0 10px rgba(46, 204, 113, 0.1); +} + +.badge.neon-style::before { + background-color: #2ecc71; + box-shadow: 0 0 15px rgba(46, 204, 113, 1); +} + +.badge.neon-style:hover { + background: rgba(46, 204, 113, 0.1); + border-color: #3be682; + color: #3be682; + text-shadow: + 0 0 10px rgba(46, 204, 113, 0.8), + 0 0 20px rgba(46, 204, 113, 0.5); + box-shadow: + 0 0 20px rgba(46, 204, 113, 0.6), + 0 0 40px rgba(46, 204, 113, 0.4), + inset 0 0 15px rgba(46, 204, 113, 0.2); + transform: translateY(-3px) scale(1.08); +} + +/* ========================= + RESPONSIVE DESIGN +========================= */ +@media (max-width: 980px) { + .footer-top { + grid-template-columns: 1fr; + } + + .footer-columns { + grid-template-columns: repeat(2, minmax(160px, 1fr)); + } + + .why-grid { + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + } + + .journey-steps { + gap: 1rem; + } + + .journey-icon { + width: 60px; + height: 60px; + } + + .journey-icon i { + font-size: 1.5rem; + } +} + +@media (max-width: 768px) { + .navbar-container { + flex-direction: column; + gap: 1rem; + text-align: center; + } + + .nav-links { + flex-wrap: wrap; + justify-content: center; + gap: 0.8rem; + } + + main section { + padding: 3rem 5%; + } + + section h3 { + font-size: 2rem; + } + + .why-section { + padding: 4rem 5% !important; + } + + .why-header { + margin-bottom: 3rem; + } + + .why-header h3 { + font-size: 2rem; + } + + .why-card { + padding: 2.5rem 2rem; + } + + .why-journey { + padding: 2rem 0; + } + + .journey-line { + left: 5%; + right: 5%; + } + + .badge { + padding: 0.55rem 1.2rem; + font-size: 0.85rem; + } +} + +@media (max-width: 520px) { + .footer-columns { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + body { + font-size: 14px; + } + + .nav-links a { + font-size: 0.8rem; + } + + .card { + padding: 1.6rem 1.3rem; + transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), + box-shadow 0.3s ease; + will-change: transform; + } + + .card h4 { + font-size: 1.25rem; + } + + .why-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .why-card { + padding: 2rem 1.5rem; + } + + .why-card-icon { + width: 70px; + height: 70px; + } + + .why-card-icon i { + font-size: 2rem; + } + + .why-card-content h4 { + font-size: 1.4rem; + } + + .journey-steps { + flex-direction: column; + gap: 2rem; + } + + .journey-line { + left: 50%; + right: auto; + top: 0; + bottom: 0; + width: 3px; + height: 90%; + transform: translateX(-50%); + background: linear-gradient(180deg, + rgba(212, 175, 55, 0.2) 0%, + rgba(212, 175, 55, 0.6) 50%, + rgba(212, 175, 55, 0.2) 100%); + } + + .journey-icon { + width: 50px; + height: 50px; + } + + .journey-icon i { + font-size: 1.3rem; + } + + .journey-step span { + font-size: 0.9rem; + } + + .badge { + padding: 0.5rem 1rem; + font-size: 0.8rem; + } + + .badge::before { + width: 6px; + height: 6px; + } +} + +/* ========================= + OPENSOURCE GUIDE CHATBOT +/* =========================*/ +#opensource-chatbot { + position: fixed; + bottom: 90px; /* stays above scroll button */ + right: 24px; + z-index: 99999; +} + +.chat-widget-btn { + width: 58px; + height: 58px; + border-radius: 50%; + background: linear-gradient( + 135deg, + var(--primary-gold), + var(--secondary-gold) + ); + color: #0b1220; + border: none; + cursor: pointer; + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; + + box-shadow: + 0 14px 40px rgba(0, 0, 0, 0.45), + 0 0 0 1px rgba(212, 175, 55, 0.35); + + transition: + transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.35s ease; +} + +.chat-widget-btn:hover { + transform: translateY(-6px) scale(1.08); + box-shadow: + 0 22px 60px rgba(0, 0, 0, 0.6), + 0 0 0 2px rgba(212, 175, 55, 0.55); +} + +body.dark-mode .chat-widget-btn { + + color: #0b1220; +} + +@media (prefers-reduced-motion: reduce) { + footer.site-footer::after, + .footer-mark, + .why-card, + .why-card-icon, + .why-card-icon i, + .journey-icon, + .icon-glow, + #cursor-highlight { + animation: none !important; + transition: none !important; + } +} + +/* ========================= + QUIZ SECTION SCROLLBAR +#level-chain-wrapper::-webkit-scrollbar { + display: none; +} + +/* ========================= + PRINT STYLES +@media print { + .why-section::before, + .why-section::after, + .icon-glow, + .why-card-decoration { + display: none; + } +} + + + +/* ========================= + FOOTER (GLOBAL) +========================= */ +footer.site-footer { + position: relative; + overflow: hidden; + background: + radial-gradient(900px circle at 10% 10%, rgba(212, 175, 55, 0.22) 0%, transparent 55%), + radial-gradient(800px circle at 90% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), + linear-gradient(135deg, #0f1724 0%, #121c2c 45%, #0b1220 100%); + color: rgba(253, 244, 227, 0.9); + padding: 4.2rem 6% 3.2rem; + border-top: 1px solid rgba(212, 175, 55, 0.18); +} + +footer.site-footer::before { + content: ""; + position: absolute; + inset: -2px; + background: + repeating-linear-gradient(90deg, + rgba(212, 175, 55, 0.14) 0, + rgba(212, 175, 55, 0.14) 1px, + transparent 1px, + transparent 28px), + repeating-linear-gradient(0deg, + rgba(255, 255, 255, 0.06) 0, + rgba(255, 255, 255, 0.06) 1px, + transparent 1px, + transparent 28px); + mask-image: radial-gradient(circle at 50% 10%, rgba(0, 0, 0, 0.9) 0%, transparent 72%); + opacity: 0.5; + pointer-events: none; +} + +footer.site-footer::after { + content: ""; + position: absolute; + width: 1200px; + height: 1200px; + left: 50%; + bottom: -780px; + transform: translateX(-50%); + background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, transparent 58%); + filter: blur(2px); + opacity: 0.9; + pointer-events: none; + animation: footerGlow 9s ease-in-out infinite; +} + +footer.site-footer ul { + list-style: none; + margin-left: 5px; +} + +@keyframes footerGlow { + 0%, + 100% { + transform: translateX(-50%) scale(1); + opacity: 0.85; + } + + 50% { + transform: translateX(-50%) scale(1.05); + opacity: 1; + } +} + +.footer-shell { + position: relative; + z-index: 1; + max-width: 1200px; + margin: 0 auto; +} + +.footer-top { + display: grid; + grid-template-columns: 1.1fr 1.4fr; + gap: 2.5rem; + align-items: start; +} + +.footer-brand { + display: flex; + gap: 1rem; + align-items: flex-start; +} + +.footer-mark { + width: 46px; + height: 46px; + border-radius: 14px; + display: grid; + place-items: center; + background: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(184, 134, 11, 0.9)); + color: #0b1220; + box-shadow: 0 14px 32px rgba(212, 175, 55, 0.22); + transform: translateY(0); + animation: footerFloat 6s ease-in-out infinite; +} + +@keyframes footerFloat { + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-8px); + } +} + +.footer-title { + font-family: "Playfair Display", serif; + font-size: 1.55rem; + font-weight: 800; + letter-spacing: -0.01em; + color: rgba(253, 244, 227, 0.98); +} + +.footer-tagline { + margin-top: 0.35rem; + font-family: "Inter", -apple-system, sans-serif; + font-size: 0.98rem; + line-height: 1.6; + color: rgba(253, 244, 227, 0.78); + max-width: 46ch; +} + +.footer-columns { + display: grid; + grid-template-columns: repeat(3, minmax(160px, 1fr)); + gap: 1.8rem; +} + +.footer-col-title { + font-family: "Inter", -apple-system, sans-serif; + font-weight: 800; + font-size: 0.92rem; + letter-spacing: 0.12em; + text-transform: uppercase; + margin-bottom: 0.9rem; + color: rgba(212, 175, 55, 0.95); +} + +.footer-col a { + display: inline-flex; + align-items: center; + width: fit-content; + margin: 0.35rem 0; + font-family: "Inter", -apple-system, sans-serif; + font-size: 0.98rem; + color: rgba(253, 244, 227, 0.88); + text-decoration: none; + position: relative; + transition: transform 0.2s ease, color 0.2s ease; +} + +.footer-col a::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + border-radius: 2px; + background: linear-gradient(90deg, rgba(212, 175, 55, 0.0), rgba(212, 175, 55, 0.9), rgba(212, 175, 55, 0.0)); + transform: scaleX(0); + transform-origin: center; + transition: transform 0.22s ease; + opacity: 0.9; +} + +.footer-col a:hover { + transform: translateX(2px); + color: rgba(253, 244, 227, 0.98); +} + +.footer-col a:hover::after { + transform: scaleX(1); +} + +.footer-divider { + height: 1px; + margin: 2.25rem 0 1.6rem; + background: linear-gradient(90deg, + transparent, + rgba(212, 175, 55, 0.32), + rgba(255, 255, 255, 0.08), + rgba(212, 175, 55, 0.32), + transparent); +} + +.footer-bottom { + display: flex; + gap: 1.25rem; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +.footer-badges { + display: flex; + gap: 0.6rem; + flex-wrap: wrap; +} + +.footer-pill { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.55rem 0.8rem; + border-radius: 999px; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 700; + font-size: 0.9rem; + color: rgba(253, 244, 227, 0.92); + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(212, 175, 55, 0.16); + backdrop-filter: blur(10px); +} + +.footer-meta { + display: flex; + align-items: center; + gap: 0.7rem; + font-family: "Inter", -apple-system, sans-serif; + color: rgba(253, 244, 227, 0.78); + font-size: 0.95rem; +} + +.footer-inline { + display: inline-flex; + align-items: center; + gap: 0.45rem; + color: rgba(212, 175, 55, 0.98); + text-decoration: none; + font-weight: 700; +} + +.footer-inline:hover { + text-decoration: underline; +} + +.footer-sep { + opacity: 0.6; +} + +body.dark-mode footer.site-footer { + background: + radial-gradient(900px circle at 10% 10%, rgba(212, 175, 55, 0.16) 0%, transparent 55%), + radial-gradient(800px circle at 90% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 55%), + linear-gradient(135deg, rgba(13, 17, 23, 0.96) 0%, rgba(22, 27, 34, 0.96) 100%); +} + +/* ========================= + RESOURCE LINKS +========================= */ +.resource-link-wrapper { + display: flex; + align-items: center; + gap: 10px; + margin-top: 0.8rem; +} + +.resource-link { + color: var(--primary-gold); + font-weight: 600; + text-decoration: none; +} + +.resource-link:hover { + text-decoration: underline; +} + +.copy-btn { + border: none; + background: transparent; + cursor: pointer; + color: var(--deep-navy); + font-size: 1rem; +} + +.copy-btn:hover { + color: var(--primary-gold); + transform: scale(1.1); +} + +.copy-feedback { + font-size: 0.8rem; + color: green; + display: none; +} + +/* ========================= + DARK MODE FIXES +========================= */ +body.dark-mode .navbar, +body.dark-mode header { + background-color: rgba(27, 38, 59, 0.98); + border-bottom: 1px solid #333; +} + +body.dark-mode .nav-link, +body.dark-mode .navbar a { + color: rgba(253, 244, 227, 0.95); +} + +body.dark-mode input, +body.dark-mode textarea { + background-color: #333; + color: #fff; + border-color: #555; +} + +body.dark-mode .program-card h3, +body.dark-mode .program-card h4, +body.dark-mode .program-card h2, +body.dark-mode .program-card i { + color: #ffffff !important; +} + +body.dark-mode .program-card p { + color: #e0e0e0; +} + +body.dark-mode .newsletter, +body.dark-mode .newsletter-section { + background-color: #1a1a1a !important; + color: #ffffff !important; + border-top: 1px solid #333; +} + +body.dark-mode .newsletter h2, +body.dark-mode .newsletter h3, +body.dark-mode .newsletter p, +body.dark-mode .newsletter-section h2 { + color: #ffffff !important; +} + +body.dark-mode .newsletter input, +body.dark-mode .newsletter-section input { + background-color: #333 !important; + color: #ffffff !important; + border: 1px solid #555 !important; +} + +/* ========================= + ACCESSIBILITY: Focus Styles +========================= */ + +/* Global keyboard focus visibility */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 3px solid var(--primary-gold); + outline-offset: 3px; + border-radius: 6px; +} +/* Navbar Links */ +.nav-links a:focus-visible { + outline: 3px solid var(--primary-gold); + outline-offset: 4px; + border-radius: 4px; +} + +/* Footer Links */ +.footer-col a:focus-visible, +.footer-inline:focus-visible { + outline: 3px solid var(--primary-gold); + outline-offset: 4px; + border-radius: 4px; +} + +/* Chat Button */ +.chat-widget-btn:focus-visible { + outline: 3px solid var(--primary-gold); + outline-offset: 4px; +} + + +/* Theme Toggle Enhancement */ +#themeToggle:focus-visible { + outline: 3px solid var(--primary-gold); + outline-offset: 4px; + border-radius: 6px; +} + +/* Scroll To Top Button */ +#scrollTopBtn:focus-visible { + outline: 3px solid var(--deep-navy); + outline-offset: 5px; +} + +:focus:not(:focus-visible) { + outline: none; +} + diff --git a/frontend/css/accessibility.css b/frontend/css/accessibility.css new file mode 100644 index 00000000..d60d20f7 --- /dev/null +++ b/frontend/css/accessibility.css @@ -0,0 +1,229 @@ +/* ========================= + ACCESSIBILITY ENHANCEMENTS + WCAG 2.1 AA FRIENDLY + ========================= */ + +/* ---------- Color & Contrast ---------- */ + +.text-primary { + color: #1a1a1a; +} + +.text-secondary { + color: #4a4a4a; +} + +a { + color: #0066cc; +} + +a:visited { + color: #551a8b; +} + +a:hover, +a:focus-visible { + color: #0052a3; + text-decoration: underline; +} + +/* ---------- Buttons ---------- */ + +button { + background-color: #f0f0f0; + color: #000; + border: 1px solid #000; + cursor: pointer; +} + +button:hover { + background-color: #e0e0e0; +} + +/* Primary buttons */ +.hero-btn, +.submit-btn, +.btn-primary { + background-color: #0066cc; + color: #ffffff; + border: 2px solid #0066cc; +} + +.hero-btn:hover, +.submit-btn:hover, +.btn-primary:hover { + background-color: #0052a3; + border-color: #0052a3; +} + +/* ---------- Forms ---------- */ + +input, +textarea, +select { + background-color: #ffffff; + color: #000000; + border: 2px solid #666666; +} + +input:focus-visible, +textarea:focus-visible, +select:focus-visible { + border-color: #0066cc; +} + +/* ---------- Focus Indicators (Keyboard Users) ---------- */ + +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible, +select:focus-visible { + outline: 3px solid #0066cc; + outline-offset: 2px; + box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); +} + +/* Navigation focus */ +.nav-list a:focus-visible, +.nav-links a:focus-visible { + background-color: rgba(0, 102, 204, 0.1); + border-radius: 4px; +} + +/* ---------- Skip to Main Content ---------- */ + +.skip-to-main { + position: absolute; + top: -40px; + left: 0; + background: var(--primary-gold); + color: #000; + padding: 8px 16px; + z-index: 10000; +} + +.skip-to-main:focus { + top: 0; +} + + +/* ---------- Screen Reader Utilities ---------- */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.sr-only-focusable:focus-visible { + position: static; + width: auto; + height: auto; + margin: 0; + clip: auto; + overflow: visible; +} + +/* ---------- Tables ---------- */ + +table { + border-collapse: collapse; +} + +th, +td { + padding: 8px 12px; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +th { + text-align: left; + background-color: rgba(0, 102, 204, 0.1); + font-weight: 600; +} + +/* ---------- Validation Feedback ---------- */ + +input:invalid:focus-visible, +textarea:invalid:focus-visible, +select:invalid:focus-visible { + outline-color: #dc3545; + box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.3); +} + +input:valid:focus-visible, +textarea:valid:focus-visible, +select:valid:focus-visible { + outline-color: #28a745; + box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.3); +} + +/* ---------- Reduced Motion ---------- */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + scroll-behavior: auto !important; + } +} + +/* ---------- Dark Mode ---------- */ + +body.dark-mode { + background-color: #000000; + color: #ffffff; +} + +body.dark-mode .text-primary { + color: #ffffff; +} + +body.dark-mode .text-secondary { + color: #cccccc; +} + +body.dark-mode a { + color: #66b3ff; +} + +body.dark-mode a:visited { + color: #cc99ff; +} + +body.dark-mode button { + background-color: #333333; + color: #ffffff; + border-color: #666666; +} + +body.dark-mode button:hover { + background-color: #444444; +} + +/* ---------- High Contrast Preference ---------- */ + +@media (prefers-contrast: high) { + a:focus-visible, + button:focus-visible { + outline: 3px solid #000; + background-color: #ffffff; + color: #000000; + } + + body.dark-mode a:focus-visible, + body.dark-mode button:focus-visible { + outline: 3px solid #ffffff; + background-color: #000000; + color: #ffffff; + } +} diff --git a/frontend/css/style.css b/frontend/css/style.css deleted file mode 100644 index c329ff1a..00000000 --- a/frontend/css/style.css +++ /dev/null @@ -1,1725 +0,0 @@ -/* ========================= - GLOBAL RESET -========================= */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html, -body { - max-width: 100%; - overflow-x: hidden; -} - -@keyframes goldenLineReveal { - 0% { - width: 0; - opacity: 0; - } - 100% { - width: 90px; - opacity: 1; - } -} - - -/* ========================= - THEME VARIABLES (CLASSIC) - - */ - -:root { - --primary-gold: #d4af37; - --secondary-gold: #b8860b; - --deep-navy: #1b263b; - --warm-cream: #fdf4e3; - --light-parchment: #fff8e7; - --charcoal-dark: #2c2c2c; - --text-secondary: #5a5a5a; - --shadow-main: 0 8px 32px rgb(0 0 0 / 12%); - --shadow-hover: 0 20px 40px rgb(0 0 0 / 18%); - --bounce-curve: cubic-bezier(0.34, 1.56, 0.64, 1); -} - -body.dark-mode { - /* Backgrounds */ - --deep-navy: #0b1220; - --warm-cream: #141a2b; - --light-parchment: #1b2235; - --charcoal-dark: #070b14; - - /* Golds (slightly softer glow) */ - --primary-gold: #e4c76a; - --secondary-gold: #c9a43b; - --text-primary: #f5f4f0; - --text-secondary: #b9bfd1; - - - --shadow-main: 0 12px 40px rgba(0, 0, 0, 0.65); - --shadow-hover: 0 28px 70px rgba(0, 0, 0, 0.85); - - --border-subtle: rgba(255, 255, 255, 0.08); -} - -/* ========================= - BASE STYLES -========================= */ -body { - font-family: "Crimson Text", "Georgia", serif; - font-size: 15px; - line-height: 1.7; - background: linear-gradient( - 135deg, - var(--light-parchment) 0%, - var(--warm-cream) 100% - ); - color: var(--charcoal-dark); - padding-top: 90px; -} - -/* ========================= - HEADER / NAVBAR -========================= */ - -header { - background: rgb(255 255 255 / 98%); - backdrop-filter: saturate(180%) blur(20px); - border-bottom: 3px solid var(--primary-gold); - padding: 1rem 6%; - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 1000; - box-shadow: var(--shadow-main); -} - -.navbar-container { - max-width: 1400px; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; -} - -header h1 { - font-family: "Playfair Display", serif; - font-size: clamp(1.6rem, 3vw, 1.9rem); - font-weight: 700; - background: linear-gradient(135deg, - var(--deep-navy) 0%, - var(--primary-gold) 70%); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - letter-spacing: -0.01em; -} - -body.dark-mode header h1 { - background: linear-gradient( - 135deg, - #ffffff 0%, - var(--primary-gold) 55%, - var(--secondary-gold) 100% - ); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.nav-links { - display: flex; - align-items: center; - gap: 2rem; -} - -.nav-links a { - text-decoration: none; - color: var(--deep-navy) !important; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 600; - font-size: 0.95rem; - padding: 0.4rem 0; - position: relative; - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - white-space: nowrap; - text-transform: uppercase; - letter-spacing: 0.3px; -} - -.nav-links a::before { - content: ""; - position: absolute; - bottom: 0; - left: 50%; - width: 0; - height: 2px; - background: linear-gradient(90deg, - var(--primary-gold), - var(--secondary-gold)); - transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); - transform: translateX(-50%); - border-radius: 1px; -} - -.nav-links a:hover { - color: var(--primary-gold) !important; - transform: translateY(-1px); -} - -.nav-links a:hover::before { - width: 70%; -} - -.nav-links a.active { - color: var(--primary-gold) !important; - font-weight: 600; -} - -.nav-links a.active::before { - width: 70%; - background: var(--primary-gold); -} - -body.dark-mode header { - background: rgba(27, 38, 59, 0.98); -} - -body.dark-mode .nav-links a { - color: rgba(253, 244, 227, 0.95) !important; -} - -body.dark-mode .nav-links a:hover { - color: var(--primary-gold) !important; -} - -body.dark-mode .nav-links a.active { - color: var(--primary-gold) !important; -} - -main { - margin-top: 0; - padding-top: 0; -} - -header h1 i { - font-size: 0.95em; - line-height: 1; - display: inline-flex; - align-items: center; -} - -/* ========================= - SECTIONS -========================= */ -main section { - max-width: 1400px; - margin: 0 auto; - padding: 5rem 6%; -} - -section h3 { - font-family: "Playfair Display", serif; - font-size: clamp(2.2rem, 4.5vw, 2.9rem); - font-weight: 700; - text-align: center; - color: var(--deep-navy); - margin-bottom: 1.2rem; -} - -section h3::after { - content: ""; - display: block; - height: 3px; - margin: 1.2rem auto 0; - background: linear-gradient( - 90deg, - var(--primary-gold), - var(--secondary-gold) - ); - border-radius: 2px; - animation: goldenLineReveal 0.9s ease-out forwards; -} - -@media (prefers-reduced-motion: reduce) { - section h3::after { - animation: none; - width: 90px; - } -} - - -section p { - text-align: center; - max-width: 750px; - margin: 0 auto 3.5rem; - font-size: 1.05rem; - color: var(--text-secondary); -} - -/* ========================= - CARD GRID & BOUNCY HOVER -========================= */ - -.why-section { - position: relative; - background: linear-gradient(135deg, - var(--light-parchment) 0%, - var(--warm-cream) 50%, - var(--light-parchment) 100%); - overflow: hidden; - padding: 6rem 6% !important; -} - -/* Decorative Background Elements */ -.why-section::before { - content: ""; - position: absolute; - top: -50%; - right: -20%; - width: 600px; - height: 600px; - background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; -} - -.why-section::after { - content: ""; - position: absolute; - bottom: -40%; - left: -15%; - width: 500px; - height: 500px; - background: radial-gradient(circle, rgba(27, 38, 59, 0.05) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; -} - -.why-container { - position: relative; - z-index: 1; - max-width: 1400px; - margin: 0 auto; -} - -/* ========== SECTION HEADER ========== */ -.why-header { - text-align: center; - margin-bottom: 4.5rem; -} - -.why-eyebrow { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.6rem 1.5rem; - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.15) 0%, - rgba(212, 175, 55, 0.08) 100%); - border: 1px solid rgba(212, 175, 55, 0.3); - border-radius: 50px; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 700; - font-size: 0.9rem; - letter-spacing: 0.05em; - text-transform: uppercase; - color: var(--secondary-gold); - margin-bottom: 1.5rem; -} - -.why-eyebrow i { - color: var(--primary-gold); - animation: sparkle 2s ease-in-out infinite; -} - -@keyframes sparkle { - 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } - 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; } -} - -.why-header h3 { - font-family: "Playfair Display", serif; - font-size: clamp(2.5rem, 5vw, 3.5rem); - font-weight: 800; - color: var(--deep-navy); - margin-bottom: 1.5rem; - line-height: 1.2; -} - -.why-header h3::after { - content: ""; - display: block; - width: 100px; - height: 4px; - margin: 1.5rem auto 0; - background: linear-gradient(90deg, - transparent, - var(--primary-gold), - var(--secondary-gold), - transparent); - border-radius: 2px; -} - -.why-header p { - font-size: 1.15rem; - line-height: 1.8; - color: var(--text-secondary); - max-width: 700px; - margin: 0 auto; -} - -/* ========== FEATURE CARDS GRID ========== */ -.why-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 2.5rem; - margin-bottom: 5rem; -} - -.why-card { - position: relative; - background: rgba(255, 255, 255, 0.9); - border-radius: 24px; - padding: 3rem 2.5rem; - border: 1px solid rgba(212, 175, 55, 0.2); - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.08), - 0 1px 3px rgba(0, 0, 0, 0.06); - transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); - overflow: hidden; - cursor: pointer; -} - -.why-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 4px; - background: linear-gradient(90deg, - var(--primary-gold) 0%, - var(--secondary-gold) 100%); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.why-card:hover::before { - transform: scaleX(1); -} - -.why-card:hover { - transform: translateY(-12px) scale(1.02); - box-shadow: - 0 20px 50px rgba(212, 175, 55, 0.25), - 0 10px 20px rgba(0, 0, 0, 0.1); - border-color: rgba(212, 175, 55, 0.5); -} - -/* Card Icon */ -.why-card-icon { - position: relative; - width: 80px; - height: 80px; - margin: 0 auto 2rem; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.1) 0%, - rgba(212, 175, 55, 0.05) 100%); - border-radius: 20px; - border: 2px solid rgba(212, 175, 55, 0.3); - transition: all 0.4s ease; -} - -.icon-glow { - position: absolute; - inset: -10px; - background: radial-gradient(circle, - rgba(212, 175, 55, 0.3) 0%, - transparent 70%); - opacity: 0; - transition: opacity 0.4s ease; - z-index: -1; -} - -.why-card:hover .icon-glow { - opacity: 1; - animation: pulse-glow 2s ease-in-out infinite; -} - -@keyframes pulse-glow { - 0%, 100% { transform: scale(1); opacity: 0.6; } - 50% { transform: scale(1.1); opacity: 0.8; } -} - -.why-card-icon i { - font-size: 2.5rem; - color: var(--primary-gold); - transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); -} - -.why-card:hover .why-card-icon { - transform: rotateY(360deg); - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.2) 0%, - rgba(212, 175, 55, 0.1) 100%); - border-color: rgba(212, 175, 55, 0.6); -} - -.why-card:hover .why-card-icon i { - color: var(--secondary-gold); - transform: scale(1.2); -} - -/* Card Content */ -.why-card-content { - text-align: center; -} - -.why-card-content h4 { - font-family: "Playfair Display", serif; - font-size: 1.65rem; - font-weight: 700; - color: var(--deep-navy); - margin-bottom: 1rem; - transition: color 0.3s ease; -} - -.why-card:hover .why-card-content h4 { - color: var(--primary-gold); -} - -.why-card-content p { - font-size: 1.05rem; - line-height: 1.75; - color: var(--text-secondary); - margin: 0; -} - -/* Decorative Corner Element */ -.why-card-decoration { - position: absolute; - bottom: -2px; - right: -2px; - width: 60px; - height: 60px; - background: linear-gradient(135deg, - transparent 50%, - rgba(212, 175, 55, 0.1) 50%); - border-radius: 24px 0 24px 0; - opacity: 0; - transition: opacity 0.4s ease; -} - -.why-card:hover .why-card-decoration { - opacity: 1; -} - -/* ========== JOURNEY TIMELINE ========== */ -.why-journey { - position: relative; - padding: 3rem 0; - margin-top: 3rem; -} - -.journey-line { - position: absolute; - top: 50%; - left: 10%; - right: 10%; - height: 3px; - background: linear-gradient(90deg, - rgba(212, 175, 55, 0.2) 0%, - rgba(212, 175, 55, 0.6) 50%, - rgba(212, 175, 55, 0.2) 100%); - transform: translateY(-50%); - border-radius: 2px; -} - -.journey-steps { - display: flex; - justify-content: space-around; - align-items: center; - position: relative; - z-index: 1; -} - -.journey-step { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; -} - -.journey-icon { - width: 70px; - height: 70px; - display: flex; - align-items: center; - justify-content: center; - background: linear-gradient(135deg, - var(--primary-gold) 0%, - var(--secondary-gold) 100%); - border-radius: 50%; - box-shadow: - 0 4px 20px rgba(212, 175, 55, 0.4), - 0 0 0 8px rgba(255, 255, 255, 0.9), - 0 0 0 10px rgba(212, 175, 55, 0.2); - transition: all 0.4s ease; -} - -.journey-icon i { - font-size: 1.8rem; - color: white; -} - -.journey-step span { - font-family: "Inter", -apple-system, sans-serif; - font-weight: 700; - font-size: 1rem; - color: var(--deep-navy); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.journey-step:hover .journey-icon { - transform: scale(1.15) rotate(10deg); - box-shadow: - 0 8px 30px rgba(212, 175, 55, 0.5), - 0 0 0 8px rgba(255, 255, 255, 0.9), - 0 0 0 12px rgba(212, 175, 55, 0.3); -} - -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 2.5rem; - justify-items: center; -} - -.card { - width: 100%; - max-width: 360px; - padding: 2.2rem; - border-radius: 20px; - background: rgb(255 255 255 / 95%); - box-shadow: var(--shadow-main); - text-align: center; - position: relative; - border: 1px solid transparent; - transition: - transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6), - box-shadow 0.4s ease; - will-change: transform; - cursor: pointer; -} - -.card::before { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - border: 2px solid transparent; - transition: border-color 0.35s ease, box-shadow 0.35s ease; - pointer-events: none; -} - -.card:hover::before { - border-color: var(--primary-gold); - box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); -} - -.card:hover { - transform: translateY(-6px); - box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); - border-color: rgba(212, 175, 55, 0.3); - cursor: pointer; -} - -.card:hover i, -.card:hover h4 i { - transform: scale(1.2) rotate(8deg); - transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); - color: var(--secondary-gold); -} - -.card i, -.card img { - transition: transform 0.5s var(--bounce-curve); -} - -.card:hover img { - transform: scale(1.15) rotate(3deg); -} - -.card .badge { - transition: all 0.4s var(--bounce-curve); -} - -.card:hover .badge { - transform: scale(1.1); - box-shadow: 0 0 15px rgba(46, 204, 113, 0.4); -} - -.card h4 { - font-family: "Playfair Display", serif; - font-size: 1.45rem; - color: var(--deep-navy); - margin-bottom: 1.1rem; -} - -.card p { - font-size: 0.98rem; - color: var(--text-secondary); - line-height: 1.65; -} - -body.dark-mode .card:hover::before { - border-color: var(--primary-gold); - box-shadow: 0 0 22px rgba(228, 199, 106, 0.45); -} - -body.dark-mode .card { - background: linear-gradient( - 145deg, - rgba(20, 26, 43, 0.95), - rgba(27, 34, 53, 0.95) - ); - border: 1px solid rgba(228, 199, 106, 0.18); - box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75); - color: var(--text-primary); - backdrop-filter: blur(12px); -} - -body.dark-mode .card:hover { - transform: translateY(-6px); - box-shadow: - 0 35px 80px rgba(0, 0, 0, 0.9), - 0 0 0 1px rgba(228, 199, 106, 0.35); - border-color: rgba(228, 199, 106, 0.55); -} - -body.dark-mode .card h4 { - color: var(--text-primary); -} - -body.dark-mode .card p { - color: var(--text-secondary); -} - -body.dark-mode .card i { - color: var(--primary-gold); - filter: drop-shadow(0 6px 18px rgba(228, 199, 106, 0.35)); -} - -body.dark-mode .card:hover i { - color: var(--secondary-gold); -} - -body.dark-mode .card .badge { - background: rgba(228, 199, 106, 0.15); - color: var(--primary-gold); - border: 1px solid rgba(228, 199, 106, 0.35); - box-shadow: none; -} - -body.dark-mode .card:hover .badge { - box-shadow: 0 0 18px rgba(228, 199, 106, 0.35); -} - -body.dark-mode .card::before { - content: ""; - position: absolute; - inset: 1px; - border-radius: inherit; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.06), - transparent 35%, - transparent 65%, - rgba(228, 199, 106, 0.08) - ); - pointer-events: none; -} - -/* ========== DARK MODE STYLES FOR WHY SECTION ========== */ -body.dark-mode .why-section { - background: linear-gradient(135deg, - #0f0f0f 0%, - #1a1a1a 50%, - #0f0f0f 100%); -} - -body.dark-mode .why-section::before { - background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 70%); -} - -body.dark-mode .why-section::after { - background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); -} - -body.dark-mode .why-header h3 { - color: rgba(253, 244, 227, 0.98); -} - -body.dark-mode .why-header p { - color: rgba(253, 244, 227, 0.75); -} - -body.dark-mode .why-eyebrow { - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.2) 0%, - rgba(212, 175, 55, 0.1) 100%); - border-color: rgba(212, 175, 55, 0.4); - color: var(--primary-gold); -} - -body.dark-mode .why-card { - background: rgba(26, 26, 26, 0.95); - border-color: rgba(212, 175, 55, 0.25); - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.4), - 0 1px 3px rgba(0, 0, 0, 0.3); -} - -body.dark-mode .why-card:hover { - background: rgba(30, 30, 30, 0.98); - box-shadow: - 0 20px 50px rgba(212, 175, 55, 0.3), - 0 10px 20px rgba(0, 0, 0, 0.5); - border-color: rgba(212, 175, 55, 0.6); -} - -body.dark-mode .why-card-content h4 { - color: rgba(253, 244, 227, 0.95); -} - -body.dark-mode .why-card:hover .why-card-content h4 { - color: var(--primary-gold); -} - -body.dark-mode .why-card-content p { - color: rgba(253, 244, 227, 0.75); -} - -body.dark-mode .why-card-icon { - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.15) 0%, - rgba(212, 175, 55, 0.08) 100%); - border-color: rgba(212, 175, 55, 0.4); -} - -body.dark-mode .why-card:hover .why-card-icon { - background: linear-gradient(135deg, - rgba(212, 175, 55, 0.25) 0%, - rgba(212, 175, 55, 0.15) 100%); -} - -body.dark-mode .journey-icon { - box-shadow: - 0 4px 20px rgba(212, 175, 55, 0.5), - 0 0 0 8px rgba(26, 26, 26, 0.95), - 0 0 0 10px rgba(212, 175, 55, 0.3); -} - -body.dark-mode .journey-step span { - color: rgba(253, 244, 227, 0.9); -} - -body.dark-mode .journey-line { - background: linear-gradient(90deg, - rgba(212, 175, 55, 0.3) 0%, - rgba(212, 175, 55, 0.7) 50%, - rgba(212, 175, 55, 0.3) 100%); -} - -/* ========================= - SCROLL TO TOP BUTTON -========================= */ -#scrollTopBtn { - position: fixed; - bottom: 20px; - right: 13px; - width: 65px; - height: 65px; - background: linear-gradient(135deg, var(--primary-gold) 60%, var(--secondary-gold) 100%); - border-radius: 50%; - box-shadow: 0 4px 24px rgba(0,0,0,0.25); - display: none; - align-items: center; - justify-content: center; - z-index: 10000; - cursor: pointer; - transition: box-shadow 0.2s, transform 0.2s; - border: none; - padding: 10px 12px; -} - -/* When chatbot is present, keep scroll button below it */ -body.has-chatbot #scrollTopBtn { - bottom: 20px; - z-index: 9999; -} - -#scrollTopBtn:hover { - box-shadow: 0 8px 32px rgba(0,0,0,0.35); - transform: translateY(-4px) scale(1.05); -} - -#scrollTopBtn i, -#scrollTopBtn .arrow { - display: flex; - align-items: center; - justify-content: center; - width: 34px; - height: 34px; - font-size: 1.25rem; - color: #222; - pointer-events: none; - margin: 0; - padding: 0; -} - -/* ========================= - SCROLL PROGRESS INDICATOR -========================= */ -#scrollProgress { - position: fixed; - top: 0; - left: 0; - height: 3px; - width: 0%; - background: linear-gradient( - 90deg, - var(--primary-gold), - var(--secondary-gold) - ); - z-index: 2000; - transition: width 0.15s ease-out; -} - -/* ========================= - CURSOR HIGHLIGHT (FEATURE #495)*/ -/* CURSOR HIGHLIGHT (FEATURE #495) */ -#cursor-highlight { - position: fixed; - top: 0; - left: 0; - width: 36px; - height: 36px; - border-radius: 50%; - pointer-events: none; - z-index: 99999; - transform: translate(-50%, -50%); - background: radial-gradient( - circle, - rgba(212, 175, 55, 0.45) 0%, - rgba(212, 175, 55, 0.25) 35%, - rgba(212, 175, 55, 0.08) 60%, - transparent 70% - ); - box-shadow: - 0 0 18px rgba(212, 175, 55, 0.35), - 0 0 32px rgba(212, 175, 55, 0.18); - opacity: 0; - transition: - opacity 0.25s ease, - transform 0.08s linear; -} - -/* Show cursor highlight when active */ -body.cursor-highlight-enabled #cursor-highlight { - opacity: 1; -} - -/* Dark mode tuning */ -body.dark-mode #cursor-highlight { - background: radial-gradient( - circle, - rgba(212, 175, 55, 0.35) 0%, - rgba(212, 175, 55, 0.18) 40%, - rgba(212, 175, 55, 0.06) 65%, - transparent 75% - ); - box-shadow: - 0 0 20px rgba(212, 175, 55, 0.4), - 0 0 36px rgba(212, 175, 55, 0.2); -} - -/* ========================= - UPCOMING BADGE DESIGN -========================= */ - -.badge { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.65rem 1.5rem; - border-radius: 50px; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 700; - font-size: 0.9rem; - letter-spacing: 0.5px; - text-transform: uppercase; - position: relative; - overflow: hidden; - transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); - cursor: pointer; - border: none; - box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); -} - -/* Animated Pulsing Dot */ -.badge::before { - content: ""; - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #ffffff; - display: inline-block; - margin-right: 0.3rem; - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); -} - -@keyframes pulse { - 0%, 100% { - transform: scale(1); - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); - } - 50% { - transform: scale(1.1); - box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); - } -} - -/* Shimmer Effect */ -.badge::after { - content: ""; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.4), - transparent - ); - transition: left 0.6s ease; -} - -.badge:hover::after { - left: 100%; -} - -/* Default Dark Mode Look */ -body.dark-mode .badge, -.badge { - background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); -} - -/* Hover State - Dark Mode */ -body.dark-mode .badge:hover, -.badge:hover { - transform: translateY(-3px) scale(1.08); - box-shadow: - 0 8px 25px rgba(46, 204, 113, 0.5), - 0 0 40px rgba(46, 204, 113, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - background: linear-gradient(135deg, #2ecc71 0%, #1fa855 100%); -} - -/* Active/Click State */ -body.dark-mode .badge:active, -.badge:active { - transform: translateY(-1px) scale(1.03); - box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); -} - -/* ========================= - ALTERNATIVE GLASS STYLE (Optional) -========================= */ - -.badge.glass-style { - background: linear-gradient( - 135deg, - rgba(46, 204, 113, 0.25) 0%, - rgba(39, 174, 96, 0.3) 100% - ); - backdrop-filter: blur(12px) saturate(180%); - border: 1px solid rgba(46, 204, 113, 0.5); - color: #2ecc71; - text-shadow: 0 0 10px rgba(46, 204, 113, 0.5); - box-shadow: - 0 4px 20px rgba(46, 204, 113, 0.2), - inset 0 1px 0 rgba(46, 204, 113, 0.3); -} - -.badge.glass-style::before { - background-color: #2ecc71; - box-shadow: 0 0 10px rgba(46, 204, 113, 0.8); -} - -.badge.glass-style:hover { - background: linear-gradient( - 135deg, - rgba(46, 204, 113, 0.35) 0%, - rgba(39, 174, 96, 0.4) 100% - ); - border-color: rgba(46, 204, 113, 0.8); - color: #3be682; - transform: translateY(-3px) scale(1.08); - box-shadow: - 0 8px 30px rgba(46, 204, 113, 0.4), - 0 0 50px rgba(46, 204, 113, 0.3), - inset 0 1px 0 rgba(46, 204, 113, 0.4); -} - -/* ========================= - NEON GLOW STYLE (Optional) -========================= */ - -.badge.neon-style { - background: transparent; - border: 2px solid #2ecc71; - color: #2ecc71; - text-shadow: - 0 0 5px rgba(46, 204, 113, 0.5), - 0 0 10px rgba(46, 204, 113, 0.3); - box-shadow: - 0 0 10px rgba(46, 204, 113, 0.4), - inset 0 0 10px rgba(46, 204, 113, 0.1); -} - -.badge.neon-style::before { - background-color: #2ecc71; - box-shadow: 0 0 15px rgba(46, 204, 113, 1); -} - -.badge.neon-style:hover { - background: rgba(46, 204, 113, 0.1); - border-color: #3be682; - color: #3be682; - text-shadow: - 0 0 10px rgba(46, 204, 113, 0.8), - 0 0 20px rgba(46, 204, 113, 0.5); - box-shadow: - 0 0 20px rgba(46, 204, 113, 0.6), - 0 0 40px rgba(46, 204, 113, 0.4), - inset 0 0 15px rgba(46, 204, 113, 0.2); - transform: translateY(-3px) scale(1.08); -} - -/* ========================= - RESPONSIVE DESIGN -========================= */ -@media (max-width: 980px) { - .footer-top { - grid-template-columns: 1fr; - } - - .footer-columns { - grid-template-columns: repeat(2, minmax(160px, 1fr)); - } - - .why-grid { - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 2rem; - } - - .journey-steps { - gap: 1rem; - } - - .journey-icon { - width: 60px; - height: 60px; - } - - .journey-icon i { - font-size: 1.5rem; - } -} - -@media (max-width: 768px) { - .navbar-container { - flex-direction: column; - gap: 1rem; - text-align: center; - } - - .nav-links { - flex-wrap: wrap; - justify-content: center; - gap: 0.8rem; - } - - main section { - padding: 3rem 5%; - } - - section h3 { - font-size: 2rem; - } - - .why-section { - padding: 4rem 5% !important; - } - - .why-header { - margin-bottom: 3rem; - } - - .why-header h3 { - font-size: 2rem; - } - - .why-card { - padding: 2.5rem 2rem; - } - - .why-journey { - padding: 2rem 0; - } - - .journey-line { - left: 5%; - right: 5%; - } - - .badge { - padding: 0.55rem 1.2rem; - font-size: 0.85rem; - } -} - -@media (max-width: 520px) { - .footer-columns { - grid-template-columns: 1fr; - } -} - -@media (max-width: 480px) { - body { - font-size: 14px; - } - - .nav-links a { - font-size: 0.8rem; - } - - .card { - padding: 1.6rem 1.3rem; - transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), - box-shadow 0.3s ease; - will-change: transform; - } - - .card h4 { - font-size: 1.25rem; - } - - .why-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .why-card { - padding: 2rem 1.5rem; - } - - .why-card-icon { - width: 70px; - height: 70px; - } - - .why-card-icon i { - font-size: 2rem; - } - - .why-card-content h4 { - font-size: 1.4rem; - } - - .journey-steps { - flex-direction: column; - gap: 2rem; - } - - .journey-line { - left: 50%; - right: auto; - top: 0; - bottom: 0; - width: 3px; - height: 90%; - transform: translateX(-50%); - background: linear-gradient(180deg, - rgba(212, 175, 55, 0.2) 0%, - rgba(212, 175, 55, 0.6) 50%, - rgba(212, 175, 55, 0.2) 100%); - } - - .journey-icon { - width: 50px; - height: 50px; - } - - .journey-icon i { - font-size: 1.3rem; - } - - .journey-step span { - font-size: 0.9rem; - } - - .badge { - padding: 0.5rem 1rem; - font-size: 0.8rem; - } - - .badge::before { - width: 6px; - height: 6px; - } -} - -/* ========================= - OPENSOURCE GUIDE CHATBOT - -#opensource-chatbot { - position: fixed; - bottom: 90px; /* stays above scroll button */ - right: 24px; - z-index: 99999; -} - -.chat-widget-btn { - width: 58px; - height: 58px; - border-radius: 50%; - background: linear-gradient( - 135deg, - var(--primary-gold), - var(--secondary-gold) - ); - color: #0b1220; - border: none; - cursor: pointer; - font-size: 24px; - display: flex; - align-items: center; - justify-content: center; - - box-shadow: - 0 14px 40px rgba(0, 0, 0, 0.45), - 0 0 0 1px rgba(212, 175, 55, 0.35); - - transition: - transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), - box-shadow 0.35s ease; -} - -.chat-widget-btn:hover { - transform: translateY(-6px) scale(1.08); - box-shadow: - 0 22px 60px rgba(0, 0, 0, 0.6), - 0 0 0 2px rgba(212, 175, 55, 0.55); -} - -body.dark-mode .chat-widget-btn { - - color: #0b1220; -} - - ACCESSIBILITY -@media (prefers-reduced-motion: reduce) { - footer.site-footer::after, - .footer-mark, - .why-card, - .why-card-icon, - .why-card-icon i, - .journey-icon, - .icon-glow, - #cursor-highlight { - animation: none !important; - transition: none !important; - } -} - -/* ========================= - QUIZ SECTION SCROLLBAR -#level-chain-wrapper::-webkit-scrollbar { - display: none; -} - -/* ========================= - PRINT STYLES -@media print { - .why-section::before, - .why-section::after, - .icon-glow, - .why-card-decoration { - display: none; - } -} - - - -/* ========================= - FOOTER (GLOBAL) -========================= */ -footer.site-footer { - position: relative; - overflow: hidden; - background: - radial-gradient(900px circle at 10% 10%, rgba(212, 175, 55, 0.22) 0%, transparent 55%), - radial-gradient(800px circle at 90% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), - linear-gradient(135deg, #0f1724 0%, #121c2c 45%, #0b1220 100%); - color: rgba(253, 244, 227, 0.9); - padding: 4.2rem 6% 3.2rem; - border-top: 1px solid rgba(212, 175, 55, 0.18); -} - -footer.site-footer::before { - content: ""; - position: absolute; - inset: -2px; - background: - repeating-linear-gradient(90deg, - rgba(212, 175, 55, 0.14) 0, - rgba(212, 175, 55, 0.14) 1px, - transparent 1px, - transparent 28px), - repeating-linear-gradient(0deg, - rgba(255, 255, 255, 0.06) 0, - rgba(255, 255, 255, 0.06) 1px, - transparent 1px, - transparent 28px); - mask-image: radial-gradient(circle at 50% 10%, rgba(0, 0, 0, 0.9) 0%, transparent 72%); - opacity: 0.5; - pointer-events: none; -} - -footer.site-footer::after { - content: ""; - position: absolute; - width: 1200px; - height: 1200px; - left: 50%; - bottom: -780px; - transform: translateX(-50%); - background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, transparent 58%); - filter: blur(2px); - opacity: 0.9; - pointer-events: none; - animation: footerGlow 9s ease-in-out infinite; -} - -footer.site-footer ul { - list-style: none; - margin-left: 5px; -} - -@keyframes footerGlow { - 0%, - 100% { - transform: translateX(-50%) scale(1); - opacity: 0.85; - } - - 50% { - transform: translateX(-50%) scale(1.05); - opacity: 1; - } -} - -.footer-shell { - position: relative; - z-index: 1; - max-width: 1200px; - margin: 0 auto; -} - -.footer-top { - display: grid; - grid-template-columns: 1.1fr 1.4fr; - gap: 2.5rem; - align-items: start; -} - -.footer-brand { - display: flex; - gap: 1rem; - align-items: flex-start; -} - -.footer-mark { - width: 46px; - height: 46px; - border-radius: 14px; - display: grid; - place-items: center; - background: linear-gradient(135deg, rgba(212, 175, 55, 0.95), rgba(184, 134, 11, 0.9)); - color: #0b1220; - box-shadow: 0 14px 32px rgba(212, 175, 55, 0.22); - transform: translateY(0); - animation: footerFloat 6s ease-in-out infinite; -} - -@keyframes footerFloat { - 0%, - 100% { - transform: translateY(0); - } - - 50% { - transform: translateY(-8px); - } -} - -.footer-title { - font-family: "Playfair Display", serif; - font-size: 1.55rem; - font-weight: 800; - letter-spacing: -0.01em; - color: rgba(253, 244, 227, 0.98); -} - -.footer-tagline { - margin-top: 0.35rem; - font-family: "Inter", -apple-system, sans-serif; - font-size: 0.98rem; - line-height: 1.6; - color: rgba(253, 244, 227, 0.78); - max-width: 46ch; -} - -.footer-columns { - display: grid; - grid-template-columns: repeat(3, minmax(160px, 1fr)); - gap: 1.8rem; -} - -.footer-col-title { - font-family: "Inter", -apple-system, sans-serif; - font-weight: 800; - font-size: 0.92rem; - letter-spacing: 0.12em; - text-transform: uppercase; - margin-bottom: 0.9rem; - color: rgba(212, 175, 55, 0.95); -} - -.footer-col a { - display: inline-flex; - align-items: center; - width: fit-content; - margin: 0.35rem 0; - font-family: "Inter", -apple-system, sans-serif; - font-size: 0.98rem; - color: rgba(253, 244, 227, 0.88); - text-decoration: none; - position: relative; - transition: transform 0.2s ease, color 0.2s ease; -} - -.footer-col a::after { - content: ""; - position: absolute; - left: 0; - bottom: -6px; - width: 100%; - height: 2px; - border-radius: 2px; - background: linear-gradient(90deg, rgba(212, 175, 55, 0.0), rgba(212, 175, 55, 0.9), rgba(212, 175, 55, 0.0)); - transform: scaleX(0); - transform-origin: center; - transition: transform 0.22s ease; - opacity: 0.9; -} - -.footer-col a:hover { - transform: translateX(2px); - color: rgba(253, 244, 227, 0.98); -} - -.footer-col a:hover::after { - transform: scaleX(1); -} - -.footer-divider { - height: 1px; - margin: 2.25rem 0 1.6rem; - background: linear-gradient(90deg, - transparent, - rgba(212, 175, 55, 0.32), - rgba(255, 255, 255, 0.08), - rgba(212, 175, 55, 0.32), - transparent); -} - -.footer-bottom { - display: flex; - gap: 1.25rem; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; -} - -.footer-badges { - display: flex; - gap: 0.6rem; - flex-wrap: wrap; -} - -.footer-pill { - display: inline-flex; - align-items: center; - gap: 0.45rem; - padding: 0.55rem 0.8rem; - border-radius: 999px; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 700; - font-size: 0.9rem; - color: rgba(253, 244, 227, 0.92); - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(212, 175, 55, 0.16); - backdrop-filter: blur(10px); -} - -.footer-meta { - display: flex; - align-items: center; - gap: 0.7rem; - font-family: "Inter", -apple-system, sans-serif; - color: rgba(253, 244, 227, 0.78); - font-size: 0.95rem; -} - -.footer-inline { - display: inline-flex; - align-items: center; - gap: 0.45rem; - color: rgba(212, 175, 55, 0.98); - text-decoration: none; - font-weight: 700; -} - -.footer-inline:hover { - text-decoration: underline; -} - -.footer-sep { - opacity: 0.6; -} - -body.dark-mode footer.site-footer { - background: - radial-gradient(900px circle at 10% 10%, rgba(212, 175, 55, 0.16) 0%, transparent 55%), - radial-gradient(800px circle at 90% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 55%), - linear-gradient(135deg, rgba(13, 17, 23, 0.96) 0%, rgba(22, 27, 34, 0.96) 100%); -} - -/* ========================= - RESOURCE LINKS -========================= */ -.resource-link-wrapper { - display: flex; - align-items: center; - gap: 10px; - margin-top: 0.8rem; -} - -.resource-link { - color: var(--primary-gold); - font-weight: 600; - text-decoration: none; -} - -.resource-link:hover { - text-decoration: underline; -} - -.copy-btn { - border: none; - background: transparent; - cursor: pointer; - color: var(--deep-navy); - font-size: 1rem; -} - -.copy-btn:hover { - color: var(--primary-gold); - transform: scale(1.1); -} - -.copy-feedback { - font-size: 0.8rem; - color: green; - display: none; -} - -/* ========================= - DARK MODE FIXES -========================= */ -body.dark-mode .navbar, -body.dark-mode header { - background-color: rgba(27, 38, 59, 0.98); - border-bottom: 1px solid #333; -} - -body.dark-mode .nav-link, -body.dark-mode .navbar a { - color: rgba(253, 244, 227, 0.95); -} - -body.dark-mode input, -body.dark-mode textarea { - background-color: #333; - color: #fff; - border-color: #555; -} - -body.dark-mode .program-card h3, -body.dark-mode .program-card h4, -body.dark-mode .program-card h2, -body.dark-mode .program-card i { - color: #ffffff !important; -} - -body.dark-mode .program-card p { - color: #e0e0e0; -} - -body.dark-mode .newsletter, -body.dark-mode .newsletter-section { - background-color: #1a1a1a !important; - color: #ffffff !important; - border-top: 1px solid #333; -} - -body.dark-mode .newsletter h2, -body.dark-mode .newsletter h3, -body.dark-mode .newsletter p, -body.dark-mode .newsletter-section h2 { - color: #ffffff !important; -} - -body.dark-mode .newsletter input, -body.dark-mode .newsletter-section input { - background-color: #333 !important; - color: #ffffff !important; - border: 1px solid #555 !important; -} - diff --git a/frontend/js/components.js b/frontend/js/components.js index 2db9d5ec..c6c7fa64 100644 --- a/frontend/js/components.js +++ b/frontend/js/components.js @@ -21,34 +21,35 @@ function getPath(path) { } const navbarHTML = ` -
-
-

- -OpenSource Compass - -

-
- Home - Guides - Programs - Resources - Contributors - FAQ - Contribute - Feedback - +
+
+ +
+ Home + Guides + Programs + Resources + Contributors + FAQ + Contribute + Feedback + +
+ +
- - - `; const footerHTML = ` @@ -57,7 +58,7 @@ const footerHTML = `
OpenSource Compass
@@ -119,22 +120,22 @@ const footerHTML = `
- Community-safe - Beginner-ready - Open source + Community-safe + Beginner-ready + Open source
- © OpenSource Compass + © OpenSource Compass - Star on GitHub + Star on GitHub
diff --git a/frontend/js/theme.js b/frontend/js/theme.js index 539c68a3..a61ba236 100644 --- a/frontend/js/theme.js +++ b/frontend/js/theme.js @@ -7,9 +7,20 @@ document.addEventListener('DOMContentLoaded', () => { const applyTheme = (isDark) => { document.body.classList.toggle('dark-mode', isDark); updateThemeIcon(isDark); + + const toggleBtn = document.getElementById('themeToggle'); + if (toggleBtn) { + toggleBtn.setAttribute('aria-pressed', isDark ? 'true' : 'false'); + toggleBtn.setAttribute( + 'aria-label', + isDark ? 'Switch to light mode' : 'Switch to dark mode' + ); + } + localStorage.setItem('theme', isDark ? 'dark' : 'light'); }; + // Load saved theme const savedTheme = localStorage.getItem('theme'); applyTheme(savedTheme === 'dark'); @@ -25,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => { // Keyboard shortcut: Press "D" document.addEventListener('keydown', (e) => { - if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; + if (['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return; if (e.key.toLowerCase() !== 'd') return; const isDark = !document.body.classList.contains('dark-mode'); @@ -40,8 +51,17 @@ document.addEventListener('DOMContentLoaded', () => { const currentPath = window.location.pathname.split('/').pop() || 'index.html'; document.querySelectorAll('.nav-links a').forEach(link => { const linkPath = link.getAttribute('href').split('/').pop(); - link.classList.toggle('active', linkPath === currentPath); + const isActive = linkPath === currentPath; + + link.classList.toggle('active', isActive); + + if (isActive) { + link.setAttribute('aria-current', 'page'); + } else { + link.removeAttribute('aria-current'); + } }); + }; highlightActiveLink(); @@ -54,7 +74,14 @@ document.addEventListener('DOMContentLoaded', () => { if (scrollTopBtn) { window.addEventListener('scroll', () => { - scrollTopBtn.style.display = window.scrollY > 300 ? 'flex' : 'none'; + if (window.scrollY > 300) { + scrollTopBtn.style.display = 'flex'; + scrollTopBtn.removeAttribute('aria-hidden'); + } else { + scrollTopBtn.style.display = 'none'; + scrollTopBtn.setAttribute('aria-hidden', 'true'); + } + }); scrollTopBtn.addEventListener('click', () => { diff --git a/frontend/pages/Contribute.html b/frontend/pages/Contribute.html index 583e9af4..194fcb20 100644 --- a/frontend/pages/Contribute.html +++ b/frontend/pages/Contribute.html @@ -472,7 +472,10 @@

Contribution Best Practices

- +
+ +
+ diff --git a/frontend/pages/contributors.html b/frontend/pages/contributors.html index 13b2e0f5..ca0fc182 100644 --- a/frontend/pages/contributors.html +++ b/frontend/pages/contributors.html @@ -23,7 +23,10 @@ - +
+ +
+
@@ -48,7 +51,10 @@

Contributors

- +
+ +
+ diff --git a/frontend/pages/faq.html b/frontend/pages/faq.html index 64fa5c82..dfded692 100644 --- a/frontend/pages/faq.html +++ b/frontend/pages/faq.html @@ -251,7 +251,10 @@

Frequently Asked Questions

- +
+ +
+ diff --git a/frontend/pages/feedback.html b/frontend/pages/feedback.html index 39db75f8..8559e1f6 100644 --- a/frontend/pages/feedback.html +++ b/frontend/pages/feedback.html @@ -13,7 +13,10 @@ - +
+ +
+
diff --git a/frontend/pages/glossary.html b/frontend/pages/glossary.html index eb3a88bb..bb4139b4 100644 --- a/frontend/pages/glossary.html +++ b/frontend/pages/glossary.html @@ -118,7 +118,10 @@

All Glossary Terms

- +
+ +
+ + + + - - - - - -
- - - - - - - - - -main - + diff --git a/sw.js b/sw.js index 1c0a2323..e74abcc2 100644 --- a/sw.js +++ b/sw.js @@ -5,7 +5,7 @@ const ASSETS_TO_CACHE = [ './', './index.html', './offline.html', - './frontend/css/style.css', + './css/style.css', './frontend/css/home.css', './frontend/js/components.js', './frontend/js/theme.js',