diff --git a/I18N_README.md b/I18N_README.md
new file mode 100644
index 0000000..0ffd35f
--- /dev/null
+++ b/I18N_README.md
@@ -0,0 +1,134 @@
+# Система Интернационализации (i18n) для ExamPass
+
+## Обзор
+
+Система интернационализации позволяет переключаться между русским и английским языками на сайте ExamPass. Система автоматически сохраняет выбранный язык в localStorage и восстанавливает его при следующем посещении.
+
+## Структура файлов
+
+```
+src/js/
+├── translations.js # Файл с переводами
+├── i18n.js # Основная логика интернационализации
+└── main.js # Основной JavaScript файл (обновлен)
+```
+
+## Как это работает
+
+### 1. Файл переводов (`translations.js`)
+
+Содержит объект `translations` с переводами для всех поддерживаемых языков:
+
+```javascript
+const translations = {
+ en: {
+ nav_about: "About",
+ hero_title_line1: "PASS ANY EXAM",
+ // ... другие переводы
+ },
+ ru: {
+ nav_about: "О нас",
+ hero_title_line1: "СДАЙ ЛЮБОЙ ЭКЗАМЕН",
+ // ... другие переводы
+ }
+};
+```
+
+### 2. Основная логика (`i18n.js`)
+
+Класс `I18n` управляет:
+- Переключением языков
+- Сохранением выбранного языка
+- Обновлением контента на странице
+- Обновлением мета-тегов
+
+### 3. HTML разметка
+
+Элементы, которые нужно переводить, помечаются атрибутом `data-i18n`:
+
+```html
+About
+PASS ANY EXAM
+```
+
+## Использование
+
+### Переключение языков
+
+Пользователи могут переключать язык, нажимая на кнопки "EN" или "RU" в навигации:
+
+```html
+
+```
+
+### Добавление новых переводов
+
+1. Добавьте новый ключ в объект `translations` в файле `translations.js`:
+
+```javascript
+const translations = {
+ en: {
+ new_key: "English text",
+ // ...
+ },
+ ru: {
+ new_key: "Русский текст",
+ // ...
+ }
+};
+```
+
+2. Добавьте атрибут `data-i18n` к HTML элементу:
+
+```html
+Default text
+```
+
+### Специальные случаи
+
+#### Сложные элементы
+
+Для элементов с HTML разметкой внутри (например, с `` тегами) используется специальная обработка в методе `translateComplexElements()`.
+
+#### Плейсхолдеры для input полей
+
+Для input полей перевод применяется к атрибуту `placeholder`:
+
+```html
+
+
+
+
+ https://exampass.com/
+ 2025-01-03
+ weekly
+ 1.0
+
+
+
+
+ https://exampass.com/ru/
+ 2025-01-03
+ weekly
+ 0.9
+
+
+
+
+ https://exampass.com/#about
+ 2025-01-03
+ monthly
+ 0.8
+
+
+
+
+ https://exampass.com/#methodology
+ 2025-01-03
+ monthly
+ 0.8
+
+
+
+
+ https://exampass.com/#contact
+ 2025-01-03
+ monthly
+ 0.7
+
+
+
+
+ https://exampass.com/#success
+ 2025-01-03
+ weekly
+ 0.8
+
+
+
\ No newline at end of file
diff --git a/src/assets/logo/ExamPasss_logo_transparent_trimmed.png b/src/assets/logo/ExamPasss_logo_transparent_trimmed.png
new file mode 100644
index 0000000..138af3a
Binary files /dev/null and b/src/assets/logo/ExamPasss_logo_transparent_trimmed.png differ
diff --git a/src/css/style.css b/src/css/style.css
index 3a325fa..5bdfad2 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -14,7 +14,65 @@
--transition: all 0.3s ease;
--shadow: 0 0px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-
+}
+
+/* Performance Optimizations */
+* {
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ will-change: scroll-position;
+}
+
+/* Custom Scrollbar Styles */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(31, 41, 55, 0.05);
+ border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+ border-radius: 10px;
+ transition: all 0.3s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
+ transform: scale(1.1);
+}
+
+::-webkit-scrollbar-thumb:active {
+ background: var(--primary-color);
+}
+
+/* Firefox scrollbar */
+html {
+ scrollbar-width: thin;
+ scrollbar-color: var(--primary-color) rgba(31, 41, 55, 0.05);
+}
+
+/* GPU Acceleration for animations */
+.animate-slide-up,
+.floating-shapes .shape,
+.contact-floating-shapes .contact-shape,
+.carousel-slide,
+.stat-card,
+.success-card {
+ transform: translateZ(0);
+ backface-visibility: hidden;
+ perspective: 1000px;
}
/* Base Animations */
@@ -45,6 +103,18 @@
50% { transform: translateY(-10px); }
}
+@keyframes shapeBob {
+ 0%, 100% {
+ transform: translateY(0) scale(1);
+ }
+ 25% {
+ transform: translateY(-10px) scale(1.05);
+ }
+ 75% {
+ transform: translateY(10px) scale(0.95);
+ }
+}
+
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
@@ -140,11 +210,30 @@ body {
text-decoration: none;
display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: 0.7rem;
position: relative;
transition: all 0.3s ease;
}
+.logo-image {
+ width: 40px;
+ height: 40px;
+ object-fit: contain;
+ transition: all 0.3s ease;
+ filter: drop-shadow(0 2px 4px rgba(79, 70, 229, 0.2));
+}
+
+.logo:hover .logo-image {
+ transform: scale(1.05);
+ filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.3));
+}
+
+.logo-text {
+ font-size: 1.6rem;
+ font-weight: 800;
+ color: var(--text-color);
+}
+
.logo::before {
content: '';
position: absolute;
@@ -162,7 +251,7 @@ body {
opacity: 1;
}
-.logo span {
+.logo-text span {
background: var(--gradient-1);
-webkit-background-clip: text;
background-clip: text;
@@ -362,7 +451,7 @@ body {
height: 300px;
top: -150px;
right: -150px;
- animation: float 15s infinite;
+ animation: float 15s infinite, shapeBob 8s ease-in-out infinite;
}
.shape2 {
@@ -370,7 +459,7 @@ body {
height: 200px;
bottom: -100px;
left: -100px;
- animation: float 20s infinite;
+ animation: float 20s infinite, shapeBob 10s ease-in-out infinite;
}
.shape3 {
@@ -378,7 +467,7 @@ body {
height: 150px;
top: 50%;
right: 15%;
- animation: float 18s infinite;
+ animation: float 18s infinite, shapeBob 12s ease-in-out infinite;
}
.hero-content {
@@ -418,8 +507,8 @@ body {
display: inline-flex;
align-items: center;
gap: 0.5rem;
- padding: 0.5rem 1.5rem;
- font-size: 120%;
+ padding: 0.4rem 1.2rem;
+ font-size: 110%;
font-weight: 900;
text-decoration: none;
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
@@ -428,7 +517,8 @@ body {
backdrop-filter: blur(5px);
transition: all 0.3s ease;
cursor: pointer;
- overflow: hidden;
+ overflow: visible;
+ z-index: 1;
}
.click-text {
@@ -440,17 +530,7 @@ body {
z-index: 2;
}
-.click-icon {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- color: #fff;
- position: relative;
- z-index: 2;
- transition: transform 0.3s ease;
-}
+
.click-button::before {
content: '';
@@ -462,7 +542,8 @@ body {
background: var(--gradient-1);
opacity: 0;
transition: opacity 0.3s ease;
- z-index: 1;
+ z-index: -1;
+ border-radius: 50px;
}
.click-button:hover {
@@ -475,26 +556,57 @@ body {
opacity: 1;
}
-.click-button:hover .click-icon {
- animation: bounceDown 1s infinite;
-}
-@keyframes bounceDown {
- 0%, 20%, 50%, 80%, 100% {
- transform: translateY(0);
- }
- 40% {
- transform: translateY(8px);
- }
- 60% {
- transform: translateY(4px);
- }
-}
.click-button:active {
transform: translateY(4px);
}
+/* Эффект кругов при клике на кнопку */
+.click-ripple {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
+ z-index: -2;
+ overflow: visible;
+}
+
+.ripple-circle {
+ position: absolute;
+ border: 4px solid rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ animation: bigRippleEffect 1s ease-out forwards;
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+ --final-size: 300px; /* Размер по умолчанию */
+}
+
+@keyframes bigRippleEffect {
+ 0% {
+ width: 100px;
+ height: 100px;
+ opacity: 1;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0.5);
+ }
+ 50% {
+ opacity: 0.8;
+ transform: translate(-50%, -50%) scale(0.8);
+ }
+ 100% {
+ width: var(--final-size);
+ height: var(--final-size);
+ opacity: 0;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(1);
+ }
+}
+
+
+
.click-effect {
position: relative;
font-size: 120%;
@@ -672,10 +784,31 @@ body {
@keyframes wave {
0% {
- transform: translateX(0);
+ transform: translateX(0) translateY(0);
+ }
+ 25% {
+ transform: translateX(16.67%) translateY(-8px);
}
50% {
- transform: translateX(33.33%);
+ transform: translateX(33.33%) translateY(0);
+ }
+ 75% {
+ transform: translateX(16.67%) translateY(8px);
+ }
+ 100% {
+ transform: translateX(0) translateY(0);
+ }
+}
+
+@keyframes waveFloat {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 25% {
+ transform: translateY(-8px);
+ }
+ 75% {
+ transform: translateY(8px);
}
}
@@ -688,6 +821,17 @@ body {
}
}
+@keyframes slideDown {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
/* About Section */
.about-section {
background: var(--white);
@@ -1501,6 +1645,36 @@ body {
gap: 4rem;
}
+.footer-info p {
+ margin: 1rem 0 1.5rem;
+ line-height: 1.6;
+ color: var(--text-light);
+}
+
+.footer-social {
+ display: flex;
+ gap: 1rem;
+}
+
+.footer-social a {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(139, 92, 246, 0.1);
+ color: var(--primary-color);
+ transition: all 0.3s ease;
+ text-decoration: none;
+}
+
+.footer-social a:hover {
+ background: var(--primary-color);
+ color: var(--white);
+ transform: translateY(-2px);
+}
+
.footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
@@ -1572,6 +1746,7 @@ body {
}
@media (max-width: 768px) {
+ /* Улучшенная мобильная навигация */
.nav-toggle {
display: block;
}
@@ -1582,54 +1757,94 @@ body {
top: 100%;
left: 0;
right: 0;
- background: var(--white);
+ background: rgba(255, 255, 255, 0.98);
+ backdrop-filter: blur(10px);
flex-direction: column;
- padding: 1rem 0;
- box-shadow: var(--shadow);
+ padding: 1.5rem 0;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
+ animation: slideDown 0.3s ease-out;
}
.nav-links.active {
display: flex;
}
+ .nav-links a {
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+ transition: all 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ background: rgba(79, 70, 229, 0.1);
+ color: var(--primary-color);
+ transform: translateX(10px);
+ }
+
.contact-icons {
display: none;
}
+ /* Улучшенный заголовок для мобильных */
.main-title {
- font-size: 3rem;
+ font-size: 2.5rem;
+ line-height: 1.2;
+ margin-bottom: 1.5rem;
}
.hero-section {
- padding: 120px 0 0;
+ padding: 100px 0 60px;
+ min-height: 90vh;
}
.hero-content {
- padding-bottom: 80px;
+ padding-bottom: 60px;
+ text-align: center;
+ }
+
+ .hero-description {
+ font-size: 1.1rem;
+ line-height: 1.6;
+ margin-bottom: 2rem;
}
.hero-buttons {
flex-direction: column;
+ gap: 1rem;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 300px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ font-size: 1.1rem;
}
.university-logos {
grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
}
.stats-container {
grid-template-columns: 1fr;
+ gap: 1.5rem;
}
.footer-links {
grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
}
.about-description .highlight {
- font-size: 1.2rem;
+ font-size: 1.1rem;
}
.feature {
- padding: 1rem;
+ padding: 1.5rem;
+ margin-bottom: 1rem;
}
.feature-icon {
@@ -1705,25 +1920,120 @@ body {
@media (max-width: 480px) {
.section-title {
- font-size: 2rem;
+ font-size: 2.2rem;
+ text-align: center;
}
.highlight-text {
- font-size: 1.2rem;
+ font-size: 1.3rem;
+ text-align: center;
+ }
+
+ .main-title {
+ font-size: 2.2rem;
+ line-height: 1.3;
+ }
+
+ .hero-description {
+ font-size: 1rem;
+ line-height: 1.5;
+ }
+
+ .btn {
+ padding: 0.8rem 1.5rem;
+ font-size: 1rem;
}
.contact-buttons {
- grid-template-columns: 1fr;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .stats-container {
+ gap: 1rem;
+ }
+
+ .stat-card {
+ padding: 1.5rem;
+ }
+
+ .stat-number {
+ font-size: 2.8rem;
+ }
+
+ .stat-icon {
+ width: 60px;
+ height: 60px;
+ }
+
+ .stat-icon i {
+ font-size: 2rem;
+ }
+
+ .accordion-header {
+ padding: 1rem;
+ }
+
+ .accordion-title h3 {
+ font-size: 1.1rem;
+ }
+
+ .success-card {
+ padding: 1.5rem;
+ }
+
+ .student-avatar {
+ width: 60px;
+ height: 60px;
+ }
+
+ .student-name {
+ font-size: 1.2rem;
+ }
+
+ .testimonial {
+ font-size: 1rem;
+ padding: 1rem;
+ }
+
+ .contact-form-container {
+ padding: 1.5rem;
+ }
+
+ .contact-method-btn {
+ padding: 1rem;
+ font-size: 1rem;
+ }
+
+ .form-group input {
+ padding: 0.8rem;
+ font-size: 0.9rem;
+ }
+
+ .submit-btn {
+ padding: 1rem;
+ font-size: 1rem;
}
.footer-content {
flex-direction: column;
- gap: 1rem;
+ gap: 1.5rem;
text-align: center;
}
.footer-links {
grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .university-logos {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .university-logos img {
+ max-width: 150px;
+ margin: 0 auto;
}
}
@@ -1956,24 +2266,62 @@ body {
@media (max-width: 768px) {
.stat-card {
- padding: 2rem 1.5rem;
+ padding: 2.5rem 2rem;
+ margin-bottom: 1.5rem;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ text-align: center;
+ }
+
+ .stat-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.stat-number {
- font-size: 3rem;
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: var(--gradient-1);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ margin-bottom: 0.5rem;
}
.stat-icon {
- width: 60px;
- height: 60px;
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 1.5rem;
+ background: var(--gradient-1);
+ border-radius: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.stat-icon i {
- font-size: 1.5rem;
+ font-size: 2.5rem;
+ color: var(--white);
+ }
+
+ .stat-title {
+ font-size: 1.4rem;
+ margin-bottom: 0.8rem;
+ font-weight: 600;
+ color: var(--text-color);
+ }
+
+ .stat-description {
+ font-size: 1.1rem;
+ line-height: 1.6;
+ color: var(--text-light);
}
.stats-title {
- font-size: 2.5rem;
+ font-size: 2.8rem;
+ margin-bottom: 1.5rem;
+ text-align: center;
}
.stats-title::before,
@@ -1983,6 +2331,12 @@ body {
.stats-header {
margin-bottom: 3rem;
+ text-align: center;
+ }
+
+ .stats-overline {
+ font-size: 1rem;
+ margin-bottom: 0.8rem;
}
}
@@ -2139,26 +2493,88 @@ body {
@media (max-width: 768px) {
.accordion-header {
- padding: 1.2rem 1.5rem;
+ padding: 1.5rem;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 1rem;
}
.accordion-icon {
- width: 40px;
- height: 40px;
- margin-right: 0.8rem;
+ width: 50px;
+ height: 50px;
+ margin-right: 0;
+ align-self: center;
+ }
+
+ .accordion-title {
+ flex: 1;
+ width: 100%;
}
.accordion-title h3 {
- font-size: 1.1rem;
+ font-size: 1.3rem;
+ line-height: 1.4;
+ margin-bottom: 0.5rem;
+ }
+
+ .accordion-subtitle {
+ font-size: 1rem;
+ color: var(--text-light);
}
.accordion-content.active {
- padding: 0 1.5rem 1.5rem 1.5rem;
+ padding: 2rem 1.5rem;
+ max-height: none;
+ overflow: visible;
+ height: auto;
+ }
+
+ .accordion-content .exam-description {
+ font-size: 1.1rem;
+ line-height: 1.7;
+ margin-bottom: 2rem;
+ color: var(--text-color);
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ }
+
+ .exam-features {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.8rem;
+ margin-top: 1.5rem;
}
.feature-tag {
- font-size: 0.8rem;
- padding: 0.3rem 0.6rem;
+ font-size: 0.9rem;
+ padding: 0.6rem 1rem;
+ border-radius: 12px;
+ background: rgba(79, 70, 229, 0.08);
+ color: var(--primary-color);
+ border: 1px solid rgba(79, 70, 229, 0.15);
+ transition: all 0.3s ease;
+ text-align: center;
+ white-space: normal;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+ max-width: 100%;
+ flex-shrink: 0;
+ }
+
+ .feature-tag {
+ font-size: 0.9rem;
+ padding: 0.5rem 1rem;
+ border-radius: 25px;
+ background: rgba(79, 70, 229, 0.1);
+ color: var(--primary-color);
+ border: 1px solid rgba(79, 70, 229, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ .feature-tag:hover {
+ background: var(--primary-color);
+ color: var(--white);
+ transform: translateY(-2px);
}
}
@@ -2614,45 +3030,141 @@ body {
/* Mobile Responsiveness */
@media (max-width: 768px) {
.success-title {
- font-size: 2.2rem;
+ font-size: 2.8rem;
+ margin-bottom: 1rem;
+ text-align: center;
+ }
+
+ .success-subtitle {
+ font-size: 1.1rem;
+ text-align: center;
+ margin-bottom: 2rem;
}
.success-card {
- padding: 2rem;
+ padding: 2rem 1.5rem;
+ margin: 0 1rem;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ min-height: auto;
+ height: auto;
+ max-height: none;
+ overflow: visible;
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
}
.card-header {
+ display: flex;
flex-direction: column;
- align-items: flex-start;
+ align-items: center;
+ text-align: center;
gap: 1rem;
+ margin-bottom: 0;
+ }
+
+ .student-avatar {
+ width: 80px;
+ height: 80px;
+ margin-bottom: 0.5rem;
+ flex-shrink: 0;
+ }
+
+ .student-avatar img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 3px solid rgba(79, 70, 229, 0.1);
}
.student-details {
margin-left: 0;
+ text-align: center;
+ flex: 1;
+ }
+
+ .student-name {
+ font-size: 1.4rem;
+ font-weight: 700;
+ margin-bottom: 0.3rem;
+ color: var(--text-color);
+ }
+
+ .student-location {
+ font-size: 1rem;
+ color: var(--text-light);
+ margin-bottom: 0.5rem;
}
.score-transformation {
- flex-direction: column;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
gap: 1rem;
+ margin-bottom: 1rem;
+ width: 100%;
+ }
+
+ .score-before,
+ .score-after {
+ text-align: center;
+ padding: 0.8rem 1rem;
+ border-radius: 12px;
+ background: rgba(79, 70, 229, 0.05);
+ border: 1px solid rgba(79, 70, 229, 0.1);
+ min-width: 100px;
+ font-size: 0.9rem;
}
.score-arrow {
- transform: rotate(90deg);
- margin: 0.5rem 0;
+ transform: rotate(0deg);
+ margin: 0;
+ font-size: 1.2rem;
+ color: var(--primary-color);
+ }
+
+ .testimonial {
+ display: none;
+ }
+
+ .university-badge {
+ background: var(--primary-color);
+ color: white;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ margin-top: 0.5rem;
}
.carousel-nav {
- width: 40px;
- height: 40px;
- font-size: 1rem;
+ width: 60px;
+ height: 60px;
+ font-size: 1.2rem;
+ background: var(--white);
+ border-radius: 50%;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.carousel-prev {
- left: -20px;
+ left: 15px;
}
.carousel-next {
- right: -20px;
+ right: 15px;
+ }
+
+ .carousel-indicators {
+ bottom: -40px;
+ }
+
+ .carousel-dot {
+ width: 12px;
+ height: 12px;
+ margin: 0 6px;
}
}
@@ -2709,77 +3221,214 @@ body {
padding: 8rem 0;
background: var(--primary-color);
color: var(--white);
+ position: relative;
+ overflow: hidden;
}
+/* Contact Background Elements */
+.contact-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+}
+
+.contact-gradient-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.9) 0%, rgba(79, 70, 229, 0.8) 100%);
+ z-index: 2;
+}
+
+.contact-pattern-grid {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image:
+ linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+ background-size: 25px 25px;
+ z-index: 3;
+}
+
+.contact-floating-shapes {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 3;
+}
+
+.contact-shape {
+ position: absolute;
+ background: rgba(255, 255, 255, 0.12);
+ border-radius: 50%;
+ backdrop-filter: blur(10px);
+}
+
+.contact-shape1 {
+ width: 250px;
+ height: 250px;
+ top: -125px;
+ right: -125px;
+ animation: contactFloat 12s infinite, contactShapeBob 8s ease-in-out infinite;
+}
+
+.contact-shape2 {
+ width: 180px;
+ height: 180px;
+ bottom: -90px;
+ left: -90px;
+ animation: contactFloat 16s infinite reverse, contactShapeBob 10s ease-in-out infinite;
+}
+
+.contact-shape3 {
+ width: 120px;
+ height: 120px;
+ top: 20%;
+ right: 10%;
+ animation: contactFloat 14s infinite, contactShapeBob 12s ease-in-out infinite;
+}
+
+.contact-shape4 {
+ width: 80px;
+ height: 80px;
+ bottom: 30%;
+ left: 15%;
+ animation: contactFloat 18s infinite reverse, contactShapeBob 14s ease-in-out infinite;
+}
+
+@keyframes contactFloat {
+ 0%, 100% {
+ transform: translate3d(0, 0, 0);
+ }
+ 50% {
+ transform: translate3d(0, -10px, 0);
+ }
+}
+
+@keyframes contactShapeBob {
+ 0%, 100% {
+ transform: translateY(0) scale(1);
+ }
+ 25% {
+ transform: translateY(-8px) scale(1.03);
+ }
+ 75% {
+ transform: translateY(8px) scale(0.97);
+ }
+}
+
+
+
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 6rem;
+ position: relative;
+ z-index: 5;
}
/* Left side */
.contact-info {
display: flex;
flex-direction: column;
+ z-index: 2;
+ position: relative;
}
.contact-heading {
font-size: 8rem;
font-weight: 700;
- line-height: 1;
+ line-height: 0.9;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.contact-subheading {
- font-size: 1.2rem;
+ font-size: 1.3rem;
line-height: 1.6;
- max-width: 450px;
+ max-width: 480px;
margin-bottom: 3rem;
- color: rgba(255, 255, 255, 0.8);
+ color: rgba(255, 255, 255, 0.9);
}
-.highlight-link {
+.highlight-text {
color: var(--white);
font-weight: 600;
- text-decoration: underline;
- text-underline-offset: 4px;
- transition: opacity 0.3s ease;
-}
-
-.highlight-link:hover {
- opacity: 0.8;
+ display: block;
+ margin-top: 0.5rem;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.contact-methods {
display: flex;
gap: 1rem;
+ flex-wrap: wrap;
}
.contact-method-btn {
- padding: 0.8rem 1.5rem;
- border: 1px solid rgba(255, 255, 255, 0.4);
- border-radius: 8px;
+ padding: 1rem 1.5rem;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-radius: 12px;
color: var(--white);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ backdrop-filter: blur(10px);
+ background: rgba(255, 255, 255, 0.1);
}
.contact-method-btn:hover {
background: var(--white);
color: var(--primary-color);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
+}
+
+.contact-method-btn i {
+ font-size: 1.2rem;
}
/* Right side - Form */
.contact-form-container {
padding: 3rem;
- background: rgba(255, 255, 255, 0.05);
- border-radius: 16px;
- backdrop-filter: blur(10px);
- border: 1px solid rgba(255, 255, 255, 0.1);
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 20px;
+ backdrop-filter: blur(15px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ position: relative;
+}
+
+.form-header {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.form-header h3 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin-bottom: 0.5rem;
+ color: var(--white);
+}
+
+.form-header p {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 1rem;
}
.contact-form {
@@ -2791,22 +3440,28 @@ body {
.form-group {
display: flex;
flex-direction: column;
+ position: relative;
}
.form-group label {
font-size: 0.9rem;
- color: rgba(255, 255, 255, 0.7);
- margin-bottom: 0.5rem;
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: 0.8rem;
+ font-weight: 500;
}
.form-group input {
background: transparent;
border: none;
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
- padding: 0.8rem 0;
+ border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+ padding: 1rem 0;
color: var(--white);
font-size: 1.1rem;
- transition: border-color 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.form-group input::placeholder {
+ color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus {
@@ -2814,23 +3469,57 @@ body {
border-bottom-color: var(--white);
}
+.form-group input:focus + .input-line {
+ transform: scaleX(1);
+}
+
+.input-line {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: var(--white);
+ transform: scaleX(0);
+ transition: transform 0.3s ease;
+ transform-origin: left;
+}
+
.submit-btn {
- padding: 1.2rem;
+ padding: 1.4rem 2rem;
background: var(--white);
color: var(--primary-color);
border: none;
- border-radius: 8px;
+ border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.8rem;
+ box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
.submit-btn:hover {
- background: #e2e8f0;
+ background: #f1f5f9;
+ transform: translateY(-2px);
+ box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3);
}
+.submit-btn i {
+ font-size: 1.2rem;
+ transition: transform 0.3s ease;
+}
+
+.submit-btn:hover i {
+ transform: translateX(3px);
+}
+
+
+
/* Mobile Responsiveness */
@media (max-width: 992px) {
.contact-grid {
@@ -2839,14 +3528,982 @@ body {
}
.contact-heading {
font-size: 6rem;
+ text-align: center;
+ }
+ .contact-info {
+ text-align: center;
+ }
+ .contact-methods {
+ justify-content: center;
}
}
@media (max-width: 768px) {
.contact-heading {
- font-size: 4rem;
+ font-size: 2.8rem;
+ margin-bottom: 1rem;
+ text-align: center;
}
+
+ .contact-subheading {
+ font-size: 1.1rem;
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
.contact-form-section {
- padding: 5rem 0;
+ padding: 60px 0;
+ }
+
+ .contact-form-container {
+ padding: 2rem 1.5rem;
+ border-radius: 20px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+ }
+
+ .form-header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ .form-header h3 {
+ font-size: 1.8rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .form-header p {
+ font-size: 1rem;
+ color: var(--text-light);
+ }
+
+ .contact-methods {
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
+ }
+
+ .contact-method-btn {
+ width: 100%;
+ max-width: 300px;
+ justify-content: center;
+ padding: 1.5rem;
+ border-radius: 15px;
+ font-size: 1.1rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .contact-method-btn:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+ }
+
+ .contact-method-btn i {
+ font-size: 1.5rem;
+ }
+
+ .form-group {
+ margin-bottom: 1.5rem;
+ }
+
+ .form-group label {
+ font-size: 1rem;
+ margin-bottom: 0.5rem;
+ display: block;
+ }
+
+ .form-group input {
+ width: 100%;
+ padding: 1rem;
+ font-size: 1rem;
+ border-radius: 10px;
+ border: 2px solid rgba(79, 70, 229, 0.1);
+ transition: all 0.3s ease;
+ }
+
+ .form-group input:focus {
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+ outline: none;
+ }
+
+ .submit-btn {
+ width: 100%;
+ padding: 1.2rem;
+ font-size: 1.1rem;
+ border-radius: 15px;
+ margin-top: 1rem;
+ }
+}
+
+/* Contact Top Waves - точно как на главной странице */
+.contact-wave-separator {
+ position: absolute;
+ top: -220px;
+ left: 0;
+ width: 100%;
+ background: transparent;
+ height: 400px;
+ overflow: visible;
+ z-index: 10;
+ pointer-events: none;
+}
+
+.contact-wave-separator .contact-wave {
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 300%;
+ height: 400px;
+ animation: contactWaveAnimation 18s linear infinite;
+ transform: translate3d(0, 0, 0);
+ will-change: transform;
+}
+
+.contact-wave-separator .contact-wave2 {
+ animation: contactWaveAnimation 12s linear infinite;
+ opacity: 0.3;
+ top: 20px;
+}
+
+.contact-wave-separator .contact-wave3 {
+ animation: contactWaveAnimation 8s linear infinite;
+ opacity: 0.1;
+ top: 40px;
+}
+
+.contact-wave-separator .contact-wave path {
+ fill: var(--white);
+}
+
+@keyframes contactWaveAnimation {
+ 0% {
+ transform: translateX(0) translateY(0);
+ }
+ 25% {
+ transform: translateX(16.67%) translateY(-6px);
+ }
+ 50% {
+ transform: translateX(33.33%) translateY(0);
+ }
+ 75% {
+ transform: translateX(16.67%) translateY(6px);
+ }
+ 100% {
+ transform: translateX(0) translateY(0);
}
}
+
+@keyframes contactWaveFloat {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 25% {
+ transform: translateY(-6px);
+ }
+ 75% {
+ transform: translateY(6px);
+ }
+}
+
+/* ===== MOBILE NAVIGATION ===== */
+
+/* Hide mobile menu button on desktop */
+.mobile-menu-btn {
+ display: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ position: relative;
+ z-index: 1000;
+}
+
+/* Mobile menu styles */
+ .mobile-nav {
+ position: fixed;
+ top: 0;
+ left: -100%;
+ width: 300px;
+ height: 100vh;
+ background: linear-gradient(135deg, rgba(55, 48, 163, 0.98) 0%, rgba(79, 70, 229, 0.98) 100%);
+ backdrop-filter: none !important;
+ z-index: 10001 !important;
+ transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+.mobile-nav.active {
+ left: 0;
+}
+
+.mobile-nav-content {
+ padding: 2rem;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.mobile-nav-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 3rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.mobile-logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--white);
+ text-decoration: none;
+}
+
+.mobile-logo span {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.mobile-close-btn {
+ background: none;
+ border: none;
+ color: var(--white);
+ font-size: 1.5rem;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 50%;
+ transition: all 0.3s ease;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.mobile-close-btn:hover {
+ background: rgba(255, 255, 255, 0.1);
+ transform: rotate(90deg);
+}
+
+.mobile-nav-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ flex: 1;
+}
+
+.mobile-nav-links li {
+ margin-bottom: 0.5rem;
+}
+
+.mobile-nav-link {
+ display: block;
+ color: var(--white);
+ text-decoration: none;
+ font-size: 1.1rem;
+ font-weight: 500;
+ padding: 1rem 1.5rem;
+ border-radius: 12px;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.mobile-nav-link::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+ transition: left 0.5s ease;
+}
+
+.mobile-nav-link:hover::before {
+ left: 100%;
+}
+
+.mobile-nav-link:hover {
+ background: rgba(255, 255, 255, 0.15);
+ transform: translateX(8px);
+ box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
+}
+
+.mobile-lang-switch {
+ margin-top: auto;
+ padding-top: 1.5rem;
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
+ display: flex;
+ gap: 0.5rem;
+ justify-content: center;
+}
+
+.mobile-lang-switch a {
+ color: rgba(255, 255, 255, 0.7);
+ text-decoration: none;
+ padding: 0.5rem 1rem;
+ border-radius: 8px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ text-align: center;
+ min-width: 60px;
+}
+
+.mobile-lang-switch a.active,
+.mobile-lang-switch a:hover {
+ color: var(--white);
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.4);
+}
+
+/* Mobile menu button styles */
+@media (max-width: 992px) {
+ .desktop-nav {
+ display: none;
+ }
+
+ .mobile-menu-btn {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 50px;
+ height: 50px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ position: relative;
+ z-index: 10000;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .mobile-menu-btn:hover {
+ background: rgba(79, 70, 229, 0.1);
+ }
+
+ .burger-line {
+ width: 25px;
+ height: 3px;
+ background: var(--text-color);
+ border-radius: 2px;
+ transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ transform-origin: center;
+ margin: 2px 0;
+ }
+
+ /* Animated burger when menu is open */
+ .mobile-menu-btn.active .burger-line:nth-child(1) {
+ transform: translateY(7px) rotate(45deg);
+ background: var(--white);
+ }
+
+ .mobile-menu-btn.active .burger-line:nth-child(2) {
+ opacity: 0;
+ transform: scale(0);
+ }
+
+ .mobile-menu-btn.active .burger-line:nth-child(3) {
+ transform: translateY(-7px) rotate(-45deg);
+ background: var(--white);
+ }
+
+ /* Scrolled header styles for mobile */
+ .header.scrolled .burger-line {
+ background: var(--text-color);
+ }
+
+ .header.scrolled .mobile-menu-btn.active .burger-line {
+ background: var(--white);
+ }
+}
+
+/* Mobile overlay */
+.mobile-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: 10000;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ backdrop-filter: none !important;
+ pointer-events: none;
+}
+
+.mobile-overlay.active {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+
+/* ===== BREADCRUMBS ===== */
+.breadcrumbs {
+ background: rgba(255, 255, 255, 0.9);
+ padding: 1rem 0;
+ border-bottom: 1px solid rgba(79, 70, 229, 0.1);
+ position: relative;
+ z-index: 100;
+}
+
+.breadcrumbs ol {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+.breadcrumbs li {
+ display: flex;
+ align-items: center;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+ content: '›';
+ margin: 0 0.5rem;
+ color: var(--text-light);
+ font-weight: 500;
+}
+
+.breadcrumbs a {
+ color: var(--text-light);
+ text-decoration: none;
+ font-size: 0.9rem;
+ transition: color 0.3s ease;
+}
+
+.breadcrumbs a:hover {
+ color: var(--primary-color);
+}
+
+.breadcrumbs li:last-child a {
+ color: var(--primary-color);
+ font-weight: 500;
+}
+
+@media (max-width: 768px) {
+ .breadcrumbs {
+ display: none; /* Hide on mobile for better UX */
+ }
+}
+
+/* ===== MOBILE NAVIGATION ===== */
+
+@media (max-width: 768px) {
+ .breadcrumbs {
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ }
+}
+
+/* Mobile-specific improvements */
+.mobile-device {
+ /* Reduce motion for better performance */
+ --animation-duration: 0.3s;
+}
+
+.mobile-device * {
+ /* Optimize animations for mobile */
+ animation-duration: var(--animation-duration) !important;
+ transition-duration: var(--animation-duration) !important;
+}
+
+/* Touch-friendly improvements */
+@media (max-width: 768px) {
+ /* Increase touch targets */
+ .btn, .click-button, .accordion-header, .carousel-nav {
+ min-height: 44px;
+ min-width: 44px;
+ }
+
+ /* Better touch feedback */
+ .btn:active, .click-button:active, .accordion-header:active {
+ transform: scale(0.95);
+ transition: transform 0.1s ease;
+ }
+
+ /* Improved spacing for touch */
+ .nav-links a {
+ padding: 1.2rem 2rem;
+ margin: 0.2rem 0;
+ }
+
+ /* Better form inputs */
+ .form-group input, .form-group textarea {
+ font-size: 16px; /* Prevent zoom on iOS */
+ padding: 1rem;
+ border-radius: 12px;
+ }
+
+ /* Enhanced card interactions */
+ .stat-card, .success-card, .exam-type-card {
+ cursor: pointer;
+ user-select: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ .stat-card:active, .success-card:active, .exam-type-card:active {
+ transform: scale(0.98);
+ }
+
+ /* Better carousel controls */
+ .carousel-nav {
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(10px);
+ border: 2px solid rgba(79, 70, 229, 0.2);
+ }
+
+ .carousel-nav:active {
+ transform: scale(0.9);
+ }
+
+ /* Improved mobile menu */
+ .mobile-nav {
+ backdrop-filter: none !important;
+ background: linear-gradient(135deg, rgba(55, 48, 163, 0.98) 0%, rgba(79, 70, 229, 0.98) 100%) !important;
+ -webkit-overflow-scrolling: touch;
+ z-index: 10001 !important;
+ }
+
+ .mobile-nav-link {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ transition: all 0.3s ease;
+ touch-action: manipulation;
+ }
+
+ /* Better mobile animations */
+ .floating-shapes .shape {
+ animation-duration: 4s;
+ animation-timing-function: ease-in-out;
+ }
+
+ /* Optimize hero section for mobile */
+ .hero-section {
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ }
+
+ /* Better mobile typography */
+ .main-title {
+ word-break: break-word;
+ hyphens: auto;
+ }
+
+ /* Improved mobile spacing */
+ .container {
+ padding: 0 1rem;
+ }
+
+ /* Better mobile shadows */
+ .stat-card, .success-card, .exam-type-card {
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+ }
+
+ /* Mobile-specific hover states */
+ .mobile-device .stat-card:hover,
+ .mobile-device .success-card:hover,
+ .mobile-device .exam-type-card:hover {
+ transform: none;
+ }
+
+ /* Better mobile loading states */
+ .lazy {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .lazy.loaded {
+ opacity: 1;
+ }
+
+ /* Mobile-specific focus states */
+ .btn:focus, .click-button:focus, .accordion-header:focus {
+ outline: 2px solid var(--primary-color);
+ outline-offset: 2px;
+ }
+
+ /* Better mobile scrollbars */
+ ::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.05);
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: var(--primary-color);
+ border-radius: 3px;
+ }
+
+ /* Mobile-specific transitions */
+ .mobile-device .animate-slide-up {
+ animation-duration: 0.6s;
+ }
+
+ .mobile-device .animate-fade-in {
+ animation-duration: 0.4s;
+ }
+
+ /* Better mobile performance */
+ .mobile-device .floating-shapes {
+ will-change: transform;
+ }
+
+ .mobile-device .wave-separator {
+ display: none;
+ }
+
+ .mobile-device .contact-wave-separator {
+ display: none;
+ }
+
+ /* Auto-animate stats on mobile when in viewport */
+ .mobile-device .stats-section {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s ease;
+ }
+
+ .mobile-device .stats-section.in-view {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .mobile-device .stat-card {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.6s ease;
+ transition-delay: calc(var(--card-index, 0) * 0.2s);
+ }
+
+ .mobile-device .stats-section.in-view .stat-card {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ /* Auto-animate stats for all devices */
+ .stats-section {
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.8s ease;
+ }
+
+ .stats-section.in-view {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .stat-card {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.6s ease;
+ transition-delay: calc(var(--card-index, 0) * 0.2s);
+ }
+
+ .stats-section.in-view .stat-card {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .mobile-device .stat-card,
+ .mobile-device .success-card,
+ .mobile-device .exam-type-card {
+ will-change: transform;
+ }
+
+ /* Mobile-specific accessibility */
+ .mobile-device .btn:focus,
+ .mobile-device .click-button:focus,
+ .mobile-device .accordion-header:focus {
+ outline: 3px solid var(--primary-color);
+ outline-offset: 2px;
+ }
+
+ /* Better mobile form validation */
+ .form-group input:invalid {
+ border-color: #ef4444;
+ }
+
+ .form-group input:valid {
+ border-color: #10b981;
+ }
+
+ /* Mobile-specific loading animations */
+ @keyframes mobilePulse {
+ 0%, 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0.7;
+ }
+ }
+
+ .mobile-device .loading {
+ animation: mobilePulse 1.5s ease-in-out infinite;
+ }
+
+ /* Better mobile navigation indicators */
+ .carousel-dot {
+ transition: all 0.3s ease;
+ }
+
+ .carousel-dot.active {
+ transform: scale(1.3);
+ background: var(--primary-color);
+ }
+
+ /* Mobile-specific error states */
+ .error-message {
+ background: #fef2f2;
+ border: 1px solid #fecaca;
+ color: #dc2626;
+ padding: 0.75rem;
+ border-radius: 8px;
+ margin: 0.5rem 0;
+ font-size: 0.9rem;
+ }
+
+ /* Better mobile success states */
+ .success-message {
+ background: #f0fdf4;
+ border: 1px solid #bbf7d0;
+ color: #16a34a;
+ padding: 0.75rem;
+ border-radius: 8px;
+ margin: 0.5rem 0;
+ font-size: 0.9rem;
+ }
+}
+
+.mobile-nav,
+.mobile-nav * {
+ pointer-events: auto !important;
+ z-index: 10001 !important;
+}
+
+.mobile-overlay {
+ pointer-events: auto;
+ z-index: 10000;
+}
+.mobile-overlay:not(.active) {
+ pointer-events: none;
+}
+
+/* Fix mobile menu clickability */
+.mobile-nav,
+.mobile-nav *,
+.mobile-nav-content,
+.mobile-nav-header,
+.mobile-nav-links,
+.mobile-nav-link,
+.mobile-close-btn,
+.mobile-logo,
+.mobile-lang-switch,
+.mobile-lang-switch a {
+ pointer-events: auto !important;
+ z-index: 10001 !important;
+}
+
+.mobile-nav {
+ backdrop-filter: none !important;
+ background: linear-gradient(135deg, rgba(55, 48, 163, 0.98) 0%, rgba(79, 70, 229, 0.98) 100%) !important;
+}
+
+/* FINAL MOBILE MENU FIXES */
+.mobile-nav {
+ z-index: 10001 !important;
+ backdrop-filter: none !important;
+ background: linear-gradient(135deg, rgba(55, 48, 163, 0.98) 0%, rgba(79, 70, 229, 0.98) 100%) !important;
+}
+
+.mobile-nav *,
+.mobile-nav-content,
+.mobile-nav-header,
+.mobile-nav-links,
+.mobile-nav-link,
+.mobile-close-btn,
+.mobile-logo,
+.mobile-lang-switch,
+.mobile-lang-switch a {
+ pointer-events: auto !important;
+ z-index: 10001 !important;
+}
+
+.mobile-overlay {
+ z-index: 10000 !important;
+ pointer-events: none;
+}
+
+.mobile-overlay.active {
+ pointer-events: auto;
+}
+
+/* ===== LOADING PROGRESS BAR ===== */
+.loading-progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ z-index: 99999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.loading-progress.hidden {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.loading-blur {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ backdrop-filter: blur(20px);
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.loading-spinner {
+ position: relative;
+ z-index: 2;
+}
+
+.spinner-circle {
+ width: 50px;
+ height: 50px;
+ border: 3px solid rgba(79, 70, 229, 0.2);
+ border-top: 3px solid #4f46e5;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* ===== PURPLE GLOW SPOTS ON WHITE BACKGROUND ===== */
+.purple-glow-spots {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.glow-spot {
+ position: absolute;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 50%, transparent 100%);
+ animation: glowSpotFloat 15s ease-in-out infinite;
+ opacity: 0.6;
+}
+
+.glow-spot:nth-child(1) {
+ width: 300px;
+ height: 300px;
+ top: 10%;
+ left: 5%;
+ animation-delay: 0s;
+ animation-duration: 20s;
+}
+
+.glow-spot:nth-child(2) {
+ width: 200px;
+ height: 200px;
+ top: 60%;
+ right: 10%;
+ animation-delay: -5s;
+ animation-duration: 18s;
+}
+
+.glow-spot:nth-child(3) {
+ width: 250px;
+ height: 250px;
+ bottom: 20%;
+ left: 15%;
+ animation-delay: -10s;
+ animation-duration: 22s;
+}
+
+.glow-spot:nth-child(4) {
+ width: 180px;
+ height: 180px;
+ top: 30%;
+ right: 25%;
+ animation-delay: -7s;
+ animation-duration: 16s;
+}
+
+.glow-spot:nth-child(5) {
+ width: 220px;
+ height: 220px;
+ bottom: 40%;
+ right: 5%;
+ animation-delay: -12s;
+ animation-duration: 19s;
+}
+
+@keyframes glowSpotFloat {
+ 0%, 100% {
+ transform: translate(0, 0) scale(1);
+ opacity: 0.6;
+ }
+ 25% {
+ transform: translate(30px, -20px) scale(1.1);
+ opacity: 0.8;
+ }
+ 50% {
+ transform: translate(-15px, 25px) scale(0.9);
+ opacity: 0.4;
+ }
+ 75% {
+ transform: translate(20px, 15px) scale(1.05);
+ opacity: 0.7;
+ }
+}
+
+/* Add subtle purple tint to white backgrounds */
+.white-section {
+ position: relative;
+ background: linear-gradient(135deg, #ffffff 0%, #faf5ff 50%, #ffffff 100%);
+}
+
+.white-section::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.03) 0%, transparent 50%),
+ radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.02) 0%, transparent 50%);
+ pointer-events: none;
+ z-index: 0;
+}
diff --git a/src/index.html b/src/index.html
index 8cca26e..20b3ff0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,62 +3,559 @@
ExamPass | Your Path to Academic Success
+ ExamPass | 100% Guaranteed University Admission | Revolutionary Exam Methods
+
+
+ 
+