From 389fb52aa5deda49c29c434abe3fdff1311729eb Mon Sep 17 00:00:00 2001 From: ccadmingit1 Date: Thu, 20 Aug 2026 11:17:48 +0000 Subject: [PATCH] Initial AI-generated site --- index.html | 496 ++++++++++++++++++ script.js | 144 ++++++ style.css | 1446 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 2086 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae872e4 --- /dev/null +++ b/index.html @@ -0,0 +1,496 @@ + + + + + +eazy English – אנגלית לאמירנט. בלי פחד. עם תוצאות. + + + + + + + + + + + + + +
+
+
+
+ + + ez + +
+ + English +
+ +
+ 1-700-70-70-07 + שיחת ייעוץ ← +
+ +
+
+ + + + + +
+ +
+
+

אנגלית לאמירנט.
בלי פחד. עם תוצאות.

+

מאז 1998 עזרנו ל-120,000 תלמידים להגיע לאקדמיה – כולל כאלה שהיו בטוחים שאנגלית זה לא בשבילם.
קורס עם מדריך בזמן אמת, או ערכת תרגול עצמאית. בכל מקרה, מתחילים בחינם.

+ בדקו את הרמה שלכם – 10 דקות +
+
+
+ + + + + + + + + + +
+
+
+
+ + +
+
+

המוסדות הכי נחשבים בארץ ממליצים על הקורסים שלנו עוד מאז שאנגלית הייתה חלק מהפסיכומטרי.

+ לחצו על לוגו כדי לקרוא למה הם שמחים לפרגן +
+
+
+ טכניון +
+
+ ת״א +
+
+ עברית +
+
+ בן גוריון +
+
+ בר אילן +
+
+ חיפה +
+
+ אריאל +
+
+ מכללה +
+
+ רייכמן +
+
+ אקדמית +
+
+
+ + +
+
+

מה המצב שלך באנגלית?

+

לחצו על המשפט שהכי מתאר אתכם – ותקבלו עמוד עם תשובות ומסלול בדיוק בשבילכם.

+
+ + 01 +

"בדרך לתואר, רוצה לסגור את האנגלית מראש"

+

להגיע עם פטור ולחסוך שנה של קורסים.

+ זה אני ← + + + 02 +

"קיבלתי ציון, רוצה להעלות אותו"

+

35 יום עד המבחן הבא. אפשר לנצל אותם.

+ זה אני ← + + + 03 +

"אנגלית תמיד הייתה סיוט בשבילי"

+

כאן זה עובד אחרת. באמת. שווה לבדוק.

+ זה אני ← + +
+
+
+ + +
+
+
+
+ בלי הרשמה +

עד 90 שניות טעימה של תותח מילים – בלי הרשמה.

+

תראו למה התלמידים שלנו לא נרדמים על אוצר מילים.

+ משחקים עכשיו ← +
+
+
+ + + + + תותח מילים + +
+
+
+
+
+ + +
+
+

שתי דרכים להגיע ליעד

+
+
+

עצמאית, עם יוזר אמירנט אישי

+

לומדים לבד, בקצב שלכם. סימולציות, שיעורים מוקלטים, משחקים, מילון לפי רמה.

+
עד 600 ₪
+
+ לרכישה + פרטים ← +
+
+
+
+

ביחד, בכיתה אונליין / פרונטלית

+

מדריך בזמן אמת, קבוצה קטנה, מישהו שאכפת לו אם הגעתם.

+
מ-1,500 ₪
+
+ שיחת ייעוץ + פרטים ← +
+
+
+

לא בטוחים? איזה מתאים לי או פשוט תכתבו לנו בוואטסאפ.

+
+
+ + +
+
+

איפה האתגרים ואיך מתגברים עליהם

+
+
+ +
+

אוצר מילים לא נכנס לראש

+

משחקים ממכרים ומילונים לפי רמות.

+
+
+
+ +
+

לא מבינים את סוגי השאלות

+

שיעורים ממוקדים, תרגולים ו-VOD.

+
+
+
+ +
+

קשה להתמיד לבד

+

מדריך בזמן אמת + ליווי + תוכנית לימוד מסודרת.

+
+
+
+ +
+

אנגלית מלחיצה אתכם מגיל 12

+

שיטה חווייתית שמורידה את הרתיעה.

+
+
+
+ +
+

לקות למידה / הזמן הורג אתכם

+

ניסיון של שנים עם התאמות.

+
+
+
+
+

רוב הקורסים מלמדים את המבחן. אנחנו מלמדים גם את האדם שנבחן. 28 שנים של עבודה עם חיילים, סטודנטים, לקויי למידה ומי שפשוט התייאש – לימדו אותנו שהמפתח הוא לא עוד תרגול, אלא ללמוד בלי לחץ, בשיטה חווייתית שגורמת לך לרצות לחזור.

+ איך השיטה עובדת ← +
+
+
+ + +
+
+

בוגרים משתפים

+
+
+ +

ירדן, אחרי צבא

+ מ-92 ל-136 ב-7 שבועות +

הייתי בטוחה שאנגלית זה לא בשבילי. המשחקים גרמו לי לחזור כל יום בלי להרגיש שאני לומדת.

+
+
+ +

עומר, סטודנט בטכניון

+ 134 לפטור מלא +

סגרתי את הפטור לפני שהתואר התחיל. המדריך ידע בדיוק איפה אני נתקע בכל פרק.

+
+
+ +

נועה, לקות למידה

+ פטור אחרי 3 ניסיונות לבד +

אחרי שנים של תסכול, מישהו סוף סוף התאים לי את הדרך במקום לדחוף עוד תרגולים.

+
+
+
+ מומלץ ע"י הטכניון · אונ' תל אביב · העברית · בן גוריון · בר אילן · חיפה · אריאל + כל הסיפורים ← +
+
+
+ + +
+
+
+
+

המדריכים שלנו

+

אנשים אמיתיים שמלמדים בזמן אמת, עונים בוואטסאפ, ויודעים בדיוק מתי לעצור ולהסביר שוב. רובם עברו את הדרך הזאת בעצמם.

+ להכיר את כולם ← +
+
+
+
+ +
+

נעה

+ אנגלית לאמירנט · 12 שנים +
+
+
+ +
+

אלון

+ מוביל הקורס האונליין +
+
+
+ +
+

יובל

+ מתמחה בלקויות למידה +
+
+
+
+
+ + +
+
+

מדריך אמירנט

+
+ מה זה אמירנט← + כמה צריך לפטור← + מבנה הבחינה← + הרשמה ומועדים← + אמיר"ם מול אמירנט← + מבחן לדוגמה← +
+ למדריך המלא ← +
+
+ + +
+
+

ללמוד אנגלית, בכיף

+
+ +
+ + ▶ +
+

איך משננים אוצר מילים באמת

+ + +
+ + ▶ +
+

ללמוד אנגלית מסרטים וסדרות

+ + +
+ + ▶ +
+

טיקטוק ורילס כמורה לאנגלית

+ +
+ לכל הטיפים ← +
+
+ + +
+
+
+
+ + + + + + +
+
+

מ-1998, מהטכניון ועד בן גוריון

+

התחלנו כשהאנגלית עוד הייתה חלק מהפסיכומטרי, והקורסים שלנו הומלצו ע"י האוניברסיטאות המובילות. היום אנחנו עושים את אותו הדבר לאמירנט.

+
+ הסיפור שלנו ← +
+
+
+ + +
+
+
+
+

אני רוצה להתקדם באנגלית

+
+ + + + +
+
+
+
+ ???? + 1-700-70-70-07 +
+
+ ???? + וואטסאפ +
+
+ ???? + ימים א'–ה' 9:00–19:00, ו' 9:00–13:00 +
+
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4ae7b33 --- /dev/null +++ b/script.js @@ -0,0 +1,144 @@ +(function() { + 'use strict'; + + // Mobile menu toggle + const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); + const mobileNav = document.getElementById('mobileNav'); + + if (mobileMenuBtn && mobileNav) { + mobileMenuBtn.addEventListener('click', function() { + mobileNav.classList.toggle('active'); + const isOpen = mobileNav.classList.contains('active'); + mobileMenuBtn.setAttribute('aria-expanded', isOpen); + }); + + // Close menu when clicking a link + mobileNav.querySelectorAll('a').forEach(function(link) { + link.addEventListener('click', function() { + mobileNav.classList.remove('active'); + mobileMenuBtn.setAttribute('aria-expanded', 'false'); + }); + }); + } + + // Scroll reveal animation + function initScrollReveal() { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { + // If user prefers reduced motion, make all elements visible immediately + document.querySelectorAll('.situation-card, .guide-link, .learn-card, .uni-logo-item').forEach(function(el) { + el.classList.add('visible'); + }); + return; + } + + const observerOptions = { + root: null, + rootMargin: '0px 0px -50px 0px', + threshold: 0.1 + }; + + const observer = new IntersectionObserver(function(entries) { + entries.forEach(function(entry, index) { + if (entry.isIntersecting) { + // Stagger the animation + setTimeout(function() { + entry.target.classList.add('visible'); + }, index * 50); + observer.unobserve(entry.target); + } + }); + }, observerOptions); + + document.querySelectorAll('.situation-card, .guide-link, .learn-card, .uni-logo-item').forEach(function(el) { + observer.observe(el); + }); + } + + // Header scroll effect + function initHeaderScroll() { + const header = document.querySelector('.header'); + let lastScroll = 0; + + window.addEventListener('scroll', function() { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'; + } else { + header.style.boxShadow = 'none'; + } + + lastScroll = currentScroll; + }, { passive: true }); + } + + // Smooth scroll for anchor links + function initSmoothScroll() { + document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const targetElement = document.querySelector(targetId); + if (targetElement) { + e.preventDefault(); + const headerHeight = document.querySelector('.header').offsetHeight; + const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + } + + // Form handling + function initForm() { + const form = document.querySelector('.contact-form form'); + if (form) { + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const nameInput = form.querySelector('input[type="text"]'); + const phoneInput = form.querySelector('input[type="tel"]'); + const submitBtn = form.querySelector('button[type="submit"]'); + + if (nameInput.value.trim() && phoneInput.value.trim()) { + submitBtn.textContent = 'תודה! ניצור קשר בקרוב'; + submitBtn.disabled = true; + submitBtn.style.background = 'var(--ez-green)'; + + // Reset after 3 seconds + setTimeout(function() { + submitBtn.textContent = 'שלחו לי פרטים'; + submitBtn.disabled = false; + submitBtn.style.background = ''; + form.reset(); + }, 3000); + } + }); + } + } + + // University logo hover effect + function initLogoHover() { + document.querySelectorAll('.uni-logo-item').forEach(function(logo) { + logo.addEventListener('click', function() { + // Placeholder for modal or link functionality + console.log('Logo clicked:', this.getAttribute('title')); + }); + }); + } + + // Initialize all functions when DOM is ready + document.addEventListener('DOMContentLoaded', function() { + initScrollReveal(); + initHeaderScroll(); + initSmoothScroll(); + initForm(); + initLogoHover(); + }); + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a733dfd --- /dev/null +++ b/style.css @@ -0,0 +1,1446 @@ +/* === CSS Custom Properties === */ +:root { + --ez-orange: #f57c00; + --ez-orange-dark: #e56800; + --ez-lavender: #c4b5dc; + --ez-lavender-deep: #6b5b95; + --ez-lavender-tint: #f5f2f9; + --ez-ink: #1a1a20; + --ez-fg-2: #4a4a5a; + --ez-fg-3: #7a7a8a; + --ez-line: #e5e5eb; + --ez-paper-cool: #f8f8fb; + --ez-green: #25d366; + + --font-display: 'Assistant', 'Heebo', sans-serif; + --font-body: 'Heebo', 'Assistant', sans-serif; + --font-mono: 'Courier New', monospace; + + --shadow-1: 0 2px 8px rgba(0,0,0,0.08); + --shadow-2: 0 4px 20px rgba(0,0,0,0.12); + + --container-max: 1280px; + --container-padding: 64px; +} + +/* === Reset & Base === */ +*, *::before, *::after { + box-sizing: border-box; +} + +html { + background: #fff; + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: var(--font-body); + font-size: 17px; + line-height: 1.6; + color: var(--ez-ink); + background: #fff; + -webkit-font-smoothing: antialiased; +} + +a { + color: var(--ez-orange); + text-decoration: none; + transition: color 0.2s ease; +} + +a:hover { + color: var(--ez-orange-dark); +} + +h1, h2, h3, h4 { + margin: 0; + font-family: var(--font-display); + font-weight: 600; + line-height: 1.2; +} + +p { + margin: 0; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input { + font-family: inherit; + font-size: inherit; +} + +/* === Container === */ +.container { + max-width: var(--container-max); + margin: 0 auto; + padding-inline: var(--container-padding); +} + +/* === Header === */ +.header { + position: sticky; + top: 0; + z-index: 50; + background: #fff; + border-bottom: 1px solid var(--ez-line); +} + +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px var(--container-padding); + max-width: var(--container-max); + margin: 0 auto; +} + +.logo-group { + display: flex; + align-items: center; + gap: 12px; +} + +.logo-mark svg { + display: block; +} + +.logo-divider { + width: 1px; + height: 30px; + background: var(--ez-line); +} + +.logo-text { + font-family: var(--font-display); + font-weight: 600; + font-size: 24px; + color: var(--ez-lavender-deep); +} + +.nav-desktop { + display: flex; + gap: 22px; + font-size: 16.5px; +} + +.nav-desktop a { + color: var(--ez-ink); + white-space: nowrap; + border-bottom: 2px solid transparent; + padding-bottom: 2px; + transition: border-color 0.2s ease; +} + +.nav-desktop a:hover { + color: var(--ez-ink); + border-bottom-color: var(--ez-orange); +} + +.header-cta { + display: flex; + align-items: baseline; + gap: 18px; +} + +.phone-number { + font-family: var(--font-mono); + font-size: 14.5px; + color: var(--ez-fg-2); +} + +.btn-cta-link { + font-family: var(--font-display); + font-weight: 600; + font-size: 15.5px; + color: var(--ez-orange); +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 5px; + padding: 8px; + background: none; + border: none; + cursor: pointer; +} + +.mobile-menu-btn span { + display: block; + width: 24px; + height: 2px; + background: var(--ez-ink); + transition: transform 0.2s ease; +} + +.nav-mobile { + display: none; + position: fixed; + top: 91px; + right: 0; + left: 0; + background: #fff; + border-bottom: 1px solid var(--ez-line); + padding: 20px var(--container-padding); + z-index: 40; + flex-direction: column; + gap: 16px; +} + +.nav-mobile a { + color: var(--ez-ink); + font-size: 18px; + padding: 8px 0; +} + +.nav-mobile.active { + display: flex; +} + +.mobile-nav-cta { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--ez-line); +} + +/* === Buttons === */ +.btn-primary { + display: inline-block; + background: var(--ez-orange); + color: #fff; + border: none; + border-radius: 999px; + padding: 14px 28px; + font-family: var(--font-display); + font-weight: 600; + font-size: 17px; + cursor: pointer; + transition: background 0.2s ease, transform 0.1s ease; +} + +.btn-primary:hover { + background: var(--ez-orange-dark); + color: #fff; +} + +.btn-primary:active { + transform: scale(0.98); +} + +.btn-large { + padding: 16px 32px; + font-size: 18px; +} + +.btn-full { + width: 100%; +} + +.btn-secondary { + display: inline-block; + background: var(--ez-ink); + color: #fff; + border: none; + border-radius: 999px; + padding: 12px 26px; + font-family: var(--font-display); + font-weight: 600; + font-size: 17px; + cursor: pointer; + transition: background 0.2s ease; +} + +.btn-secondary:hover { + background: #2a2a30; + color: #fff; +} + +.link-cta { + font-family: var(--font-display); + font-weight: 600; + font-size: 17px; + color: var(--ez-orange); +} + +/* === Hero === */ +.hero { + position: relative; + overflow: hidden; + padding: 64px var(--container-padding) 0; + max-width: var(--container-max); + margin: 0 auto; +} + +.hero-bg-letter { + position: absolute; + right: -5%; + top: -10%; + font-family: var(--font-display); + font-weight: 600; + font-size: 500px; + color: var(--ez-lavender); + opacity: 0.15; + pointer-events: none; + z-index: 0; + line-height: 1; +} + +.hero-content { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 1.25fr 0.75fr; + gap: 24px; + align-items: end; +} + +.hero-text { + padding-bottom: 56px; +} + +.hero h1 { + font-size: 72px; + font-weight: 600; + line-height: 1.05; + letter-spacing: -0.015em; + color: var(--ez-ink); +} + +.hero-subtitle { + font-family: var(--font-display); + font-weight: 500; + color: var(--ez-lavender-deep); +} + +.hero-description { + font-size: 20px; + line-height: 1.55; + color: var(--ez-fg-2); + max-width: 560px; + margin-top: 26px; +} + +.hero-text .btn-primary { + margin-top: 28px; +} + +.hero-image { + display: flex; + justify-content: center; + align-items: flex-end; + min-height: 400px; +} + +.hero-image-placeholder { + width: 280px; +} + +/* === University Logos === */ +.uni-logos { + padding: 20px var(--container-padding) 28px; + max-width: var(--container-max); + margin: 0 auto; + border-top: 1px solid var(--ez-line); +} + +.uni-logos-header { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: 24px; + margin-bottom: 16px; + flex-wrap: wrap; +} + +.uni-logos-header h2 { + font-size: 18.5px; + font-weight: 600; + color: var(--ez-ink); + flex: 1; + min-width: 300px; +} + +.uni-logos-hint { + font-size: 15.5px; + color: var(--ez-fg-3); + white-space: nowrap; +} + +.uni-logos-grid { + display: grid; + grid-template-columns: repeat(10, 1fr); + gap: 10px; +} + +.uni-logo-item { + border: 1px solid var(--ez-line); + border-radius: 8px; + height: 60px; + padding: 8px 10px; + display: flex; + align-items: center; + justify-content: center; + background: #fff; + filter: grayscale(1); + opacity: 0.85; + cursor: pointer; + transition: all 0.2s ease; +} + +.uni-logo-item:hover { + filter: grayscale(0); + opacity: 1; + box-shadow: var(--shadow-1); +} + +.uni-logo-item svg { + max-height: 100%; + max-width: 100%; +} + +/* === Situation Section === */ +.situation { + padding: 56px 0 40px; +} + +.situation h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 6px; +} + +.section-subtitle { + font-size: 18.5px; + color: var(--ez-fg-2); + margin-bottom: 22px; +} + +.situation-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +.situation-card { + border: 1px solid var(--ez-line); + border-radius: 14px; + padding: 26px; + display: grid; + gap: 12px; + align-content: start; + color: var(--ez-ink); + transition: all 0.2s ease; +} + +.situation-card:hover { + box-shadow: var(--shadow-2); + border-color: var(--ez-orange); + color: var(--ez-ink); +} + +.card-number { + font-family: var(--font-mono); + font-size: 21px; +} + +.card-number.lavender { color: var(--ez-lavender-deep); } +.card-number.green { color: var(--ez-green); } +.card-number.orange { color: var(--ez-orange); } + +.situation-card h3 { + font-size: 21.5px; + font-weight: 600; + line-height: 1.3; +} + +.situation-card p { + font-size: 17.5px; + color: var(--ez-fg-2); +} + +.card-cta { + font-family: var(--font-display); + font-weight: 600; + font-size: 17px; + color: var(--ez-orange); +} + +/* === Game Taste Section === */ +.game-taste { + padding: 16px 0 0; +} + +.game-taste-box { + background: var(--ez-lavender-tint); + border-radius: 12px; + padding: 32px 36px; + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 36px; + align-items: center; +} + +.game-taste-content { + display: grid; + gap: 10px; + justify-items: start; +} + +.badge { + background: #fff; + border: 1px solid var(--ez-line); + border-radius: 999px; + padding: 5px 14px; + font-family: var(--font-display); + font-weight: 600; + font-size: 15px; + color: var(--ez-lavender-deep); +} + +.game-taste h2 { + font-size: 28px; + font-weight: 600; + color: var(--ez-ink); +} + +.game-taste p { + font-size: 18px; + color: var(--ez-fg-2); +} + +.game-taste-preview { + border-radius: 8px; + overflow: hidden; + box-shadow: var(--shadow-2); +} + +.game-preview-placeholder svg { + display: block; + width: 100%; +} + +/* === Two Paths Section === */ +.two-paths { + padding: 64px 0; +} + +.two-paths h2 { + font-size: 36px; + font-weight: 600; + color: var(--ez-lavender-deep); + margin-bottom: 36px; +} + +.two-paths .orange { + color: var(--ez-orange); +} + +.paths-grid { + display: grid; + grid-template-columns: 1fr 1px 1fr; + gap: 36px; + align-items: start; +} + +.path-card { + display: grid; + gap: 12px; +} + +.path-card h3 { + font-size: 22.5px; + font-weight: 600; + color: var(--ez-ink); +} + +.path-card p { + font-size: 17.5px; + color: var(--ez-fg-2); +} + +.path-price { + font-family: var(--font-mono); + font-size: 26px; + color: var(--ez-ink); +} + +.path-actions { + display: flex; + gap: 14px; + align-items: center; +} + +.path-divider { + background: var(--ez-line); + height: 100%; + min-height: 180px; +} + +.paths-note { + font-size: 17.5px; + color: var(--ez-fg-2); + margin-top: 28px; +} + +/* === Challenges Section === */ +.challenges { + padding: 0 0 56px; +} + +.challenges h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 24px; + border-top: 1px solid var(--ez-line); + padding-top: 48px; +} + +.challenges-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 28px 36px; +} + +.challenge-item { + display: grid; + grid-template-columns: 14px 1fr; + gap: 12px; + align-items: start; +} + +.chevron { + font-size: 20px; + color: var(--ez-orange); + margin-top: 2px; + font-weight: 600; +} + +.challenge-item h4 { + font-size: 19px; + font-weight: 600; + color: var(--ez-ink); +} + +.challenge-item h4.orange { + color: var(--ez-orange); +} + +.challenge-item p { + font-size: 17px; + color: var(--ez-fg-2); + margin-top: 4px; +} + +.challenges-quote { + max-width: 760px; + margin: 44px auto 0; + text-align: center; +} + +.challenges-quote p { + font-family: var(--font-display); + font-weight: 600; + font-size: 22.5px; + line-height: 1.45; + color: var(--ez-ink); +} + +.challenges-quote .link-cta { + display: inline-block; + margin-top: 14px; +} + +/* === Stories Section === */ +.stories { + padding: 56px 0; + background: var(--ez-paper-cool); +} + +.stories h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 28px; +} + +.stories-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 36px; +} + +.story-card { + display: grid; + gap: 8px; + align-content: start; +} + +.quote-mark { + font-family: var(--font-display); + font-weight: 600; + font-size: 84px; + line-height: 0.55; + color: var(--ez-lavender); + transform: scaleX(-1); +} + +.story-card h4 { + font-size: 19.5px; + font-weight: 600; + color: var(--ez-ink); +} + +.story-score { + font-family: var(--font-mono); + font-size: 16px; + color: var(--ez-orange); +} + +.story-card p { + font-size: 17px; + color: var(--ez-fg-2); +} + +.stories-footer { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid var(--ez-line); + margin-top: 32px; + padding-top: 16px; + flex-wrap: wrap; + gap: 16px; +} + +.stories-footer span { + font-size: 16px; + color: var(--ez-fg-3); +} + +/* === Mentors Section === */ +.mentors { + padding: 64px 0 56px; +} + +.mentors-content { + display: grid; + grid-template-columns: 0.9fr 1.1fr; + gap: 48px; + align-items: center; +} + +.mentors-text { + display: grid; + gap: 14px; +} + +.mentors-text h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); +} + +.mentors-text p { + font-size: 18.5px; + line-height: 1.55; + color: var(--ez-fg-2); +} + +.mentors-avatars { + display: flex; + gap: 28px; + align-items: end; + justify-content: start; +} + +.mentor { + display: grid; + gap: 10px; + justify-items: center; + text-align: center; +} + +.mentor-avatar { + width: 132px; + height: 132px; + border-radius: 50%; + overflow: hidden; +} + +.mentor-avatar.lavender-border { + border: 3px solid var(--ez-lavender); +} + +.mentor-avatar.orange-border { + border: 3px solid var(--ez-orange); +} + +.mentor-avatar svg { + width: 100%; + height: 100%; +} + +.mentor h4 { + font-size: 17.5px; + font-weight: 600; + color: var(--ez-ink); +} + +.mentor span { + font-size: 15.5px; + color: var(--ez-fg-3); +} + +/* === Guide Section === */ +.guide { + padding: 0 0 56px; +} + +.guide h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 24px; + border-top: 1px solid var(--ez-line); + padding-top: 48px; +} + +.guide-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; +} + +.guide-link { + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid var(--ez-line); + border-radius: 8px; + padding: 18px 20px; + font-family: var(--font-display); + font-weight: 600; + font-size: 18px; + color: var(--ez-ink); + transition: all 0.2s ease; +} + +.guide-link:hover { + border-color: var(--ez-orange); + box-shadow: var(--shadow-1); + color: var(--ez-ink); +} + +.guide-link .arrow { + color: var(--ez-orange); +} + +.guide > .container > .link-cta { + display: inline-block; + margin-top: 16px; +} + +/* === Learn Section === */ +.learn { + padding: 0 0 64px; +} + +.learn h2 { + font-size: 30px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 24px; + border-top: 1px solid var(--ez-line); + padding-top: 48px; +} + +.learn-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.learn-card { + display: grid; + gap: 12px; + color: var(--ez-ink); +} + +.learn-card:hover { + color: var(--ez-ink); +} + +.learn-thumbnail { + position: relative; + aspect-ratio: 16 / 10; + border-radius: 8px; + overflow: hidden; + border: 1px solid var(--ez-line); +} + +.learn-thumbnail svg { + width: 100%; + height: 100%; +} + +.play-btn { + position: absolute; + inset: 0; + margin: auto; + width: 52px; + height: 52px; + border-radius: 50%; + background: var(--ez-orange); + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 18px; +} + +.learn-card h4 { + font-size: 19px; + font-weight: 600; +} + +.learn > .container > .link-cta { + display: inline-block; + margin-top: 16px; +} + +/* === About Brief Section === */ +.about-brief { + padding: 0; +} + +.about-brief-content { + border-top: 1px solid var(--ez-line); + padding: 48px 0; + display: grid; + grid-template-columns: auto 1fr auto; + gap: 40px; + align-items: center; +} + +.about-brief-image { + height: 180px; +} + +.about-brief-image svg { + height: 100%; + width: auto; +} + +.about-brief-text { + display: grid; + gap: 8px; +} + +.about-brief-text h2 { + font-size: 26px; + font-weight: 600; + color: var(--ez-ink); +} + +.about-brief-text p { + font-size: 18px; + color: var(--ez-fg-2); + max-width: 560px; +} + +/* === Contact Section === */ +.contact { + background: var(--ez-lavender-tint); + padding: 56px 0; +} + +.contact-content { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + gap: 56px; + align-items: center; +} + +.contact-form { + display: grid; + gap: 14px; + max-width: 440px; +} + +.contact-form h2 { + font-size: 32px; + font-weight: 600; + color: var(--ez-ink); + text-align: center; +} + +.contact-form form { + display: grid; + gap: 12px; +} + +.contact-form input { + height: 46px; + border: 1px solid var(--ez-line); + border-radius: 8px; + padding: 0 14px; + font-size: 17.5px; + background: #fff; +} + +.contact-form input:focus { + outline: none; + border-color: var(--ez-orange); +} + +.consent { + display: flex; + gap: 10px; + align-items: flex-start; + font-size: 13px; + line-height: 1.5; + color: var(--ez-fg-3); + cursor: pointer; +} + +.checkbox-icon { + flex: none; + width: 18px; + height: 18px; + border-radius: 5px; + background: var(--ez-orange); + display: flex; + align-items: center; + justify-content: center; + margin-top: 2px; + color: #fff; + font-size: 12px; + font-weight: 600; +} + +.contact-info { + display: grid; + gap: 16px; + font-size: 17.5px; + color: var(--ez-fg-2); +} + +.contact-item { + display: flex; + align-items: center; + gap: 10px; +} + +.contact-icon { + font-size: 21px; +} + +.phone-icon { color: var(--ez-orange); } +.whatsapp-icon { color: var(--ez-green); } +.clock-icon { color: var(--ez-orange); } + +/* === Footer === */ +.footer { + padding: 40px 0 20px; + border-top: 1px solid var(--ez-line); +} + +.footer-grid { + display: grid; + grid-template-columns: auto 1fr 1fr 1fr 1fr; + gap: 40px; + align-items: start; +} + +.footer-brand { + display: grid; + gap: 8px; + justify-items: start; +} + +.footer-tagline { + font-family: var(--font-display); + font-weight: 600; + font-size: 15px; + color: var(--ez-orange); +} + +.footer-links { + display: grid; + gap: 8px; + font-size: 14px; +} + +.footer-links h4 { + font-size: 15px; + font-weight: 600; + color: var(--ez-ink); + margin-bottom: 4px; +} + +.footer-links a { + color: var(--ez-fg-2); +} + +.footer-links a:hover { + color: var(--ez-orange); +} + +.footer-divider { + height: 1px; + background: var(--ez-orange); + margin: 28px 0 14px; +} + +.footer-bottom { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + color: var(--ez-fg-2); +} + +.footer-contact { + display: flex; + align-items: center; + gap: 8px; +} + +.footer-sep { + color: var(--ez-line); +} + +.footer-social { + display: flex; + gap: 12px; + color: var(--ez-fg-3); + font-size: 17px; +} + +.footer-social a { + color: var(--ez-fg-3); + transition: color 0.2s ease; +} + +.footer-social a:hover { + color: var(--ez-orange); +} + +.footer-copyright { + text-align: center; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid var(--ez-line); + font-size: 14px; + color: var(--ez-fg-3); +} + +/* === WhatsApp Float === */ +.whatsapp-float { + position: fixed; + bottom: 28px; + left: 28px; + z-index: 60; + width: 56px; + height: 56px; + border-radius: 50%; + background: var(--ez-green); + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-2); + transition: transform 0.2s ease; +} + +.whatsapp-float:hover { + transform: scale(1.08); +} + +/* === Animations === */ +@media (prefers-reduced-motion: no-preference) { + .situation-card, + .guide-link, + .learn-card, + .uni-logo-item { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease, border-color 0.2s ease; + } + + .situation-card.visible, + .guide-link.visible, + .learn-card.visible, + .uni-logo-item.visible { + opacity: 1; + transform: translateY(0); + } +} + +/* === Responsive Design === */ +@media (max-width: 1200px) { + :root { + --container-padding: 40px; + } + + .uni-logos-grid { + grid-template-columns: repeat(5, 1fr); + } + + .hero h1 { + font-size: 60px; + } +} + +@media (max-width: 1024px) { + .nav-desktop { + display: none; + } + + .mobile-menu-btn { + display: flex; + } + + .hero-content { + grid-template-columns: 1fr; + } + + .hero-image { + display: none; + } + + .hero-text { + padding-bottom: 40px; + } + + .situation-cards { + grid-template-columns: 1fr; + gap: 16px; + } + + .game-taste-box { + grid-template-columns: 1fr; + gap: 24px; + } + + .paths-grid { + grid-template-columns: 1fr; + gap: 24px; + } + + .path-divider { + display: none; + } + + .challenges-grid { + grid-template-columns: repeat(2, 1fr); + } + + .stories-grid { + grid-template-columns: 1fr; + gap: 24px; + } + + .mentors-content { + grid-template-columns: 1fr; + gap: 32px; + } + + .mentors-avatars { + justify-content: center; + } + + .guide-grid { + grid-template-columns: repeat(2, 1fr); + } + + .learn-grid { + grid-template-columns: repeat(2, 1fr); + } + + .about-brief-content { + grid-template-columns: 1fr; + text-align: center; + justify-items: center; + } + + .contact-content { + grid-template-columns: 1fr; + gap: 32px; + } + + .contact-form { + max-width: 100%; + } + + .footer-grid { + grid-template-columns: repeat(2, 1fr); + gap: 32px; + } +} + +@media (max-width: 768px) { + :root { + --container-padding: 24px; + } + + .hero { + padding-top: 40px; + } + + .hero h1 { + font-size: 42px; + } + + .hero-description { + font-size: 18px; + } + + .hero-bg-letter { + font-size: 300px; + } + + .uni-logos-grid { + grid-template-columns: repeat(4, 1fr); + } + + .uni-logos-header { + flex-direction: column; + align-items: flex-start; + } + + .uni-logos-hint { + white-space: normal; + } + + .situation h2, + .two-paths h2, + .challenges h2, + .stories h2, + .mentors-text h2, + .guide h2, + .learn h2 { + font-size: 26px; + } + + .game-taste h2 { + font-size: 24px; + } + + .challenges-grid { + grid-template-columns: 1fr; + } + + .guide-grid { + grid-template-columns: 1fr; + } + + .learn-grid { + grid-template-columns: 1fr; + } + + .mentors-avatars { + flex-wrap: wrap; + gap: 20px; + } + + .mentor-avatar { + width: 100px; + height: 100px; + } + + .contact-form h2 { + font-size: 26px; + } + + .footer-grid { + grid-template-columns: 1fr; + gap: 24px; + } + + .footer-bottom { + flex-direction: column; + gap: 16px; + text-align: center; + } + + .stories-footer { + flex-direction: column; + text-align: center; + } +} + +@media (max-width: 480px) { + .hero h1 { + font-size: 34px; + } + + .hero-bg-letter { + font-size: 200px; + right: -15%; + } + + .btn-large { + padding: 14px 24px; + font-size: 16px; + } + + .uni-logos-grid { + grid-template-columns: repeat(3, 1fr); + } + + .header-inner { + padding: 14px var(--container-padding); + } + + .logo-mark svg { + width: 44px; + height: 44px; + } + + .logo-text { + font-size: 20px; + } + + .header-cta .phone-number { + display: none; + } + + .whatsapp-float { + bottom: 20px; + left: 20px; + width: 50px; + height: 50px; + } +} + +/* === Focus States for Accessibility === */ +a:focus-visible, +button:focus-visible, +input:focus-visible { + outline: 2px solid var(--ez-orange); + outline-offset: 2px; +} + +/* === Print Styles === */ +@media print { + .header, + .whatsapp-float, + .mobile-menu-btn, + .nav-mobile { + display: none; + } + + body { + font-size: 12pt; + } +} \ No newline at end of file