diff --git a/backend/package-lock.json b/backend/package-lock.json index 848a780d..8e1a048f 100644 --- a/backend/package-lock.json +++ b/backend/package-lock.json @@ -10,6 +10,7 @@ "license": "ISC", "dependencies": { "@google/generative-ai": "^0.24.1", + "axios": "^1.13.4", "bcryptjs": "^3.0.3", "cookie-parser": "^1.4.7", "cors": "^2.8.5", @@ -66,6 +67,23 @@ "node": ">= 0.6" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, + "node_modules/axios": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz", + "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.4", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/bcryptjs": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz", @@ -152,6 +170,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/content-disposition": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz", @@ -241,6 +271,15 @@ } } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", @@ -330,6 +369,21 @@ "node": ">= 0.4" } }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -409,6 +463,63 @@ "url": "https://opencollective.com/express" } }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz", + "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/form-data/node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/form-data/node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -497,6 +608,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "license": "MIT", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -917,6 +1043,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/backend/package.json b/backend/package.json index 820adad7..e957fa5a 100644 --- a/backend/package.json +++ b/backend/package.json @@ -12,6 +12,7 @@ "type": "module", "dependencies": { "@google/generative-ai": "^0.24.1", + "axios": "^1.13.4", "bcryptjs": "^3.0.3", "cookie-parser": "^1.4.7", "cors": "^2.8.5", diff --git a/frontend/css/home.css b/frontend/css/home.css index c5a27101..995f01e4 100644 --- a/frontend/css/home.css +++ b/frontend/css/home.css @@ -181,20 +181,50 @@ border: 1px solid rgba(212, 175, 55, 0.18); } +/* HERO VISUAL CIRCLE DESIGN */ .hero-visual { position: relative; - min-height: 380px; + min-height: 550px; + /* Increased height for orbital space */ + display: flex; + justify-content: center; + align-items: center; +} + +/* Center the Orb */ +.hero-orb { + width: 220px; + height: 220px; + border-radius: 50%; + position: absolute; + /* Centered perfectly */ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + right: auto; + /* Reset previous right positioning */ + /* Visuals */ + display: grid; + place-items: center; + background: radial-gradient(circle at 35% 30%, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 248, 231, 0.9) 55%, + rgba(212, 175, 55, 0.18) 100%); + box-shadow: 0 22px 60px rgba(0, 0, 0, 0.12); + border: 1px solid rgba(212, 175, 55, 0.22); + animation: heroFloat 6s ease-in-out infinite; + z-index: 5; } @keyframes heroFloat { 0%, 100% { - transform: translateY(0); + transform: translate(-50%, -50%) translateY(0); } 50% { - transform: translateY(-10px); + transform: translate(-50%, -50%) translateY(-10px); } } @@ -220,22 +250,14 @@ } } -.hero-orb { - width: 220px; - height: 220px; - border-radius: 50%; - position: absolute; - right: 20px; - top: 10px; - display: grid; - place-items: center; - background: radial-gradient(circle at 35% 30%, - rgba(255, 255, 255, 0.95) 0%, - rgba(255, 248, 231, 0.9) 55%, - rgba(212, 175, 55, 0.18) 100%); - box-shadow: 0 22px 60px rgba(0, 0, 0, 0.12); - border: 1px solid rgba(212, 175, 55, 0.22); - animation: heroFloat 6s ease-in-out infinite; +@keyframes heroRoute { + from { + stroke-dashoffset: 0; + } + + to { + stroke-dashoffset: -180; + } } .hero-orb-ring { @@ -246,22 +268,6 @@ animation: heroSpin 18s linear infinite; } -.hero-orb-core { - width: 86px; - height: 86px; - border-radius: 24px; - display: grid; - place-items: center; - background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(27, 38, 59, 0.82)); - box-shadow: 0 18px 40px rgba(27, 38, 59, 0.18); - border: 1px solid rgba(212, 175, 55, 0.25); -} - -.hero-orb-core i { - font-size: 2.2rem; - color: var(--primary-gold); -} - .hero-orb-needle { position: absolute; left: 50%; @@ -284,6 +290,8 @@ width: min(520px, 100%); height: auto; opacity: 0.9; + z-index: 1; + /* Behind orb but visible */ } .hero-route-path { @@ -301,55 +309,124 @@ stroke-width: 3; } -@keyframes heroRoute { - from { - stroke-dashoffset: 0; +/* Floating Chips Container */ +.hero-floats { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + /* Let clicks pass through */ +} + +/* Base Float Style */ +.hero-float { + position: absolute; + display: flex; + align-items: center; + gap: 12px; + padding: 10px 20px; + border-radius: 50px; + background: #ffffff; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); + /* Softer shadow */ + border: 1px solid rgba(212, 175, 55, 0.15); + font-family: "Inter", sans-serif; + font-weight: 600; + font-size: 0.95rem; + color: #1e293b; + white-space: nowrap; + /* Removed heroFloat from here as it conflicts with absolute positioning if not careful, or use a specific one */ + /* For floating chips, we can use a simpler float animation or keyframe that doesn't use translate(-50%, -50%) */ + animation: chipFloat 6s ease-in-out infinite; + z-index: 10; + transition: transform 0.3s ease; +} + +@keyframes chipFloat { + + 0%, + 100% { + transform: translateY(0); } - to { - stroke-dashoffset: -180; + 50% { + transform: translateY(-8px); } } -.hero-floats { - position: absolute; - inset: 0; +.hero-float:hover { + transform: scale(1.05); + box-shadow: 0 15px 35px rgba(212, 175, 55, 0.2) !important; + border-color: var(--primary-gold); } -.hero-float { - position: absolute; - display: inline-flex; +/* Icon Styling */ +.float-icon { + width: 32px; + height: 32px; + border-radius: 50%; + background: rgba(212, 175, 55, 0.15); + /* Gold tint base */ + color: var(--primary-gold); + display: flex; align-items: center; - gap: 0.55rem; - padding: 0.75rem 0.95rem; - border-radius: 999px; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 650; - font-size: 0.92rem; - color: rgba(27, 38, 59, 0.92); - background: rgba(255, 255, 255, 0.78); - border: 1px solid rgba(212, 175, 55, 0.22); - box-shadow: var(--shadow-main); - backdrop-filter: blur(10px); + justify-content: center; + font-size: 0.9rem; } +.float-icon.icon-blue { + background: rgba(27, 38, 59, 0.1); + /* Navy tint base */ + color: var(--deep-navy); +} + +/* ORBIT POSITIONS (Radius ~160px-180px) */ +/* 1. Top Right (Beginner-friendly) */ .hero-float-1 { - left: 12px; - top: 55px; - animation: heroFloat 7s ease-in-out infinite; + left: 65%; + top: 15%; + animation-delay: 0s; } +/* 2. Middle Right (Curated paths) */ .hero-float-2 { - left: 0; - bottom: 90px; - animation: heroFloat 8.5s ease-in-out infinite; + left: 80%; + top: 50%; + transform: translateY(-50%); + animation-delay: 1.5s; } +/* 3. Bottom Right (Real programs) */ .hero-float-3 { - right: 0; - bottom: 35px; - animation: heroFloat 7.6s ease-in-out infinite; + left: 65%; + bottom: 15%; + animation-delay: 1s; +} + +/* 4. Bottom Left (Good first issues) */ +.hero-float-4 { + right: 65%; + bottom: 15%; + animation-delay: 2s; +} + +/* 5. Middle Left (Community-first) */ +.hero-float-5 { + right: 80%; + top: 50%; + transform: translateY(-50%); + animation-delay: 0.5s; +} + +/* 6. Top Left (Programs hub) */ +.hero-float-6 { + right: 65%; + top: 15%; + animation-delay: 2.5s; } + .compass-timeline { position: relative; display: flex; @@ -365,12 +442,10 @@ top: 0; bottom: 0; width: 2px; - background: linear-gradient( - to bottom, - transparent, - var(--secondary-gold), - transparent - ); + background: linear-gradient(to bottom, + transparent, + var(--secondary-gold), + transparent); opacity: 0.6; } @@ -380,979 +455,1003 @@ var(--primary-gold) 0%, var(--secondary-gold) 50%, var(--primary-gold) 100%); -/* ---------- STEP ---------- */ - -.compass-step { - display: flex; - gap: 2rem; - align-items: flex-start; -} - -/* Icon */ -.compass-icon { - width: 64px; - height: 64px; - border-radius: 50%; - display: grid; - place-items: center; - background: linear-gradient( - 135deg, - var(--primary-gold), - var(--secondary-gold) - ); - color: var(--deep-navy); - font-size: 1.4rem; - box-shadow: var(--shadow-main); - flex-shrink: 0; - transition: transform 0.4s var(--bounce-curve); -} - -.compass-step:hover .compass-icon { - transform: scale(1.1) rotate(4deg); -} + /* ---------- STEP ---------- */ -/* Content */ -.compass-content h4 { - font-size: 1.3rem; - color: var(--deep-navy); - margin-bottom: 0.5rem; -} - -.compass-content p { - color: var(--text-secondary); - line-height: 1.6; - max-width: 520px; -} - -/* ---------- MOBILE ---------- */ - -@media (max-width: 640px) { - .compass-timeline::before { - left: 28px; + .compass-step { + display: flex; + gap: 2rem; + align-items: flex-start; } - .compass-header h3 { - font-size: 2.2rem; + /* Icon */ + .compass-icon { + width: 64px; + height: 64px; + border-radius: 50%; + display: grid; + place-items: center; + background: linear-gradient(135deg, + var(--primary-gold), + var(--secondary-gold)); + color: var(--deep-navy); + font-size: 1.4rem; + box-shadow: var(--shadow-main); + flex-shrink: 0; + transition: transform 0.4s var(--bounce-curve); } -} -.stats { - background-color: var(--light-parchment); - padding: 80px 20px; - text-align: center; - position: relative; - z-index: 1; -} - -.stats-header { - max-width: 700px; - margin: 0 auto 60px; -} - -.stats-eyebrow { - display: inline-block; - font-weight: 600; - color: var(--secondary-gold); - letter-spacing: 1px; - margin-bottom: 0.5rem; - text-transform: uppercase; - font-size: 0.9rem; -} - -.stats-header h3 { - font-size: 2.4rem; - color: var(--deep-navy); - margin-bottom: 1rem; -} - -.stats-header p { - color: var(--text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -.stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 30px; -} -.stat-card { - background: var(--warm-cream); - border-radius: 16px; - border: 2px solid var(--primary-gold); /* Gold border */ - padding: 40px 20px; - box-shadow: var(--shadow-main); - transition: transform 0.5s var(--bounce-curve), box-shadow 0.3s ease, border-color 0.3s ease; -} - -.stat-card:hover { - transform: translateY(-12px); - box-shadow: var(--shadow-hover); -} - -.stat-icon { - font-size: 2.5rem; - color: var(--primary-gold); - margin-bottom: 1rem; -} - -.stat-card h2 { - font-size: 2rem; - color: var(--deep-navy); - margin-bottom: 0.5rem; -} - -.stat-card p { - color: var(--text-secondary); - font-weight: 500; -} - -/* ========================= - HOME SECTIONS -========================= */ -main section { - padding: 5rem 6%; - max-width: 1400px; - margin: 0 auto; -} -.programs { - background-color: var(--warm-cream); - padding: 100px 20px; - text-align: center; -} - -.programs-header { - max-width: 750px; - margin: 0 auto 70px; -} -.programs-eyebrow { - display: inline-block; - font-weight: 700; - color: var(--secondary-gold); - letter-spacing: 1.2px; - text-transform: uppercase; - font-size: 0.9rem; - margin-bottom: 0.5rem; -} - -.programs-header h3 { - font-size: 2.6rem; - color: var(--deep-navy); - margin-bottom: 1rem; -} - -.programs-header p { - color: var(--text-secondary); - font-size: 1rem; - line-height: 1.6; -} - -.card-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 35px; -} - -/* Program Card Styling */ -.program-card { - background: linear-gradient(145deg, var(--light-parchment), #fff8e7); - border-radius: 20px; - padding: 35px 25px; - box-shadow: var(--shadow-main); - transition: transform 0.6s var(--bounce-curve), box-shadow 0.4s ease, background 0.4s ease; - text-align: left; - position: relative; - overflow: hidden; -} - -/* Hover Effect */ -.program-card:hover { - transform: translateY(-12px) scale(1.03) rotateX(1.5deg); - box-shadow: var(--shadow-hover); - background: linear-gradient(145deg, var(--primary-gold), var(--secondary-gold)); - color: var(--warm-cream); -} - -/* Icon */ -.program-icon { - font-size: 2.5rem; - color: var(--primary-gold); - margin-bottom: 1rem; - transition: transform 0.5s, color 0.4s; -} - -.program-card:hover .program-icon { - color: var(--warm-cream); - transform: scale(1.4) rotate(10deg); -} - -.program-card h4 { - font-size: 1.4rem; - color: var(--deep-navy); - margin-bottom: 0.6rem; - transition: color 0.4s; -} - -.program-card:hover h4 { - color: var(--warm-cream); -} - -.program-card p { - color: var(--text-secondary); - font-size: 0.95rem; - margin-bottom: 1rem; - transition: color 0.4s; -} - -.program-card:hover p { - color: var(--warm-cream); -} + .compass-step:hover .compass-icon { + transform: scale(1.1) rotate(4deg); + } -/* Badge Styling */ -.program-card .badge { - display: inline-block; - padding: 5px 12px; - font-size: 0.8rem; - font-weight: 600; - border-radius: 12px; - background-color: var(--secondary-gold); - color: var(--warm-cream); - transition: background 0.4s; -} + /* Content */ + .compass-content h4 { + font-size: 1.3rem; + color: var(--deep-navy); + margin-bottom: 0.5rem; + } -.program-card:hover .badge { - background-color: var(--warm-cream); - color: var(--deep-navy); -} + .compass-content p { + color: var(--text-secondary); + line-height: 1.6; + max-width: 520px; + } -.newsletter { - background: #f8fbff; - border: 1px solid #cbd5e1; - padding: 24px; - border-radius: 12px; - color: #0f172a; - width: 100%; - max-width: 100%; - padding: 80px 20px; - box-sizing: border-box; - background-color: #ffff; /* Light cream base */ - padding: 80px 20px; - text-align: center; - color: var(--charcoal-dark); /* Dark text for readability */ - position: relative; - overflow: hidden; - border-radius: 20px; - margin: 60px auto; - max-width: 900px; - box-shadow: var(--shadow-main); - transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; -} + /* ---------- MOBILE ---------- */ -.newsletter:hover { - transform: translateY(-6px); - box-shadow: var(--shadow-hover); - background-color: #fff7e6; /* slightly brighter on hover */ -} + @media (max-width: 640px) { + .compass-timeline::before { + left: 28px; + } -/* Headings */ -.newsletter h3 { - font-size: 2.2rem; - color: var(--secondary-gold); /* keep gold as highlight */ - margin-bottom: 1rem; -} + .compass-header h3 { + font-size: 2.2rem; + } + } -.newsletter p { - font-size: 1rem; - color: var(--text-secondary); - margin-bottom: 2rem; - line-height: 1.6; -} + .stats { + background-color: var(--light-parchment); + padding: 80px 20px; + text-align: center; + position: relative; + z-index: 1; + } -/* Form layout */ -.newsletter-form { - display: flex; - justify-content: center; - gap: 12px; - flex-wrap: wrap; -} + .stats-header { + max-width: 700px; + margin: 0 auto 60px; + } -.newsletter input { - flex: 1; - max-width: 320px; - padding: 1rem 1.8rem; - border: 2px solid rgba(255, 255, 255, 0.2); - border-radius: 50px; - background: rgba(255, 255, 255, 0.1); - color: white; - font-size: 0.98rem; - font-family: "Inter", -apple-system, sans-serif; - border: 2px solid #94a3b8; - background: #ffffff; - color: #0f172a; -} - -.newsletter input::placeholder { - color: #475569; -.newsletter-form input[type="email"] { - padding: 14px 20px; - border-radius: 12px; - border: 1px solid var(--primary-gold); - outline: none; - font-size: 1rem; - width: 280px; - max-width: 100%; - transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; -} - -.newsletter-form input[type="email"]:focus { - box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3); /* soft gold glow */ - transform: scale(1.02); - border-color: var(--secondary-gold); -} - -/* Button */ -.newsletter-form button { - background: var(--primary-gold); - color: var(--light-parchment); - padding: 14px 30px; - font-size: 1rem; - border: none; - border-radius: 12px; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; - font-weight: 600; - transition: background 0.4s, transform 0.3s, box-shadow 0.3s; -} + .stats-eyebrow { + display: inline-block; + font-weight: 600; + color: var(--secondary-gold); + letter-spacing: 1px; + margin-bottom: 0.5rem; + text-transform: uppercase; + font-size: 0.9rem; + } -.newsletter-form button:hover { - background: var(--secondary-gold); - transform: translateY(-3px) scale(1.05); - box-shadow: var(--shadow-hover); -} + .stats-header h3 { + font-size: 2.4rem; + color: var(--deep-navy); + margin-bottom: 1rem; + } -.newsletter-form button i { - transition: transform 0.3s; -} + .stats-header p { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.6; + } -.newsletter-form button:hover i { - transform: translateX(3px) rotate(15deg); -} + .stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + } -/* Optional subtle floating accents for light theme */ -.newsletter::before, -.newsletter::after { - content: ""; - position: absolute; - border-radius: 50%; - background: rgba(212, 175, 55, 0.1); /* soft gold circles */ - width: 150px; - height: 150px; - z-index: 0; -} + .stat-card { + background: var(--warm-cream); + border-radius: 16px; + border: 2px solid var(--primary-gold); + /* Gold border */ + padding: 40px 20px; + box-shadow: var(--shadow-main); + transition: transform 0.5s var(--bounce-curve), box-shadow 0.3s ease, border-color 0.3s ease; + } -.newsletter::before { - top: -40px; - left: -40px; -} + .stat-card:hover { + transform: translateY(-12px); + box-shadow: var(--shadow-hover); + } -.newsletter::after { - bottom: -50px; - right: -50px; -} + .stat-icon { + font-size: 2.5rem; + color: var(--primary-gold); + margin-bottom: 1rem; + } -#scrollTopBtn { - position: fixed; - bottom: 2rem; - right: 2rem; - background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); - color: var(--deep-navy); - border: none; - border-radius: 50%; - width: 55px; - height: 55px; - font-size: 1.1rem; - cursor: pointer; - box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35); - display: none; - transition: transform 0.25s ease, box-shadow 0.25s ease; - z-index: 999; -} + .stat-card h2 { + font-size: 2rem; + color: var(--deep-navy); + margin-bottom: 0.5rem; + } -#scrollTopBtn:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-hover); -} + .stat-card p { + color: var(--text-secondary); + font-weight: 500; + } -/* ========================= - FADE-IN + /* ========================= + HOME SECTIONS ========================= */ -.fade-in { - opacity: 0; - transform: translateY(18px); - transition: opacity 0.6s ease, transform 0.6s ease; -} - -.fade-in.visible { - opacity: 1; - transform: translateY(0); -} - -/* ========================= - DARK MODE -body.dark-mode { - --warm-cream: #0d1117; - --light-parchment: #161b22; - --charcoal-dark: #f0f6fc; - --text-secondary: #8b949e; - --deep-navy: #ecf0f1; - background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); - color: var(--charcoal-dark); -} - -body.dark-mode .hero { - background: - radial-gradient(900px circle at 12% 20%, rgba(212, 175, 55, 0.16) 0%, transparent 55%), - radial-gradient(800px circle at 85% 15%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), - linear-gradient(135deg, rgba(13, 17, 23, 0.96) 0%, rgba(22, 27, 34, 0.96) 100%); -} - -body.dark-mode .hero-eyebrow, -body.dark-mode .hero-chip, -body.dark-mode .hero-float { - background: rgba(22, 27, 34, 0.78); - color: rgba(240, 246, 252, 0.92); - border-color: rgba(212, 175, 55, 0.22); -} - -body.dark-mode .hero h2 { - color: rgba(240, 246, 252, 0.98); -} - -body.dark-mode .hero p { - color: rgba(240, 246, 252, 0.78); -} - -body.dark-mode .hero-btn-secondary { - background: rgba(22, 27, 34, 0.78); - color: rgba(240, 246, 252, 0.92); -} - -/* ========================= - DARK MODE FIXES + main section { + padding: 5rem 6%; + max-width: 1400px; + margin: 0 auto; + } -/* Fix Navbar Background in Dark Mode */ -body.dark-mode .navbar, -body.dark-mode header { - background-color: #1a1a1a; - /* Dark Grey instead of White */ - border-bottom: 1px solid #333; -} + .programs { + background-color: var(--warm-cream); + padding: 100px 20px; + text-align: center; + } -/* Fix Navbar Links Color */ -body.dark-mode .nav-link, -body.dark-mode .navbar a { - color: #ffffff; - /* White text */ -} + .programs-header { + max-width: 750px; + margin: 0 auto 70px; + } -/* Fix Cards or Containers that remain white */ -body.dark-mode .card, -body.dark-mode .container-box { - background-color: #2d2d2d; - color: #e0e0e0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); - /* Darker shadow */ -} + .programs-eyebrow { + display: inline-block; + font-weight: 700; + color: var(--secondary-gold); + letter-spacing: 1.2px; + text-transform: uppercase; + font-size: 0.9rem; + margin-bottom: 0.5rem; + } -/* Fix Inputs and Forms */ -body.dark-mode input, -body.dark-mode textarea { - background-color: #333; - color: #fff; - border-color: #555; -} + .programs-header h3 { + font-size: 2.6rem; + color: var(--deep-navy); + margin-bottom: 1rem; + } + .programs-header p { + color: var(--text-secondary); + font-size: 1rem; + line-height: 1.6; + } -/* ========================= - SUCCESS STORIES SECTION -========================= */ -.success-stories { - padding: 6rem 6%; - max-width: 1400px; - margin: 0 auto; - background: - radial-gradient(1000px circle at 50% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 60%), - linear-gradient(135deg, rgba(255, 248, 231, 0.5) 0%, rgba(253, 244, 227, 0.5) 100%); - position: relative; - overflow: hidden; -} + .card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 35px; + } -.success-stories::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent 0%, - rgba(212, 175, 55, 0.3) 50%, - transparent 100%); -} + /* Program Card Styling */ + .program-card { + background: linear-gradient(145deg, var(--light-parchment), #fff8e7); + border-radius: 20px; + padding: 35px 25px; + box-shadow: var(--shadow-main); + transition: transform 0.6s var(--bounce-curve), box-shadow 0.4s ease, background 0.4s ease; + text-align: left; + position: relative; + overflow: hidden; + } -.success-stories-header { - text-align: center; - margin-bottom: 4rem; -} + /* Hover Effect */ + .program-card:hover { + transform: translateY(-12px) scale(1.03) rotateX(1.5deg); + box-shadow: var(--shadow-hover); + background: linear-gradient(145deg, var(--primary-gold), var(--secondary-gold)); + color: var(--warm-cream); + } -.section-eyebrow { - display: inline-flex; - align-items: center; - gap: 0.65rem; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 600; - font-size: 0.85rem; - letter-spacing: 0.12em; - text-transform: uppercase; - color: rgba(27, 38, 59, 0.82); - background: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(212, 175, 55, 0.25); - padding: 0.5rem 0.85rem; - border-radius: 999px; - box-shadow: var(--shadow-main); - margin-bottom: 1.5rem; -} + /* Icon */ + .program-icon { + font-size: 2.5rem; + color: var(--primary-gold); + margin-bottom: 1rem; + transition: transform 0.5s, color 0.4s; + } -.section-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); - box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); - animation: pulse 2s ease-in-out infinite; -} + .program-card:hover .program-icon { + color: var(--warm-cream); + transform: scale(1.4) rotate(10deg); + } -@keyframes pulse { + .program-card h4 { + font-size: 1.4rem; + color: var(--deep-navy); + margin-bottom: 0.6rem; + transition: color 0.4s; + } - 0%, - 100% { - box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); + .program-card:hover h4 { + color: var(--warm-cream); } - 50% { - box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.08); + .program-card p { + color: var(--text-secondary); + font-size: 0.95rem; + margin-bottom: 1rem; + transition: color 0.4s; } -} -.success-stories h3 { - font-family: "Playfair Display", serif; - font-size: clamp(2.2rem, 4.5vw, 3.2rem); - font-weight: 800; - color: var(--deep-navy); - margin-bottom: 1rem; - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; -} + .program-card:hover p { + color: var(--warm-cream); + } -.success-stories h3 i { - color: var(--primary-gold); - font-size: 0.9em; -} + /* Badge Styling */ + .program-card .badge { + display: inline-block; + padding: 5px 12px; + font-size: 0.8rem; + font-weight: 600; + border-radius: 12px; + background-color: var(--secondary-gold); + color: var(--warm-cream); + transition: background 0.4s; + } -.success-stories-subtitle { - font-size: 1.15rem; - color: var(--text-secondary); - max-width: 600px; - margin: 0 auto; - line-height: 1.6; -} + .program-card:hover .badge { + background-color: var(--warm-cream); + color: var(--deep-navy); + } -.success-stories-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - margin-bottom: 3.5rem; -} + .newsletter { + background: #f8fbff; + border: 1px solid #cbd5e1; + padding: 24px; + border-radius: 12px; + color: #0f172a; + width: 100%; + max-width: 100%; + padding: 80px 20px; + box-sizing: border-box; + background-color: #ffff; + /* Light cream base */ + padding: 80px 20px; + text-align: center; + color: var(--charcoal-dark); + /* Dark text for readability */ + position: relative; + overflow: hidden; + border-radius: 20px; + margin: 60px auto; + max-width: 900px; + box-shadow: var(--shadow-main); + transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; + } -.story-card { - background: rgba(255, 255, 255, 0.85); - border: 1px solid rgba(212, 175, 55, 0.2); - border-radius: 20px; - padding: 2rem; - box-shadow: - 0 10px 30px rgba(0, 0, 0, 0.08), - 0 1px 8px rgba(0, 0, 0, 0.06); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} + .newsletter:hover { + transform: translateY(-6px); + box-shadow: var(--shadow-hover); + background-color: #fff7e6; + /* slightly brighter on hover */ + } -.story-card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: linear-gradient(90deg, var(--primary-gold), var(--secondary-gold)); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.4s ease; -} + /* Headings */ + .newsletter h3 { + font-size: 2.2rem; + color: var(--secondary-gold); + /* keep gold as highlight */ + margin-bottom: 1rem; + } -.story-card:hover::before { - transform: scaleX(1); -} + .newsletter p { + font-size: 1rem; + color: var(--text-secondary); + margin-bottom: 2rem; + line-height: 1.6; + } -.story-card:hover { - transform: translateY(-8px); - box-shadow: - 0 20px 50px rgba(212, 175, 55, 0.25), - 0 5px 15px rgba(0, 0, 0, 0.1); - border-color: rgba(212, 175, 55, 0.4); -} + /* Form layout */ + .newsletter-form { + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + } -.story-header { - display: flex; - align-items: center; - gap: 1rem; - margin-bottom: 1.5rem; -} + .newsletter input { + flex: 1; + max-width: 320px; + padding: 1rem 1.8rem; + border: 2px solid rgba(255, 255, 255, 0.2); + border-radius: 50px; + background: rgba(255, 255, 255, 0.1); + color: white; + font-size: 0.98rem; + font-family: "Inter", -apple-system, sans-serif; + border: 2px solid #94a3b8; + background: #ffffff; + color: #0f172a; + } -.story-avatar { - position: relative; - width: 64px; - height: 64px; - flex-shrink: 0; -} + .newsletter input::placeholder { + color: #475569; + } -.story-avatar img { - width: 100%; - height: 100%; - border-radius: 50%; - border: 3px solid rgba(212, 175, 55, 0.3); - background: white; - object-fit: cover; -} + .newsletter-form input[type="email"] { + padding: 14px 20px; + border-radius: 12px; + border: 1px solid var(--primary-gold); + outline: none; + font-size: 1rem; + width: 280px; + max-width: 100%; + transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; + } -.story-badge { - position: absolute; - bottom: -4px; - right: -4px; - width: 28px; - height: 28px; - background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); - border-radius: 50%; - display: grid; - place-items: center; - border: 3px solid white; - box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); -} + .newsletter-form input[type="email"]:focus { + box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.3); + /* soft gold glow */ + transform: scale(1.02); + border-color: var(--secondary-gold); + } -.story-badge i { - color: var(--deep-navy); - font-size: 0.75rem; -} + /* Button */ + .newsletter-form button { + background: var(--primary-gold); + color: var(--light-parchment); + padding: 14px 30px; + font-size: 1rem; + border: none; + border-radius: 12px; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: 600; + transition: background 0.4s, transform 0.3s, box-shadow 0.3s; + } -.story-meta h4 { - font-family: "Inter", -apple-system, sans-serif; - font-size: 1.15rem; - font-weight: 700; - color: var(--deep-navy); - margin-bottom: 0.25rem; -} + .newsletter-form button:hover { + background: var(--secondary-gold); + transform: translateY(-3px) scale(1.05); + box-shadow: var(--shadow-hover); + } -.story-role { - font-family: "Inter", -apple-system, sans-serif; - font-size: 0.85rem; - font-weight: 600; - color: var(--primary-gold); - letter-spacing: 0.3px; -} + .newsletter-form button i { + transition: transform 0.3s; + } -.story-text { - font-size: 1rem; - line-height: 1.7; - color: var(--text-secondary); - margin-bottom: 1.5rem; - font-style: italic; - position: relative; - padding-left: 1rem; - border-left: 3px solid rgba(212, 175, 55, 0.3); -} + .newsletter-form button:hover i { + transform: translateX(3px) rotate(15deg); + } -.story-stats { - display: flex; - gap: 1.5rem; - padding-top: 1rem; - border-top: 1px solid rgba(212, 175, 55, 0.15); -} + /* Optional subtle floating accents for light theme */ + .newsletter::before, + .newsletter::after { + content: ""; + position: absolute; + border-radius: 50%; + background: rgba(212, 175, 55, 0.1); + /* soft gold circles */ + width: 150px; + height: 150px; + z-index: 0; + } -.story-stat { - display: flex; - align-items: center; - gap: 0.5rem; - font-family: "Inter", -apple-system, sans-serif; - font-size: 0.9rem; - font-weight: 600; - color: var(--deep-navy); -} + .newsletter::before { + top: -40px; + left: -40px; + } -.story-stat i { - color: var(--primary-gold); - font-size: 0.85rem; -} + .newsletter::after { + bottom: -50px; + right: -50px; + } -.success-stories-cta { - text-align: center; - padding: 3rem 2rem; - background: linear-gradient(135deg, - rgba(255, 255, 255, 0.6) 0%, - rgba(255, 248, 231, 0.6) 100%); - border: 2px dashed rgba(212, 175, 55, 0.3); - border-radius: 20px; - backdrop-filter: blur(10px); -} + #scrollTopBtn { + position: fixed; + bottom: 2rem; + right: 2rem; + background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); + color: var(--deep-navy); + border: none; + border-radius: 50%; + width: 55px; + height: 55px; + font-size: 1.1rem; + cursor: pointer; + box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35); + display: none; + transition: transform 0.25s ease, box-shadow 0.25s ease; + z-index: 999; + } -.success-stories-cta p { - font-family: "Playfair Display", serif; - font-size: 1.5rem; - font-weight: 700; - color: var(--deep-navy); - margin-bottom: 1.5rem; -} + #scrollTopBtn:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-hover); + } -.cta-button { - display: inline-flex; - align-items: center; - gap: 0.7rem; - background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); - color: var(--deep-navy); - border: none; - padding: 1.1rem 2.5rem; - border-radius: 999px; - font-family: "Inter", -apple-system, sans-serif; - font-weight: 700; - font-size: 1rem; - text-transform: uppercase; - letter-spacing: 0.5px; - cursor: pointer; - box-shadow: 0 14px 36px rgba(212, 175, 55, 0.35); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} + /* ========================= + FADE-IN +========================= */ + .fade-in { + opacity: 0; + transform: translateY(18px); + transition: opacity 0.6s ease, transform 0.6s ease; + } -.cta-button:hover { - transform: translateY(-3px); - box-shadow: 0 20px 50px rgba(212, 175, 55, 0.45); -} + .fade-in.visible { + opacity: 1; + transform: translateY(0); + } -.cta-button i { - font-size: 1.1rem; + /* ========================= + DARK MODE +body.dark-mode { + --warm-cream: #0d1117; + --light-parchment: #161b22; + --charcoal-dark: #f0f6fc; + --text-secondary: #8b949e; + --deep-navy: #ecf0f1; + background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); + color: var(--charcoal-dark); } -/* Dark Mode for Success Stories */ -body.dark-mode .success-stories { +body.dark-mode .hero { background: - radial-gradient(1000px circle at 50% 20%, rgba(212, 175, 55, 0.12) 0%, transparent 60%), - linear-gradient(135deg, rgba(13, 17, 23, 0.8) 0%, rgba(22, 27, 34, 0.8) 100%); + radial-gradient(900px circle at 12% 20%, rgba(212, 175, 55, 0.16) 0%, transparent 55%), + radial-gradient(800px circle at 85% 15%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), + linear-gradient(135deg, rgba(13, 17, 23, 0.96) 0%, rgba(22, 27, 34, 0.96) 100%); } -body.dark-mode .section-eyebrow { +body.dark-mode .hero-eyebrow, +body.dark-mode .hero-chip, +body.dark-mode .hero-float { background: rgba(22, 27, 34, 0.78); color: rgba(240, 246, 252, 0.92); - border-color: rgba(212, 175, 55, 0.3); + border-color: rgba(212, 175, 55, 0.22); } -body.dark-mode .success-stories h3 { +body.dark-mode .hero h2 { color: rgba(240, 246, 252, 0.98); } -body.dark-mode .success-stories-subtitle { +body.dark-mode .hero p { color: rgba(240, 246, 252, 0.78); } -body.dark-mode .story-card { - background: rgba(22, 27, 34, 0.85); - border-color: rgba(212, 175, 55, 0.25); - box-shadow: - 0 10px 30px rgba(0, 0, 0, 0.3), - 0 1px 8px rgba(0, 0, 0, 0.2); -} - -body.dark-mode .story-card:hover { - box-shadow: - 0 20px 50px rgba(212, 175, 55, 0.3), - 0 5px 15px rgba(0, 0, 0, 0.4); - border-color: rgba(212, 175, 55, 0.5); -} - -body.dark-mode .story-meta h4 { - color: rgba(240, 246, 252, 0.98); +body.dark-mode .hero-btn-secondary { + background: rgba(22, 27, 34, 0.78); + color: rgba(240, 246, 252, 0.92); } -body.dark-mode .story-text { - color: rgba(240, 246, 252, 0.75); - border-left-color: rgba(212, 175, 55, 0.4); -} +/* ========================= + DARK MODE FIXES -body.dark-mode .story-stat { - color: rgba(240, 246, 252, 0.9); -} +/* Fix Navbar Background in Dark Mode */ + body.dark-mode .navbar, + body.dark-mode header { + background-color: #1a1a1a; + /* Dark Grey instead of White */ + border-bottom: 1px solid #333; + } -body.dark-mode .story-stats { - border-top-color: rgba(212, 175, 55, 0.2); -} + /* Fix Navbar Links Color */ + body.dark-mode .nav-link, + body.dark-mode .navbar a { + color: #ffffff; + /* White text */ + } -body.dark-mode .success-stories-cta { - background: linear-gradient(135deg, - rgba(22, 27, 34, 0.6) 0%, - rgba(13, 17, 23, 0.6) 100%); - border-color: rgba(212, 175, 55, 0.4); -} + /* Fix Cards or Containers that remain white */ + body.dark-mode .card, + body.dark-mode .container-box { + background-color: #2d2d2d; + color: #e0e0e0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); + /* Darker shadow */ + } -body.dark-mode .success-stories-cta p { - color: rgba(240, 246, 252, 0.98); -} + /* Fix Inputs and Forms */ + body.dark-mode input, + body.dark-mode textarea { + background-color: #333; + color: #fff; + border-color: #555; + } -body.dark-mode .cta-button { - color: var(--deep-navy); -} -/* ========================= - RESPONSIVE + /* ========================= + SUCCESS STORIES SECTION ========================= */ -@media (max-width: 980px) { - .hero-inner { - grid-template-columns: 1fr; - gap: 2.25rem; + .success-stories { + padding: 5rem 6% 6rem; + max-width: 1400px; + margin: 0 auto; + background: + radial-gradient(1000px circle at 50% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 60%), + linear-gradient(135deg, rgba(255, 248, 231, 0.5) 0%, rgba(253, 244, 227, 0.5) 100%); + position: relative; + overflow: hidden; + } + + .success-stories::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent 0%, + rgba(212, 175, 55, 0.3) 50%, + transparent 100%); } - .hero-content { + .success-stories-header { text-align: center; - margin: 0 auto; + margin-bottom: 3.5rem; } - .hero h2::after { - margin-left: auto; - margin-right: auto; + .section-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.65rem; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 600; + font-size: 0.85rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(27, 38, 59, 0.82); + background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); + border: 1px solid rgba(212, 175, 55, 0.3); + padding: 0.55rem 1rem; + border-radius: 999px; + box-shadow: 0 2px 8px rgba(212, 175, 55, 0.15); + margin-bottom: 1.25rem; } - .hero-actions { - justify-content: center; + .section-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); + box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); + animation: pulse 2s ease-in-out infinite; + } + + @keyframes pulse { + + 0%, + 100% { + box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); + } + + 50% { + box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.08); + } } - .hero-chips { + .success-stories h3 { + font-family: "Playfair Display", serif; + font-size: clamp(2.2rem, 4.5vw, 3.2rem); + font-weight: 800; + color: var(--deep-navy); + margin-bottom: 1rem; + display: flex; + align-items: center; justify-content: center; + gap: 1rem; } - .hero-visual { - min-height: 320px; + .success-stories h3 i { + color: var(--primary-gold); + font-size: 0.9em; } - .hero-orb { - position: relative; - right: auto; - top: auto; + .success-stories-subtitle { + font-size: 1.15rem; + color: var(--text-secondary); + max-width: 600px; margin: 0 auto; + line-height: 1.6; } - .hero-route { - left: 50%; - transform: translateX(-50%); + .success-stories-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-bottom: 3.5rem; + max-width: 1200px; + margin-left: auto; + margin-right: auto; } -} -@media (max-width: 720px) { - main section { - padding: 4rem 6%; + .story-card { + background: rgba(255, 255, 255, 0.95); + border: 1px solid rgba(212, 175, 55, 0.2); + border-radius: 16px; + padding: 1.75rem; + box-shadow: + 0 8px 24px rgba(0, 0, 0, 0.06), + 0 1px 6px rgba(0, 0, 0, 0.04); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); + height: 100%; + display: flex; + flex-direction: column; } - .newsletter form { - flex-direction: column; - align-items: stretch; + .story-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--primary-gold), var(--secondary-gold)); + transform: scaleX(0); + transform-origin: left; + transition: transform 0.4s ease; } - .newsletter input { - max-width: none; + .story-card:hover::before { + transform: scaleX(1); } - /* Success Stories Responsive */ - .success-stories { - padding: 4rem 5%; + .story-card:hover { + transform: translateY(-6px); + box-shadow: + 0 16px 40px rgba(212, 175, 55, 0.2), + 0 4px 12px rgba(0, 0, 0, 0.08); + border-color: rgba(212, 175, 55, 0.4); } - .success-stories-header { - margin-bottom: 3rem; + .story-header { + display: flex; + align-items: center; + gap: 0.85rem; + margin-bottom: 1.25rem; } - .success-stories-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - margin-bottom: 2.5rem; + .story-avatar { + position: relative; + width: 50px; + height: 50px; + flex-shrink: 0; } - .story-card { - padding: 1.5rem; + .story-avatar img { + width: 100%; + height: 100%; + border-radius: 50%; + border: 3px solid rgba(212, 175, 55, 0.3); + background: white; + object-fit: cover; } - .story-header { - gap: 0.75rem; + .story-badge { + position: absolute; + bottom: -3px; + right: -3px; + width: 22px; + height: 22px; + background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); + border-radius: 50%; + display: grid; + place-items: center; + border: 2.5px solid white; + box-shadow: 0 3px 10px rgba(212, 175, 55, 0.4); } - .story-avatar { - width: 56px; - height: 56px; + .story-badge i { + color: var(--deep-navy); + font-size: 0.65rem; } .story-meta h4 { + font-family: "Inter", -apple-system, sans-serif; font-size: 1.05rem; + font-weight: 700; + color: var(--deep-navy); + margin-bottom: 0.2rem; + line-height: 1.3; } .story-role { - font-size: 0.8rem; + font-family: "Inter", -apple-system, sans-serif; + font-size: 0.85rem; + font-weight: 600; + color: var(--primary-gold); + letter-spacing: 0.3px; } .story-text { font-size: 0.95rem; + line-height: 1.65; + color: var(--text-secondary); + margin-bottom: 1.25rem; + font-style: italic; + position: relative; + padding-left: 1rem; + border-left: 3px solid rgba(212, 175, 55, 0.3); + flex-grow: 1; } .story-stats { - gap: 1rem; + display: flex; + gap: 1.5rem; + padding-top: 1rem; + border-top: 1px solid rgba(212, 175, 55, 0.15); + } + + .story-stat { + display: flex; + align-items: center; + gap: 0.5rem; + font-family: "Inter", -apple-system, sans-serif; + font-size: 0.9rem; + font-weight: 600; + color: var(--deep-navy); + } + + .story-stat i { + color: var(--primary-gold); + font-size: 0.85rem; } .success-stories-cta { - padding: 2rem 1.5rem; + text-align: center; + padding: 3rem 2rem; + background: linear-gradient(135deg, + rgba(255, 255, 255, 0.6) 0%, + rgba(255, 248, 231, 0.6) 100%); + border: 2px dashed rgba(212, 175, 55, 0.3); + border-radius: 20px; + backdrop-filter: blur(10px); } .success-stories-cta p { - font-size: 1.25rem; + font-family: "Playfair Display", serif; + font-size: 1.5rem; + font-weight: 700; + color: var(--deep-navy); + margin-bottom: 1.5rem; } .cta-button { - padding: 1rem 2rem; - font-size: 0.9rem; + display: inline-flex; + align-items: center; + gap: 0.7rem; + background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)); + color: var(--deep-navy); + border: none; + padding: 1.1rem 2.5rem; + border-radius: 999px; + font-family: "Inter", -apple-system, sans-serif; + font-weight: 700; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: pointer; + box-shadow: 0 14px 36px rgba(212, 175, 55, 0.35); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } -} -@media (prefers-reduced-motion: reduce) { + .cta-button:hover { + transform: translateY(-3px); + box-shadow: 0 20px 50px rgba(212, 175, 55, 0.45); + } - .hero-orb, - .hero-orb-ring, - .hero-orb-needle, - .hero-route-path, - .hero-float { - animation: none !important; + .cta-button i { + font-size: 1.1rem; } - .fade-in { - transition: none; + /* Dark Mode for Success Stories */ + body.dark-mode .success-stories { + background: + radial-gradient(1000px circle at 50% 20%, rgba(212, 175, 55, 0.12) 0%, transparent 60%), + linear-gradient(135deg, rgba(13, 17, 23, 0.8) 0%, rgba(22, 27, 34, 0.8) 100%); + } + + body.dark-mode .section-eyebrow { + background: rgba(22, 27, 34, 0.78); + color: rgba(240, 246, 252, 0.92); + border-color: rgba(212, 175, 55, 0.3); + } + + body.dark-mode .success-stories h3 { + color: rgba(240, 246, 252, 0.98); + } + + body.dark-mode .success-stories-subtitle { + color: rgba(240, 246, 252, 0.78); + } + + body.dark-mode .story-card { + background: rgba(22, 27, 34, 0.85); + border-color: rgba(212, 175, 55, 0.25); + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.3), + 0 1px 8px rgba(0, 0, 0, 0.2); + } + + body.dark-mode .story-card:hover { + box-shadow: + 0 20px 50px rgba(212, 175, 55, 0.3), + 0 5px 15px rgba(0, 0, 0, 0.4); + border-color: rgba(212, 175, 55, 0.5); + } + + body.dark-mode .story-meta h4 { + color: rgba(240, 246, 252, 0.98); + } + + body.dark-mode .story-text { + color: rgba(240, 246, 252, 0.75); + border-left-color: rgba(212, 175, 55, 0.4); + } + + body.dark-mode .story-stat { + color: rgba(240, 246, 252, 0.9); + } + + body.dark-mode .story-stats { + border-top-color: rgba(212, 175, 55, 0.2); + } + + body.dark-mode .success-stories-cta { + background: linear-gradient(135deg, + rgba(22, 27, 34, 0.6) 0%, + rgba(13, 17, 23, 0.6) 100%); + border-color: rgba(212, 175, 55, 0.4); + } + + body.dark-mode .success-stories-cta p { + color: rgba(240, 246, 252, 0.98); + } + + body.dark-mode .cta-button { + color: var(--deep-navy); + } + + /* ========================= + RESPONSIVE +========================= */ + @media (max-width: 980px) { + .hero-inner { + grid-template-columns: 1fr; + gap: 2.25rem; + } + + .hero-content { + text-align: center; + margin: 0 auto; + } + + .hero h2::after { + margin-left: auto; + margin-right: auto; + } + + .hero-actions { + justify-content: center; + } + + .hero-chips { + justify-content: center; + } + + .hero-visual { + min-height: 320px; + } + + .hero-orb { + position: relative; + right: auto; + top: auto; + margin: 0 auto; + } + + .hero-route { + left: 50%; + transform: translateX(-50%); + } + } + + @media (max-width: 720px) { + main section { + padding: 4rem 6%; + } + + .newsletter form { + flex-direction: column; + align-items: stretch; + } + + .newsletter input { + max-width: none; + } + + /* Success Stories Responsive */ + .success-stories { + padding: 4rem 5%; + } + + .success-stories-header { + margin-bottom: 3rem; + } + + .success-stories-grid { + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + margin-bottom: 2.5rem; + } + + @media (max-width: 640px) { + .success-stories-grid { + grid-template-columns: 1fr; + } + } + + .story-card { + padding: 1.5rem; + } + + .story-header { + gap: 0.75rem; + } + + .story-avatar { + width: 45px; + height: 45px; + } + + .story-meta h4 { + font-size: 1.05rem; + } + + .story-role { + font-size: 0.8rem; + } + + .story-text { + font-size: 0.95rem; + } + + .story-stats { + gap: 1rem; + } + + .success-stories-cta { + padding: 2rem 1.5rem; + } + + .success-stories-cta p { + font-size: 1.25rem; + } + + .cta-button { + padding: 1rem 2rem; + font-size: 0.9rem; + } + } + + @media (prefers-reduced-motion: reduce) { + + .hero-orb, + .hero-orb-ring, + .hero-orb-needle, + .hero-route-path, + .hero-float { + animation: none !important; + } + + .fade-in { + transition: none; + } } -} } body.dark-mode .hero { @@ -1364,20 +1463,16 @@ body.dark-mode .hero { body.dark-mode .hero::before { background: - repeating-linear-gradient( - 90deg, + repeating-linear-gradient(90deg, rgba(228, 199, 106, 0.08) 0, rgba(228, 199, 106, 0.08) 1px, transparent 1px, - transparent 26px - ), - repeating-linear-gradient( - 0deg, + transparent 26px), + repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, - transparent 26px - ); + transparent 26px); opacity: 0.35; } @@ -1388,6 +1483,7 @@ body.dark-mode .hero h2 { body.dark-mode .hero p { color: var(--text-secondary); } + body.dark-mode .hero-eyebrow, body.dark-mode .hero-chip, body.dark-mode .hero-float { @@ -1396,19 +1492,19 @@ body.dark-mode .hero-float { border: 1px solid rgba(228, 199, 106, 0.25); backdrop-filter: blur(14px); } + body.dark-mode .hero-orb { - background: radial-gradient( - circle at 35% 30%, - rgba(255, 255, 255, 0.12) 0%, - rgba(27, 34, 53, 0.95) 55%, - rgba(228, 199, 106, 0.18) 100% - ); + background: radial-gradient(circle at 35% 30%, + rgba(255, 255, 255, 0.12) 0%, + rgba(27, 34, 53, 0.95) 55%, + rgba(228, 199, 106, 0.18) 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); } body.dark-mode .hero-orb-core { background: linear-gradient(135deg, #070b14, #0f172a); } + body.dark-mode .compass-content h4 { color: var(--text-primary); } @@ -1416,38 +1512,35 @@ body.dark-mode .compass-content h4 { body.dark-mode .compass-content p { color: var(--text-secondary); } + body.dark-mode .stats { position: relative; background: - radial-gradient( - 900px circle at 50% -20%, + radial-gradient(900px circle at 50% -20%, rgba(228, 199, 106, 0.12), - transparent 60% - ), + transparent 60%), linear-gradient(180deg, #0b1220 0%, #0f172a 100%); overflow: hidden; } + body.dark-mode .stats::before { content: ""; position: absolute; inset: 0; background: - repeating-linear-gradient( - 90deg, + repeating-linear-gradient(90deg, rgba(228, 199, 106, 0.06) 0, rgba(228, 199, 106, 0.06) 1px, transparent 1px, - transparent 32px - ); + transparent 32px); opacity: 0.25; pointer-events: none; } + body.dark-mode .stat-card { - background: linear-gradient( - 145deg, - rgba(20, 26, 43, 0.95), - rgba(27, 34, 53, 0.95) - ); + background: linear-gradient(145deg, + rgba(20, 26, 43, 0.95), + rgba(27, 34, 53, 0.95)); border: 1px solid rgba(228, 199, 106, 0.35); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85), @@ -1456,26 +1549,27 @@ body.dark-mode .stat-card { position: relative; overflow: hidden; } + body.dark-mode .stat-card::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.06), - transparent 40%, - transparent 70%, - rgba(228, 199, 106, 0.08) - ); + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.06), + transparent 40%, + transparent 70%, + rgba(228, 199, 106, 0.08)); pointer-events: none; } + body.dark-mode .stat-card:hover { transform: translateY(-12px) scale(1.04); box-shadow: 0 38px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(228, 199, 106, 0.6); } + body.dark-mode .stat-card h2 { color: #ffffff; font-weight: 800; @@ -1484,10 +1578,12 @@ body.dark-mode .stat-card h2 { 0 0 16px rgba(228, 199, 106, 0.25), 0 0 28px rgba(228, 199, 106, 0.12); } + body.dark-mode .stat-card p { color: var(--text-secondary); font-weight: 500; } + body.dark-mode .stat-icon { color: var(--primary-gold); filter: drop-shadow(0 6px 18px rgba(228, 199, 106, 0.35)); @@ -1504,35 +1600,35 @@ body.dark-mode .program-card h4 { body.dark-mode .program-card p { color: var(--text-secondary); } + body.dark-mode .program-card:hover { - background: linear-gradient( - 145deg, - var(--primary-gold), - var(--secondary-gold) - ); + background: linear-gradient(145deg, + var(--primary-gold), + var(--secondary-gold)); transform: translateY(-14px) scale(1.05) rotateX(2deg); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(228, 199, 106, 0.65), 0 0 40px rgba(228, 199, 106, 0.45); } + body.dark-mode .program-card:hover::before { content: ""; position: absolute; inset: 0; - background: linear-gradient( - 120deg, - transparent 30%, - rgba(255, 255, 255, 0.22), - transparent 70% - ); + background: linear-gradient(120deg, + transparent 30%, + rgba(255, 255, 255, 0.22), + transparent 70%); opacity: 0.35; pointer-events: none; } + body.dark-mode .program-card:hover h4, body.dark-mode .program-card:hover p { color: #0b1220; } + body.dark-mode .program-card:hover .program-icon { color: #0b1220; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); @@ -1542,37 +1638,34 @@ body.dark-mode .program-card:hover .badge { background: rgba(11, 18, 32, 0.9); color: var(--primary-gold); } + body.dark-mode .newsletter { background: - radial-gradient( - 600px circle at 50% -30%, + radial-gradient(600px circle at 50% -30%, rgba(228, 199, 106, 0.15), - transparent 60% - ), - linear-gradient( - 180deg, + transparent 60%), + linear-gradient(180deg, rgba(28, 38, 66, 0.918), - rgba(30, 38, 59, 0.932) - ); + rgba(30, 38, 59, 0.932)); color: var(--text-primary); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.05); backdrop-filter: blur(14px); } + body.dark-mode .newsletter:hover { transform: translateY(-8px); box-shadow: 0 45px 110px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(228, 199, 106, 0.55); } + body.dark-mode .newsletter h3 { - background: linear-gradient( - 135deg, - #ffffff 0%, - var(--primary-gold) 60%, - var(--secondary-gold) 100% - ); + background: linear-gradient(135deg, + #ffffff 0%, + var(--primary-gold) 60%, + var(--secondary-gold) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -1580,9 +1673,11 @@ body.dark-mode .newsletter h3 { 0 0 18px rgba(228, 199, 106, 0.25), 0 0 32px rgba(228, 199, 106, 0.12); } + body.dark-mode .newsletter p { color: var(--text-secondary); } + body.dark-mode .newsletter-form input[type="email"] { background: rgba(15, 23, 42, 0.9); color: var(--text-primary); @@ -1595,12 +1690,11 @@ body.dark-mode .newsletter-form input[type="email"]:focus { 0 0 0 4px rgba(228, 199, 106, 0.35), inset 0 0 0 1px rgba(228, 199, 106, 0.45); } + body.dark-mode .newsletter-form button { - background: linear-gradient( - 135deg, - var(--primary-gold), - var(--secondary-gold) - ); + background: linear-gradient(135deg, + var(--primary-gold), + var(--secondary-gold)); color: #0b1220; box-shadow: 0 18px 45px rgba(228, 199, 106, 0.45); @@ -1611,13 +1705,12 @@ body.dark-mode .newsletter-form button:hover { box-shadow: 0 28px 70px rgba(228, 199, 106, 0.65); } + body.dark-mode .newsletter::before, body.dark-mode .newsletter::after { - background: radial-gradient( - circle, - rgba(228, 199, 106, 0.18), - transparent 70% - ); + background: radial-gradient(circle, + rgba(228, 199, 106, 0.18), + transparent 70%); opacity: 0.6; } @@ -1625,16 +1718,80 @@ body.dark-mode b, body.dark-mode strong { color: #ffffff; } + body.dark-mode section h3 { - background: linear-gradient( - 135deg, - #ffffff 0%, - var(--primary-gold) 55%, - var(--secondary-gold) 100% - ); + 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; font-weight: 800; letter-spacing: -0.015em; } + +/* ========================= + SUCCESS STORIES +========================= */ +.success-stories-grid { + display: grid; + grid-template-columns: repeat(3, 1fr) !important; + gap: 2.5rem; + max-width: 1200px; + margin: 3rem auto; + padding: 0 1rem; +} + +@media (max-width: 900px) { + .success-stories-grid { + grid-template-columns: repeat(2, 1fr) !important; + } +} + +@media (max-width: 600px) { + .success-stories-grid { + grid-template-columns: 1fr !important; + } +} + +.story-card { + background: #ffffff; + border: 1px solid #e2d1a8; + border-radius: 20px; + padding: 30px; + display: flex; + flex-direction: column; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} + +.story-card:hover { + transform: translateY(-5px); + border-color: #b59d5c; +} + +/* ========================= + VIDEO SECTION +========================= */ +.video-wrapper { + position: relative; + padding-bottom: 56.25%; + /* 16:9 Aspect Ratio */ + height: 0; + overflow: hidden; + max-width: 900px; + margin: 2rem auto; + border-radius: 20px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); + background: #000; +} + +.video-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} \ No newline at end of file diff --git a/frontend/gitignore b/frontend/gitignore index 40b878db..c2658d7d 100644 --- a/frontend/gitignore +++ b/frontend/gitignore @@ -1 +1 @@ -node_modules/ \ No newline at end of file +node_modules/ diff --git a/frontend/pages/Event/linux.html b/frontend/pages/Event/linux.html index 46cca6e4..0de3a967 100644 --- a/frontend/pages/Event/linux.html +++ b/frontend/pages/Event/linux.html @@ -1,11 +1,13 @@ + Linux Foundation Mentorship - OpenSource Compass - + @@ -203,7 +205,7 @@ left: -120%; width: 100%; height: 100%; - background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); + background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: skewX(-20deg); transition: transform 0.45s ease; } @@ -370,9 +372,17 @@ opacity: 1; } - .track-card:nth-child(1) { animation-delay: 0.1s; } - .track-card:nth-child(2) { animation-delay: 0.2s; } - .track-card:nth-child(3) { animation-delay: 0.3s; } + .track-card:nth-child(1) { + animation-delay: 0.1s; + } + + .track-card:nth-child(2) { + animation-delay: 0.2s; + } + + .track-card:nth-child(3) { + animation-delay: 0.3s; + } .track-card::before { content: ''; @@ -527,12 +537,29 @@ overflow: hidden; } - .benefit-card:nth-child(1) { animation-delay: 0.1s; } - .benefit-card:nth-child(2) { animation-delay: 0.2s; } - .benefit-card:nth-child(3) { animation-delay: 0.3s; } - .benefit-card:nth-child(4) { animation-delay: 0.4s; } - .benefit-card:nth-child(5) { animation-delay: 0.5s; } - .benefit-card:nth-child(6) { animation-delay: 0.6s; } + .benefit-card:nth-child(1) { + animation-delay: 0.1s; + } + + .benefit-card:nth-child(2) { + animation-delay: 0.2s; + } + + .benefit-card:nth-child(3) { + animation-delay: 0.3s; + } + + .benefit-card:nth-child(4) { + animation-delay: 0.4s; + } + + .benefit-card:nth-child(5) { + animation-delay: 0.5s; + } + + .benefit-card:nth-child(6) { + animation-delay: 0.6s; + } .benefit-card:hover { background-color: rgba(255, 255, 255, 1); @@ -545,7 +572,7 @@ content: ''; position: absolute; inset: 0; - background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,255,255,0)); + background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 255, 255, 0)); opacity: 0; transition: opacity 0.35s ease; } @@ -714,7 +741,7 @@ .step-content { flex: 1; - background: linear-gradient(135deg, rgba(77,150,255,0.1), rgba(60,207,145,0.08)); + background: linear-gradient(135deg, rgba(77, 150, 255, 0.1), rgba(60, 207, 145, 0.08)); padding: 28px; border-radius: 12px; border-left: 4px solid var(--secondary-blue); @@ -722,10 +749,21 @@ animation: fadeInLeft 0.6s ease-out both; } - .process-step:nth-child(1) .step-content { animation-delay: 0.1s; } - .process-step:nth-child(2) .step-content { animation-delay: 0.2s; } - .process-step:nth-child(3) .step-content { animation-delay: 0.3s; } - .process-step:nth-child(4) .step-content { animation-delay: 0.4s; } + .process-step:nth-child(1) .step-content { + animation-delay: 0.1s; + } + + .process-step:nth-child(2) .step-content { + animation-delay: 0.2s; + } + + .process-step:nth-child(3) .step-content { + animation-delay: 0.3s; + } + + .process-step:nth-child(4) .step-content { + animation-delay: 0.4s; + } .step-content:hover { transform: translateX(10px) scale(1.01); @@ -913,6 +951,7 @@ opacity: 0; transform: translateY(30px); } + to { opacity: 1; transform: translateY(0); @@ -924,6 +963,7 @@ opacity: 0; transform: translateX(-30px); } + to { opacity: 1; transform: translateX(0); @@ -935,6 +975,7 @@ opacity: 0; transform: scale(0.9); } + to { opacity: 1; transform: scale(1); @@ -966,6 +1007,19 @@ outline: 3px solid var(--secondary-blue); outline-offset: 2px; } + + /* Scroll Animation Classes */ + .scroll-animate { + opacity: 0; + transform: translateY(30px) scale(0.95); + transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); + will-change: opacity, transform; + } + + .scroll-animate.visible { + opacity: 1; + transform: translateY(0) scale(1); + } @@ -988,10 +1042,13 @@

Linux Foundation Mentorship Program

Industry-backed program for open-source development

- The Linux Foundation Mentorship Program (LFX Mentorship) offers paid, structured mentorship opportunities for developers to work on cutting-edge open source projects. Work with industry leaders on projects like Kubernetes, CNCF, and other Linux Foundation initiatives. + The Linux Foundation Mentorship Program (LFX Mentorship) offers paid, structured mentorship + opportunities for developers to work on cutting-edge open source projects. Work with + industry leaders on projects like Kubernetes, CNCF, and other Linux Foundation initiatives.

- + Official LFX Portal @@ -1003,7 +1060,9 @@

Linux Foundation Mentorship Program

About the Program

- The Linux Foundation Mentorship Program connects aspiring developers with experienced mentors to work on real-world open source projects. This program runs year-round with different terms (Spring, Summer, Fall), providing flexible opportunities for contributors worldwide. + The Linux Foundation Mentorship Program connects aspiring developers with experienced mentors to work on + real-world open source projects. This program runs year-round with different terms (Spring, Summer, Fall), + providing flexible opportunities for contributors worldwide.

@@ -1017,7 +1076,8 @@

Mentorship Tracks

Kernel Development

-

Work on the Linux kernel, the core of the operating system. Contribute to device drivers, file systems, networking stack, and core kernel features.

+

Work on the Linux kernel, the core of the operating system. Contribute to device drivers, file + systems, networking stack, and core kernel features.