diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f93650 --- /dev/null +++ b/index.html @@ -0,0 +1,376 @@ + + + + + + Lotus Real | השקעות נדל"ן בתל אביב + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+

LOTUS S.I INVESTMENTS LTD

+

השקעות נדל"ן
בלב תל אביב

+

מומחיות, ניסיון ואמינות בעולם הנדל"ן הישראלי

+
+ לפרויקטים שלנו + דברו איתנו +
+
+ +
+ +
+
+
+ +
+ אודות החברה +

בונים עתיד,
משקיעים בהווה

+

+ LOTUS S.I INVESTMENTS LTD, בניהולו של שניר עובדיה, היא חברת נדל"ן והשקעות מובילה הפועלת בלב המטרופולין הישראלי. אנו מתמחים באיתור הזדמנויות השקעה, פיתוח פרויקטים וליווי משקיעים לאורך כל הדרך. +

+

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

+
+
+ + שקיפות מלאה +
+
+ + מקצועיות +
+
+ + יחס אישי +
+
+
+
+
+
+ +
+
+
+ היכן אנחנו פועלים +

אזורי פעילות

+
+
+
+
+ +
+
+

תל אביב

+

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

+ אזור פעילות מרכזי +
+
+
+
+ +
+
+

גוש דן

+

רמת גן, גבעתיים, בני ברק והרצליה — ערי הלוויין עם פוטנציאל צמיחה משמעותי.

+
+
+
+
+ +
+
+

השרון

+

נתניה, רעננה, כפר סבא והוד השרון — אזור מתפתח במהירות.

+
+
+
+
+ +
+
+

ירושלים

+

הזדמנויות ייחודיות בנדל"ן למגורים ומסחר, עם ביקוש יציב.

+
+
+
+
+
+ +
+
+ הפרויקטים שלנו +

נכסים נבחרים

+
+
+
+
+ +
+
+ מגורי יוקרה +

מגדל רוטשילד

+

פרויקט דירות יוקרה בשדרות רוטשילד, 24 קומות, נוף לים

+ בשיווק +
+
+
+
+
+ +
+
+ מסחרי +

קומפלקס הבורסה

+

מרכז משרדים ומסחר ברמת גן

+ הושלם +
+
+
+
+
+ +
+
+ התחדשות עירונית +

פינוי בינוי פלורנטין

+

120 יחידות דיור חדשות

+ בתכנון +
+
+
+
+
+ +
+
+ מגורים +

גני הרצליה

+

פרויקט בוטיק בהרצליה פיתוח

+ בביצוע +
+
+
+
+
+ +
+
+ מיזם משותף +

מתחם יפו העתיקה

+

שימור ופיתוח מבנים היסטוריים למגורים ומסחר, 45 יחידות

+ בתכנון +
+
+
+
+
+ +
+
+
+
+ בואו נדבר +

יצירת קשר

+

+ מעוניינים לשמוע על הזדמנויות השקעה? מחפשים שותפות עסקית? אנחנו כאן בשבילכם. +

+
+
+ + תל אביב, ישראל +
+
+ + + 03-123-4567 +
+
+ + + info@lotus-real.com +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d93aecf --- /dev/null +++ b/script.js @@ -0,0 +1,188 @@ +(function() { + 'use strict'; + + // Intersection Observer for scroll animations + const observerOptions = { + root: null, + rootMargin: '0px 0px -50px 0px', + threshold: 0.1 + }; + + const animateOnScroll = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + const delay = entry.target.dataset.delay || 0; + setTimeout(() => { + entry.target.classList.add('visible'); + }, delay * 100); + animateOnScroll.unobserve(entry.target); + } + }); + }, observerOptions); + + // Observe elements + document.querySelectorAll('.about-content, .area-card, .project-card, .contact-form').forEach((el, index) => { + el.dataset.delay = index % 4; + animateOnScroll.observe(el); + }); + + // Header scroll effect + const header = document.querySelector('.site-header'); + + window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + header.classList.add('scrolled'); + } else { + header.classList.remove('scrolled'); + } + }, { passive: true }); + + // Mobile navigation + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const isActive = navToggle.classList.toggle('active'); + navLinks.classList.toggle('active'); + navToggle.setAttribute('aria-expanded', isActive); + document.body.style.overflow = isActive ? 'hidden' : ''; + }); + + // Close mobile nav on link click + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.classList.remove('active'); + navLinks.classList.remove('active'); + navToggle.setAttribute('aria-expanded', 'false'); + document.body.style.overflow = ''; + }); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const href = this.getAttribute('href'); + if (href === '#') return; + + e.preventDefault(); + const target = document.querySelector(href); + if (target) { + const headerHeight = header ? header.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight; + + window.scrollTo({ + top: targetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Form handling with validation and accessibility + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + // Create live region for form announcements + const liveRegion = document.createElement('div'); + liveRegion.setAttribute('aria-live', 'polite'); + liveRegion.setAttribute('aria-atomic', 'true'); + liveRegion.className = 'sr-only'; + contactForm.appendChild(liveRegion); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Basic validation + const name = this.querySelector('#name'); + const email = this.querySelector('#email'); + const message = this.querySelector('#message'); + + let isValid = true; + const errors = []; + + // Clear previous errors + this.querySelectorAll('.form-error').forEach(el => el.remove()); + [name, email, message].forEach(field => { + if (field) { + field.removeAttribute('aria-invalid'); + field.removeAttribute('aria-describedby'); + } + }); + + // Validate required fields + if (name && !name.value.trim()) { + showFieldError(name, 'נא למלא שם מלא'); + isValid = false; + errors.push('שם מלא'); + } + + if (email && !email.value.trim()) { + showFieldError(email, 'נא למלא כתובת דוא"ל'); + isValid = false; + errors.push('דוא"ל'); + } else if (email && email.value && !isValidEmail(email.value)) { + showFieldError(email, 'נא להזין כתובת דוא"ל תקינה'); + isValid = false; + errors.push('דוא"ל תקין'); + } + + if (message && !message.value.trim()) { + showFieldError(message, 'נא למלא הודעה'); + isValid = false; + errors.push('הודעה'); + } + + if (!isValid) { + liveRegion.textContent = 'יש לתקן את השדות הבאים: ' + errors.join(', '); + return; + } + + const submitBtn = this.querySelector('.btn-submit'); + const originalText = submitBtn.textContent; + + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + liveRegion.textContent = 'שולח את הטופס...'; + + // Simulate form submission + setTimeout(() => { + submitBtn.textContent = 'נשלח בהצלחה!'; + submitBtn.style.background = '#4a9c6d'; + liveRegion.textContent = 'ההודעה נשלחה בהצלחה!'; + + this.reset(); + + setTimeout(() => { + submitBtn.textContent = originalText; + submitBtn.style.background = ''; + submitBtn.disabled = false; + }, 3000); + }, 1500); + }); + + function showFieldError(field, message) { + const errorId = field.id + '-error'; + const errorEl = document.createElement('span'); + errorEl.className = 'form-error'; + errorEl.id = errorId; + errorEl.textContent = message; + field.parentNode.appendChild(errorEl); + field.setAttribute('aria-invalid', 'true'); + field.setAttribute('aria-describedby', errorId); + } + } + + function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + } + + // Add loaded class + window.addEventListener('load', () => { + document.body.classList.add('loaded'); + }); + +})(); diff --git a/style.css b/style.css new file mode 100644 index 0000000..90fd674 --- /dev/null +++ b/style.css @@ -0,0 +1,1046 @@ +:root { + --black: #0a0a0a; + --dark: #121212; + --dark-alt: #181818; + --gray-dark: #2a2a2a; + --gray: #999; + --gray-light: #b0b0b0; + --white: #f5f5f5; + --white-pure: #fff; + --gold: #c9a962; + --gold-light: #d4b978; + --gold-dark: #b8944d; + + --font-body: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif; + --font-display: 'Playfair Display', Georgia, serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 3.5rem; + --space-xl: 6rem; + + --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + font-weight: 400; + font-size: 1rem; + line-height: 1.7; + color: var(--white); + background-color: var(--black); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Skip Link */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: var(--space-sm); + z-index: 9999; + padding: var(--space-sm) var(--space-md); + background: var(--gold); + color: var(--black); + font-weight: 500; + border-radius: 0 0 4px 4px; + transition: top var(--transition); +} + +.skip-link:focus { + top: 0; + outline: 3px solid var(--white); + outline-offset: 2px; +} + +.container { + width: 100%; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +a { + color: inherit; + text-decoration: none; + transition: color var(--transition); +} + +a:hover { + color: var(--gold); +} + +/* Focus states */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 2px; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +/* Typography */ +h1, h2, h3, h4 { + font-weight: 500; + line-height: 1.2; +} + +.section-label { + display: block; + font-size: 0.8rem; + font-weight: 500; + color: var(--gold); + margin-block-end: var(--space-sm); +} + +.section-title { + font-family: var(--font-display); + font-size: clamp(2rem, 5vw, 3.5rem); + font-weight: 500; + color: var(--white-pure); + margin-block-end: var(--space-md); +} + +.gold-text { + color: var(--gold); +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 1rem 2rem; + font-family: var(--font-body); + font-size: 0.9rem; + font-weight: 500; + border: none; + border-radius: 2px; + cursor: pointer; + transition: all var(--transition); +} + +.btn-primary { + background: var(--gold); + color: var(--black); +} + +.btn-primary:hover { + background: var(--gold-light); + color: var(--black); + transform: translateY(-2px); +} + +.btn-secondary { + background: transparent; + color: var(--white); + border: 1px solid var(--gray-dark); +} + +.btn-secondary:hover { + border-color: var(--gold); + color: var(--gold); +} + +/* Header */ +.site-header { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + padding: var(--space-sm) 0; + background: linear-gradient(to bottom, var(--black), transparent); + transition: background var(--transition); +} + +.site-header.scrolled { + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); +} + +.nav-container { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin-inline: auto; + padding-inline: var(--space-md); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.logo-icon { + width: 40px; + height: 40px; +} + +.logo-text { + font-family: var(--font-display); + font-size: 1.25rem; + font-weight: 500; + color: var(--white-pure); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: var(--space-xs); +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--white); + transition: var(--transition); +} + +.nav-links { + display: flex; + align-items: center; + gap: var(--space-md); + list-style: none; +} + +.nav-links a { + font-size: 0.9rem; + font-weight: 400; + color: var(--gray-light); + transition: color var(--transition); +} + +.nav-links a:hover { + color: var(--white); +} + +.nav-cta { + padding: 0.6rem 1.2rem; + background: var(--gold); + color: var(--black) !important; + border-radius: 2px; +} + +.nav-cta:hover { + background: var(--gold-light); + color: var(--black) !important; +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse at 30% 20%, rgba(201, 169, 98, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 70% 80%, rgba(201, 169, 98, 0.05) 0%, transparent 50%), + linear-gradient(135deg, var(--black) 0%, var(--dark) 100%); +} + +.hero-lotus { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 600px; + height: 600px; + background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.04) 0%, transparent 70%); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 10 C40 50 25 110 100 190 C175 110 160 50 100 10' fill='white'/%3E%3C/svg%3E"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 10 C40 50 25 110 100 190 C175 110 160 50 100 10' fill='white'/%3E%3C/svg%3E"); + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} + +.hero-content { + position: relative; + text-align: center; + padding: var(--space-xl) var(--space-md); + max-width: 900px; +} + +.hero-label { + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.3em; + color: var(--gold); + margin-block-end: var(--space-md); + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.8s ease-out 0.2s forwards; +} + +.hero-title { + font-family: var(--font-display); + font-size: clamp(2.5rem, 8vw, 5rem); + font-weight: 500; + line-height: 1.1; + margin-block-end: var(--space-md); + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.8s ease-out 0.4s forwards; +} + +.hero-subtitle { + font-size: 1.1rem; + color: var(--gray-light); + margin-block-end: var(--space-lg); + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.8s ease-out 0.6s forwards; +} + +.hero-actions { + display: flex; + gap: var(--space-sm); + justify-content: center; + flex-wrap: wrap; + opacity: 0; + transform: translateY(20px); + animation: fadeUp 0.8s ease-out 0.8s forwards; +} + +.hero-scroll { + position: absolute; + bottom: var(--space-md); + left: 50%; + transform: translateX(-50%); + color: var(--gray); + animation: bounce 2s ease-in-out 1; +} + +.hero-scroll svg { + width: 24px; + height: 24px; +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } + 40% { transform: translateX(-50%) translateY(-10px); } + 60% { transform: translateX(-50%) translateY(-5px); } +} + +/* About */ +.about { + padding: var(--space-xl) 0; + background: var(--dark); +} + +.about-grid { + display: grid; + grid-template-columns: 0.8fr 1.2fr; + gap: var(--space-lg); + align-items: center; +} + +.about-visual { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.about-lotus { + width: 100%; + max-width: 300px; + height: auto; +} + +.about-content { + opacity: 0; + transform: translateX(30px); + transition: all var(--transition-slow); +} + +.about-content.visible { + opacity: 1; + transform: translateX(0); +} + +.about-text { + color: var(--gray-light); + margin-block-end: var(--space-sm); + font-size: 1.05rem; + max-width: 55ch; +} + +.about-values { + display: flex; + gap: var(--space-md); + margin-block-start: var(--space-md); + padding-block-start: var(--space-md); + border-top: 1px solid var(--gray-dark); + flex-wrap: wrap; +} + +.value-item { + display: flex; + align-items: center; + gap: var(--space-xs); +} + +.value-item svg { + width: 28px; + height: 28px; + flex-shrink: 0; +} + +.value-item span { + font-size: 0.9rem; + font-weight: 500; + color: var(--white); +} + +/* Areas */ +.areas { + padding: var(--space-xl) 0; + background: var(--black); +} + +.areas-header { + margin-block-end: var(--space-lg); +} + +.areas-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto auto; + gap: var(--space-md); +} + +.area-card { + padding: var(--space-md); + background: var(--dark); + border: 1px solid var(--gray-dark); + transition: all var(--transition); + opacity: 0; + transform: translateY(30px); + display: flex; + gap: var(--space-md); + align-items: flex-start; +} + +.area-card.visible { + opacity: 1; + transform: translateY(0); +} + +.area-card:hover { + border-color: var(--gold); +} + +.area-featured { + grid-column: span 2; + background: linear-gradient(135deg, var(--dark) 0%, var(--dark-alt) 100%); + border-color: rgba(201, 169, 98, 0.3); +} + +.area-featured .area-icon { + color: var(--gold); +} + +.area-icon { + width: 56px; + height: 56px; + flex-shrink: 0; + color: var(--gray-light); + transition: color var(--transition); +} + +.area-card:hover .area-icon { + color: var(--gold); +} + +.area-content { + flex: 1; +} + +.area-card h3 { + font-size: 1.2rem; + font-weight: 500; + color: var(--white-pure); + margin-block-end: var(--space-xs); +} + +.area-card p { + font-size: 0.9rem; + color: var(--gray-light); + line-height: 1.6; +} + +.area-tag { + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + color: var(--gold); + margin-block-start: var(--space-sm); + padding: 0.3rem 0.6rem; + background: rgba(201, 169, 98, 0.1); + border-radius: 2px; +} + +/* Projects */ +.projects { + padding: var(--space-xl) 0; + background: var(--dark); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 280px; + gap: var(--space-md); + margin-block-start: var(--space-lg); +} + +.project-card { + position: relative; + overflow: hidden; + border: 1px solid var(--gray-dark); + transition: all var(--transition); + grid-column: span 2; + opacity: 0; + transform: scale(0.95); +} + +.project-card.visible { + opacity: 1; + transform: scale(1); +} + +.project-card:hover { + border-color: var(--gold); +} + +.project-large { + grid-column: span 2; + grid-row: span 2; +} + +.project-wide { + grid-column: span 4; +} + +.project-visual { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + transition: transform var(--transition-slow); +} + +.project-bg { + position: absolute; + inset: 0; + background: var(--accent, var(--dark-alt)); + opacity: 0.6; +} + +.project-icon { + position: relative; + width: 60%; + height: 60%; + max-width: 120px; + color: var(--white); + opacity: 0.5; +} + +.project-large .project-icon { + max-width: 150px; +} + +.project-card:hover .project-visual { + transform: scale(1.05); +} + +.project-info { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: var(--space-md); + background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.6) 50%, transparent 100%); +} + +.project-tag { + font-size: 0.75rem; + font-weight: 500; + color: var(--gold); + margin-block-end: var(--space-xs); +} + +.project-info h3 { + font-size: 1.25rem; + font-weight: 500; + color: var(--white-pure); + margin-block-end: var(--space-xs); +} + +.project-info p { + font-size: 0.85rem; + color: var(--gray-light); + margin-block-end: var(--space-xs); +} + +.project-status { + display: inline-block; + font-size: 0.75rem; + font-weight: 500; + padding: 0.3rem 0.8rem; + border-radius: 2px; + width: fit-content; +} + +.status-active { + background: rgba(201, 169, 98, 0.2); + color: var(--gold); +} + +.status-complete { + background: rgba(74, 156, 109, 0.2); + color: #6abf8a; +} + +.status-planning { + background: rgba(100, 140, 180, 0.2); + color: #8ab4d4; +} + +.status-progress { + background: rgba(180, 140, 100, 0.2); + color: #d4a878; +} + +/* Contact */ +.contact { + padding: var(--space-xl) 0; + background: var(--black); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1.3fr; + gap: var(--space-xl); + align-items: start; +} + +.contact-info { + position: relative; +} + +.contact-text { + font-size: 1.1rem; + color: var(--gray-light); + margin-block-end: var(--space-md); + max-width: 55ch; +} + +.contact-details { + font-style: normal; + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--space-sm); + color: var(--white); +} + +.contact-item svg { + width: 20px; + height: 20px; + color: var(--gold); + flex-shrink: 0; +} + +.contact-item a:hover { + color: var(--gold); +} + +.contact-decoration { + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 180px; + height: 180px; + pointer-events: none; +} + +.contact-form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-sm); + padding: var(--space-md); + background: var(--dark); + border: 1px solid var(--gray-dark); + opacity: 0; + transform: translateY(30px); + transition: all var(--transition-slow); +} + +.contact-form.visible { + opacity: 1; + transform: translateY(0); +} + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.form-group-full { + grid-column: span 2; +} + +.form-group label { + font-size: 0.85rem; + font-weight: 500; + color: var(--white); +} + +.form-group input, +.form-group select, +.form-group textarea { + padding: 0.9rem 1rem; + font-family: var(--font-body); + font-size: 1rem; + color: var(--white); + background: var(--dark-alt); + border: 1px solid var(--gray-dark); + border-radius: 2px; + transition: border-color var(--transition); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--gold); +} + +.form-group input[aria-invalid="true"], +.form-group textarea[aria-invalid="true"] { + border-color: #c94a4a; +} + +.form-group select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b0b0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 1rem center; + padding-inline-start: 2.5rem; +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +.form-error { + font-size: 0.8rem; + color: #e57373; + margin-block-start: 0.25rem; +} + +.btn-submit { + grid-column: span 2; + margin-block-start: var(--space-sm); +} + +/* Screen reader only */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Footer */ +.site-footer { + padding: var(--space-lg) 0 var(--space-md); + background: var(--dark); + border-top: 1px solid var(--gray-dark); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + padding-block-end: var(--space-md); + border-bottom: 1px solid var(--gray-dark); +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.footer-logo { + width: 40px; + height: 40px; +} + +.footer-name { + font-weight: 500; + color: var(--white); + font-size: 0.95rem; +} + +.footer-tagline { + font-size: 0.85rem; + color: var(--gray-light); +} + +.footer-links { + display: flex; + gap: var(--space-md); +} + +.footer-links a { + font-size: 0.9rem; + color: var(--gray-light); +} + +.footer-links a:hover { + color: var(--gold); +} + +.footer-bottom { + padding-block-start: var(--space-md); + text-align: center; +} + +.footer-bottom p { + font-size: 0.85rem; + color: var(--gray); +} + +/* Tablet breakpoint */ +@media (max-width: 1024px) { + .projects-grid { + grid-template-columns: repeat(2, 1fr); + } + + .project-card, + .project-large { + grid-column: span 1; + grid-row: span 1; + } + + .project-wide { + grid-column: span 2; + } +} + +/* Mobile Navigation */ +@media (max-width: 768px) { + .nav-toggle { + display: flex; + z-index: 1001; + } + + .nav-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .nav-toggle.active span:nth-child(2) { + opacity: 0; + } + + .nav-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-end: 0; + width: 280px; + height: 100vh; + flex-direction: column; + justify-content: center; + gap: var(--space-md); + background: var(--dark); + transform: translateX(100%); + transition: transform var(--transition); + border-inline-start: 1px solid var(--gray-dark); + } + + [dir="rtl"] .nav-links { + transform: translateX(-100%); + } + + .nav-links.active { + transform: translateX(0); + } + + .nav-links a { + font-size: 1.1rem; + } + + .about-grid { + grid-template-columns: 1fr; + } + + .about-visual { + order: -1; + } + + .about-lotus { + max-width: 200px; + } + + .about-values { + gap: var(--space-sm); + } + + .areas-grid { + grid-template-columns: 1fr; + } + + .area-featured { + grid-column: span 1; + } + + .area-card { + flex-direction: column; + align-items: flex-start; + gap: var(--space-sm); + } + + .projects-grid { + grid-template-columns: 1fr; + grid-auto-rows: 250px; + } + + .project-card, + .project-large, + .project-wide { + grid-column: span 1; + grid-row: span 1; + } + + .contact-grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } + + .contact-decoration { + display: none; + } + + .contact-form { + grid-template-columns: 1fr; + } + + .form-group-full { + grid-column: span 1; + } + + .btn-submit { + grid-column: span 1; + } + + .footer-content { + flex-direction: column; + gap: var(--space-md); + text-align: center; + } + + .footer-brand { + flex-direction: column; + } + + .footer-links { + flex-wrap: wrap; + justify-content: center; + gap: var(--space-sm); + } +} + +@media (max-width: 480px) { + :root { + --space-md: 1.5rem; + --space-lg: 2.5rem; + --space-xl: 4rem; + } + + .hero-actions { + flex-direction: column; + width: 100%; + padding-inline: var(--space-md); + } + + .btn { + width: 100%; + } + + .about-values { + flex-direction: column; + } +}