diff --git a/index.html b/index.html new file mode 100644 index 0000000..f73e782 --- /dev/null +++ b/index.html @@ -0,0 +1,285 @@ + + + + + + מרכז האיקידו הישראלי | כפר סבא + + + + + + + + + + + + + + + + + +
+
+ + +
+
+

כפר סבא · מתחם חדש

+

+ מרכז האיקידו + הישראלי +

+

אמנות התנועה וההרמוניה. דרך חדשה להכיר את עצמך.

+ + התחילו לתרגל + + +
+ +
+ +
+
+
+
+ + +
+
+
+

אודות המרכז

+

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

+

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

+

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

+
+
+
+ +
+
+

הפילוסופיה שלנו

+
+
+
+ +
+

אי — 合

+

התאמה והרמוניה. לא להתנגד לכוח, אלא להתמזג איתו ולהפנות אותו.

+
+
+
+ +
+

קי — 気

+

אנרגיית החיים. לחבר בין הנשימה, התנועה והכוונה לזרימה אחת.

+
+
+
+ +
+

דו — 道

+

הדרך. מסע מתמשך של למידה, צמיחה והתפתחות אישית.

+
+
+
+
+ +
+
+
+
+

הניצחון האמיתי הוא ניצחון על עצמך

+
+
— מוריהיי אואשיבה, מייסד האיקידו
+
+
+
+ +
+
+

לוח אימונים

+
+
+
+ ראשון + מתחילים +
+
18:00 — 19:30
+

שיעור בסיסי — עקרונות יסוד ונפילות

+
+
+
+ שלישי + כל הרמות +
+
19:00 — 20:30
+

אימון משולב — טכניקות וזרימה

+
+
+
+ חמישי + מתקדמים +
+
19:00 — 21:00
+

אימון עומק — רנדורי ויישומים

+
+
+
+ שבת + כל הרמות +
+
09:00 — 11:00
+

אימון בוקר — נשימה, מדיטציה ותרגול

+
+
+

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

+
+
+ +
+
+
+

בואו להתאמן

+

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

+
+
+ + כפר סבא [הכתובת תעודכן בקרוב] +
+
+ + [טלפון יעודכן בקרוב] +
+
+ + [דוא״ל יעודכן בקרוב] +
+
+
+
+ + + +
+
+ + +
+
+ + + +
+
+ + +
+ +
+
+
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..35179a7 --- /dev/null +++ b/script.js @@ -0,0 +1,266 @@ +(function() { + 'use strict'; + + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Update year in footer + const yearEl = document.getElementById('current-year'); + if (yearEl) { + yearEl.textContent = new Date().getFullYear(); + } + + // Custom cursor + const cursor = document.querySelector('.cursor-follower'); + let mouseX = 0, mouseY = 0; + let cursorX = 0, cursorY = 0; + let cursorVisible = false; + let animationFrameId = null; + + if (cursor && !prefersReducedMotion && window.matchMedia('(pointer: fine)').matches) { + function startCursorAnimation() { + if (animationFrameId) return; + animateCursor(); + } + + function stopCursorAnimation() { + if (animationFrameId) { + cancelAnimationFrame(animationFrameId); + animationFrameId = null; + } + } + + document.addEventListener('mousemove', (e) => { + mouseX = e.clientX; + mouseY = e.clientY; + if (!cursorVisible) { + cursorVisible = true; + cursor.classList.add('active'); + startCursorAnimation(); + } + }); + + document.addEventListener('mouseleave', () => { + cursorVisible = false; + cursor.classList.remove('active'); + stopCursorAnimation(); + }); + + const interactiveElements = document.querySelectorAll('a, button, input, textarea, [tabindex]'); + interactiveElements.forEach(el => { + el.addEventListener('mouseenter', () => cursor.classList.add('hover')); + el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); + }); + + function animateCursor() { + const ease = 0.15; + cursorX += (mouseX - cursorX) * ease; + cursorY += (mouseY - cursorY) * ease; + cursor.style.left = cursorX + 'px'; + cursor.style.top = cursorY + 'px'; + if (cursorVisible) { + animationFrameId = requestAnimationFrame(animateCursor); + } + } + } + + // Navigation scroll effect + const nav = document.querySelector('.main-nav'); + + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + nav.classList.add('scrolled'); + } else { + nav.classList.remove('scrolled'); + } + }, { passive: true }); + + // Mobile navigation toggle + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + if (navToggle && navLinks) { + navToggle.addEventListener('click', () => { + const isOpen = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isOpen); + navLinks.classList.toggle('open'); + document.body.style.overflow = isOpen ? '' : 'hidden'; + }); + + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + }); + }); + + // Close on escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navLinks.classList.contains('open')) { + navToggle.setAttribute('aria-expanded', 'false'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + navToggle.focus(); + } + }); + } + + // Reveal animations with Intersection Observer + if (!prefersReducedMotion) { + const reveals = document.querySelectorAll('.reveal'); + let revealDelay = 0; + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setTimeout(() => { + entry.target.classList.add('visible'); + }, revealDelay); + revealDelay += 80; + setTimeout(() => { revealDelay = 0; }, 500); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' + }); + + reveals.forEach(el => revealObserver.observe(el)); + } else { + document.querySelectorAll('.reveal').forEach(el => { + el.classList.add('visible'); + }); + } + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + const offsetTop = target.offsetTop - 80; + window.scrollTo({ + top: offsetTop, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + // Move focus to target for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Form handling with validation + const contactForm = document.getElementById('contact-form'); + if (contactForm) { + const nameInput = contactForm.querySelector('#name'); + const emailInput = contactForm.querySelector('#email'); + + function validateField(input, errorEl) { + let isValid = true; + let message = ''; + + if (input.required && !input.value.trim()) { + isValid = false; + message = 'שדה חובה'; + } else if (input.type === 'email' && input.value) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(input.value)) { + isValid = false; + message = 'כתובת דוא״ל לא תקינה'; + } + } + + if (errorEl) { + errorEl.textContent = message; + } + input.classList.toggle('error', !isValid); + return isValid; + } + + [nameInput, emailInput].forEach(input => { + if (input) { + const errorEl = input.parentElement.querySelector('.error-message'); + input.addEventListener('blur', () => validateField(input, errorEl)); + input.addEventListener('input', () => { + if (input.classList.contains('error')) { + validateField(input, errorEl); + } + }); + } + }); + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const nameError = nameInput.parentElement.querySelector('.error-message'); + const emailError = emailInput.parentElement.querySelector('.error-message'); + + const nameValid = validateField(nameInput, nameError); + const emailValid = validateField(emailInput, emailError); + + if (!nameValid || !emailValid) { + const firstInvalid = contactForm.querySelector('.error'); + if (firstInvalid) firstInvalid.focus(); + return; + } + + const btn = this.querySelector('.submit-btn'); + const btnText = btn.querySelector('span'); + const status = this.querySelector('.form-status'); + const originalText = btnText.textContent; + + btnText.textContent = 'שולח...'; + btn.disabled = true; + + // Simulate submission + setTimeout(() => { + btnText.textContent = 'נשלח בהצלחה!'; + btn.classList.add('success'); + status.textContent = 'תודה! נחזור אליכם בהקדם.'; + + setTimeout(() => { + btnText.textContent = originalText; + btn.classList.remove('success'); + btn.disabled = false; + status.textContent = ''; + contactForm.reset(); + // Clear any error states + contactForm.querySelectorAll('.error').forEach(el => el.classList.remove('error')); + contactForm.querySelectorAll('.error-message').forEach(el => el.textContent = ''); + }, 3000); + }, 1500); + }); + } + + // Kanji rotation on scroll (only if motion is allowed) + if (!prefersReducedMotion) { + const kanji = document.querySelector('.kanji-overlay'); + const aboutSection = document.querySelector('.about'); + + if (kanji && aboutSection) { + const kanjiObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + window.addEventListener('scroll', handleKanjiScroll, { passive: true }); + } else { + window.removeEventListener('scroll', handleKanjiScroll); + } + }); + }, { threshold: 0 }); + + function handleKanjiScroll() { + const rect = aboutSection.getBoundingClientRect(); + const progress = 1 - (rect.bottom / (window.innerHeight + rect.height)); + const rotation = Math.max(0, Math.min(progress * 10, 10)); + const isRTL = document.documentElement.dir === 'rtl'; + const translateX = isRTL ? '50%' : '-50%'; + kanji.style.transform = `translate(${translateX}, -50%) rotate(${rotation}deg)`; + } + + kanjiObserver.observe(aboutSection); + } + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7937f7d --- /dev/null +++ b/style.css @@ -0,0 +1,1112 @@ +:root { + --paper: #f5f2eb; + --ink: #1a1a1a; + --accent: #c4a77d; + --accent-dark: #8b7355; + --grey: #4a4a4a; + --grey-light: #e0dcd4; + --error: #c62828; + --success: #2e7d32; + --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); + --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); +} + +@media (prefers-color-scheme: dark) { + :root { + --paper: #1a1a1a; + --ink: #f5f2eb; + --grey: #c0c0c0; + --grey-light: #2a2a2a; + --accent: #d4b78d; + --accent-dark: #c4a77d; + --error: #ef5350; + } +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + *, + *::before, + *::after { + animation: none !important; + transition: none !important; + } + .reveal { + opacity: 1 !important; + transform: none !important; + } +} + +body { + font-family: 'Heebo', sans-serif; + font-size: clamp(1rem, 2.5vw, 1.125rem); + line-height: 1.7; + color: var(--ink); + background-color: var(--paper); + overflow-x: hidden; +} + +/* Skip link */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: 1rem; + background: var(--ink); + color: var(--paper); + padding: 0.75rem 1.5rem; + z-index: 10000; + text-decoration: none; + font-weight: 700; + transition: top 0.2s; +} + +.skip-link:focus { + top: 1rem; +} + +/* Custom cursor */ +.cursor-follower { + position: fixed; + width: 20px; + height: 20px; + border: 1px solid var(--accent); + border-radius: 50%; + pointer-events: none; + z-index: 9999; + transform: translate(-50%, -50%); + transition: transform 0.15s var(--transition-smooth), + width 0.2s var(--transition-smooth), + height 0.2s var(--transition-smooth), + opacity 0.2s; + opacity: 0; +} + +.cursor-follower.active { + opacity: 1; +} + +.cursor-follower.hover { + width: 50px; + height: 50px; + border-color: var(--ink); +} + +@media (pointer: coarse) { + .cursor-follower { + display: none; + } +} + +/* Typography */ +h1, h2, h3 { + font-family: 'Frank Ruhl Libre', serif; + font-weight: 700; + line-height: 1.1; +} + +/* Japanese text */ +[lang="ja"], +.kanji-overlay { + font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'Yu Gothic', sans-serif; +} + +/* Navigation */ +.main-nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + padding: 1.5rem 2rem; + transition: background-color 0.3s, backdrop-filter 0.3s; +} + +.main-nav.scrolled { + background-color: rgba(245, 242, 235, 0.95); + backdrop-filter: blur(10px); +} + +@media (prefers-color-scheme: dark) { + .main-nav.scrolled { + background-color: rgba(26, 26, 26, 0.95); + } +} + +.nav-inner { + max-width: 1400px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-logo { + display: flex; + align-items: center; + gap: 0.75rem; + text-decoration: none; + color: var(--ink); + font-weight: 700; + font-size: 1.1rem; +} + +.logo-mark { + width: 40px; + height: 40px; +} + +.logo-line { + transform-origin: center; + transition: transform 0.3s var(--transition-smooth); +} + +.nav-logo:hover .logo-line { + transform: scaleY(0.7); +} + +.logo-flow { + transition: d 0.3s var(--transition-smooth); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; +} + +.nav-toggle span { + width: 24px; + height: 2px; + background: var(--ink); + transition: transform 0.3s, opacity 0.3s; +} + +.nav-toggle[aria-expanded="true"] span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.nav-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.nav-toggle[aria-expanded="true"] span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); +} + +.nav-links { + display: flex; + list-style: none; + gap: 2.5rem; +} + +.nav-links a { + text-decoration: none; + color: var(--ink); + font-size: 0.95rem; + position: relative; + padding: 0.25rem 0; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--accent); + transition: width 0.3s var(--transition-smooth); +} + +.nav-links a:hover::after, +.nav-links a:focus::after { + width: 100%; +} + +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-start: 100%; + width: 100%; + height: 100vh; + height: 100dvh; + background: var(--paper); + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2rem; + transition: inset-inline-start 0.4s var(--transition-smooth); + } + + .nav-links.open { + inset-inline-start: 0; + } + + .nav-links a { + font-size: 1.5rem; + } +} + +/* Hero */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 6rem 2rem 4rem; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + pointer-events: none; +} + +.enso { + position: absolute; + top: 50%; + inset-inline-start: 50%; + transform: translateX(50%) translateY(-50%); + width: min(80vw, 600px); + height: min(80vw, 600px); + opacity: 0.08; +} + +[dir="rtl"] .enso { + transform: translateX(50%) translateY(-50%); +} + +[dir="ltr"] .enso { + transform: translateX(-50%) translateY(-50%); +} + +.enso-circle { + stroke-dasharray: 1; + stroke-dashoffset: 1; + animation: draw-enso 3s var(--transition-smooth) forwards; +} + +@keyframes draw-enso { + to { + stroke-dashoffset: 0; + } +} + +.energy-lines { + position: absolute; + bottom: 20%; + inset-inline: 0; + height: 200px; + opacity: 0.05; +} + +.flow-line { + fill: none; + stroke: var(--ink); + stroke-width: 0.3; +} + +.hero-content { + text-align: center; + z-index: 1; +} + +.hero-tag { + font-size: 0.875rem; + color: var(--grey); + margin-bottom: 1.5rem; + font-weight: 500; +} + +.hero-title { + font-size: clamp(2.5rem, 9vw, 5.5rem); + margin-bottom: 1.5rem; + line-height: 1.05; +} + +.hero-title .title-main { + display: block; +} + +.hero-title em { + display: block; + color: var(--accent-dark); + font-style: italic; + font-size: 0.85em; +} + +.hero-subtitle { + font-size: clamp(1rem, 2.5vw, 1.35rem); + color: var(--grey); + margin-bottom: 3rem; + font-weight: 300; + max-width: 500px; + margin-inline: auto; +} + +.cta-btn { + display: inline-flex; + align-items: center; + gap: 0.75rem; + background: var(--ink); + color: var(--paper); + text-decoration: none; + padding: 1rem 2rem; + font-size: 1rem; + border: none; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.cta-btn::before { + content: ''; + position: absolute; + inset: 0; + background: var(--accent-dark); + transform: scaleX(0); + transform-origin: inline-end; + transition: transform 0.4s var(--transition-smooth); +} + +.cta-btn:hover::before, +.cta-btn:focus::before { + transform: scaleX(1); + transform-origin: inline-start; +} + +.cta-btn span, +.cta-btn svg { + position: relative; + z-index: 1; +} + +.cta-arrow { + width: 20px; + height: 20px; + transition: transform 0.3s var(--transition-smooth); +} + +.cta-btn:hover .cta-arrow, +.cta-btn:focus .cta-arrow { + transform: translateX(-5px); +} + +[dir="rtl"] .cta-btn:hover .cta-arrow, +[dir="rtl"] .cta-btn:focus .cta-arrow { + transform: translateX(5px); +} + +.scroll-hint { + position: absolute; + bottom: 2rem; + inset-inline-start: 50%; + transform: translateX(50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + color: var(--grey); + font-size: 0.75rem; +} + +[dir="rtl"] .scroll-hint { + transform: translateX(50%); +} + +[dir="ltr"] .scroll-hint { + transform: translateX(-50%); +} + +.scroll-hint svg { + width: 20px; + height: 35px; +} + +.scroll-dot { + animation: scroll-bounce 2s infinite; +} + +@keyframes scroll-bounce { + 0%, 100% { transform: translateY(0); opacity: 1; } + 50% { transform: translateY(8px); opacity: 0.3; } +} + +/* Reveal animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.8s var(--transition-smooth), + transform 0.8s var(--transition-smooth); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* Sections common */ +.section-inner { + max-width: 1200px; + margin: 0 auto; + padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); +} + +.section-title { + font-size: clamp(1.75rem, 5vw, 3rem); + margin-bottom: 2rem; +} + +.section-title--center { + text-align: center; +} + +/* About */ +.about { + background: var(--grey-light); +} + +.about .section-inner { + display: grid; + grid-template-columns: 1fr 1.4fr; + gap: 4rem; + align-items: center; +} + +@media (max-width: 900px) { + .about .section-inner { + grid-template-columns: 1fr; + gap: 3rem; + } +} + +.about-visual { + display: flex; + justify-content: center; +} + +.circle-composition { + position: relative; + width: min(100%, 300px); + aspect-ratio: 1; +} + +.composition-svg { + width: 100%; + height: 100%; +} + +.comp-circle { + fill: none; + stroke: var(--ink); + stroke-width: 1; + transform-origin: center; +} + +.c1 { animation: rotate-slow 30s linear infinite; } +.c2 { animation: rotate-slow 20s linear infinite reverse; } +.c3 { animation: pulse 4s ease-in-out infinite; } + +@keyframes rotate-slow { + to { transform: rotate(360deg); } +} + +@keyframes pulse { + 0%, 100% { r: 40; opacity: 1; } + 50% { r: 45; opacity: 0.7; } +} + +.comp-line { + stroke: var(--accent); + stroke-width: 0.5; + opacity: 0.5; +} + +.kanji-overlay { + position: absolute; + top: 50%; + inset-inline-start: 50%; + transform: translate(50%, -50%); + font-size: 3.5rem; + color: var(--ink); + opacity: 0.1; + pointer-events: none; + letter-spacing: 0.1em; +} + +[dir="rtl"] .kanji-overlay { + transform: translate(50%, -50%); +} + +[dir="ltr"] .kanji-overlay { + transform: translate(-50%, -50%); +} + +.about-text { + max-width: 55ch; +} + +.about-text p { + margin-bottom: 1.25rem; + color: var(--grey); +} + +.about-text .lead { + font-size: 1.1rem; + color: var(--ink); + font-weight: 500; +} + +/* Philosophy */ +.principles { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + margin-top: 4rem; +} + +@media (max-width: 900px) { + .principles { + grid-template-columns: 1fr; + max-width: 450px; + margin-inline: auto; + } +} + +.principle { + text-align: center; + padding: 2rem 1.5rem; + background: var(--paper); + border: 1px solid var(--grey-light); + transition: transform 0.3s var(--transition-smooth), + box-shadow 0.3s var(--transition-smooth); +} + +.principle--featured { + border-color: var(--accent); + border-width: 2px; +} + +@media (min-width: 901px) { + .principle--featured { + transform: scale(1.05); + } + + .principle--featured:hover { + transform: scale(1.08) translateY(-5px); + } +} + +.principle:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +.principle-icon { + width: 70px; + height: 70px; + margin: 0 auto 1.25rem; +} + +.principle-icon svg { + width: 100%; + height: 100%; + color: var(--ink); +} + +.breathing-dot { + animation: breathe 3s ease-in-out infinite; +} + +@keyframes breathe { + 0%, 100% { r: 8; opacity: 1; } + 50% { r: 10; opacity: 0.6; } +} + +.wave-path { + stroke-dasharray: 100; + animation: wave 3s ease-in-out infinite; +} + +@keyframes wave { + 0%, 100% { stroke-dashoffset: 0; } + 50% { stroke-dashoffset: 50; } +} + +.rotating-circle { + transform-origin: center; + animation: rotate-slow 8s linear infinite; +} + +.principle h3 { + font-size: 1.35rem; + margin-bottom: 0.75rem; + color: var(--accent-dark); +} + +.principle h3 [lang="ja"] { + font-weight: 400; +} + +.principle p { + color: var(--grey); + font-size: 0.9rem; + line-height: 1.6; +} + +/* Quote */ +.quote-section { + background: var(--ink); + color: var(--paper); +} + +.main-quote { + text-align: center; + max-width: 700px; + margin: 0 auto; +} + +.main-quote blockquote p { + font-family: 'Frank Ruhl Libre', serif; + font-size: clamp(1.5rem, 4vw, 2.25rem); + line-height: 1.4; + margin-bottom: 1.5rem; +} + +.main-quote figcaption { + font-size: 0.9rem; + color: var(--accent); +} + +/* Schedule */ +.schedule-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + margin-top: 3rem; +} + +@media (min-width: 1100px) { + .schedule-grid { + grid-template-columns: repeat(4, 1fr); + } +} + +@media (max-width: 600px) { + .schedule-grid { + grid-template-columns: 1fr; + } +} + +.schedule-card { + background: var(--paper); + border: 1px solid var(--grey-light); + padding: 1.5rem; + transition: border-color 0.3s, transform 0.3s var(--transition-smooth); + position: relative; + overflow: hidden; +} + +.schedule-card::before { + content: ''; + position: absolute; + top: 0; + inset-inline-start: 0; + width: 4px; + height: 0; + background: var(--accent); + transition: height 0.4s var(--transition-smooth); +} + +.schedule-card:hover { + border-color: var(--accent); +} + +.schedule-card:hover::before { + height: 100%; +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.75rem; + gap: 0.5rem; + flex-wrap: wrap; +} + +.day { + font-weight: 700; + font-size: 1rem; +} + +.level { + font-size: 0.7rem; + padding: 0.2rem 0.5rem; + border-radius: 20px; + white-space: nowrap; + display: flex; + align-items: center; + gap: 0.3rem; +} + +.level-icon { + font-size: 0.5rem; +} + +.level--beginner { + background: rgba(46, 125, 50, 0.15); + color: #2e7d32; +} + +.level--all { + background: rgba(21, 101, 192, 0.15); + color: #1565c0; +} + +.level--advanced { + background: rgba(194, 24, 91, 0.15); + color: #c2185b; +} + +@media (prefers-color-scheme: dark) { + .level--beginner { + background: rgba(76, 175, 80, 0.2); + color: #81c784; + } + + .level--all { + background: rgba(66, 165, 245, 0.2); + color: #64b5f6; + } + + .level--advanced { + background: rgba(240, 98, 146, 0.2); + color: #f48fb1; + } +} + +.card-time { + font-size: 1.25rem; + font-weight: 700; + font-family: 'Frank Ruhl Libre', serif; + margin-bottom: 0.5rem; + transition: color 0.3s; +} + +.schedule-card:hover .card-time { + color: var(--accent-dark); +} + +.card-desc { + color: var(--grey); + font-size: 0.85rem; +} + +.schedule-note { + text-align: center; + margin-top: 2.5rem; + color: var(--grey); + font-size: 0.9rem; +} + +/* Contact */ +.contact { + background: var(--grey-light); +} + +.contact .section-inner { + display: grid; + grid-template-columns: 1.5fr 1fr; + gap: 4rem; + align-items: start; +} + +@media (max-width: 900px) { + .contact .section-inner { + grid-template-columns: 1fr; + } + + .contact-visual { + order: -1; + max-width: 300px; + margin: 0 auto; + } +} + +.contact-content > p { + color: var(--grey); + margin-bottom: 2rem; + max-width: 50ch; +} + +.contact-info { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 2.5rem; + font-style: normal; +} + +.info-item { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.info-item svg { + width: 22px; + height: 22px; + flex-shrink: 0; +} + +.info-item a { + color: var(--ink); + text-decoration: none; + transition: color 0.2s; +} + +.info-item a:hover, +.info-item a:focus { + color: var(--accent-dark); + text-decoration: underline; +} + +.placeholder { + color: var(--grey); + font-style: italic; + font-size: 0.9em; +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 1.25rem; + max-width: 500px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.form-group label { + font-size: 0.875rem; + font-weight: 500; +} + +.required { + color: var(--error); +} + +.form-group input, +.form-group textarea { + padding: 0.875rem 1rem; + border: 1px solid var(--grey-light); + background: var(--paper); + font-family: inherit; + font-size: 1rem; + color: var(--ink); + transition: border-color 0.3s, box-shadow 0.3s; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(196, 167, 125, 0.25); +} + +.form-group input.error, +.form-group textarea.error { + border-color: var(--error); +} + +.form-group input.error:focus, +.form-group textarea.error:focus { + box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2); +} + +.error-message { + font-size: 0.8rem; + color: var(--error); + min-height: 1.1em; +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.submit-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + background: var(--ink); + color: var(--paper); + border: none; + padding: 1rem 2rem; + font-size: 1rem; + font-family: inherit; + cursor: pointer; + transition: background-color 0.3s, transform 0.2s var(--transition-smooth); + align-self: flex-start; +} + +.submit-btn:hover, +.submit-btn:focus { + background: var(--accent-dark); +} + +.submit-btn:active { + transform: scale(0.98); +} + +.submit-btn:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +.submit-btn svg { + width: 18px; + height: 18px; + transition: transform 0.3s; +} + +.submit-btn:hover svg, +.submit-btn:focus svg { + transform: translate(3px, -3px); +} + +[dir="rtl"] .submit-btn:hover svg, +[dir="rtl"] .submit-btn:focus svg { + transform: translate(-3px, -3px); +} + +.submit-btn.success { + background: var(--success); +} + +.form-status { + font-size: 0.875rem; + min-height: 1.25em; +} + +.form-status:empty { + display: none; +} + +.contact-visual { + display: flex; + justify-content: center; + align-items: flex-start; + padding-top: 2rem; +} + +.contact-art { + width: min(100%, 350px); + height: auto; +} + +.orbit { + transform-origin: center; +} + +.o1 { animation: rotate-slow 25s linear infinite; } +.o2 { animation: rotate-slow 18s linear infinite reverse; } +.o3 { animation: rotate-slow 12s linear infinite; } + +.orbiting-dot { + transform-origin: 200px 200px; +} + +.d1 { animation: orbit1 15s linear infinite; } +.d2 { animation: orbit2 12s linear infinite reverse; } +.d3 { animation: orbit3 8s linear infinite; } + +@keyframes orbit1 { + to { transform: rotate(360deg); } +} + +@keyframes orbit2 { + to { transform: rotate(-360deg); } +} + +@keyframes orbit3 { + to { transform: rotate(360deg); } +} + +/* Footer */ +.main-footer { + background: var(--ink); + color: var(--paper); + padding: 2rem; +} + +.footer-inner { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +.footer-brand { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.footer-logo { + width: 32px; + height: 32px; +} + +.footer-copy { + font-size: 0.8rem; + color: var(--grey); +} + +/* Focus styles */ +a:focus-visible, +button:focus-visible, +input:focus-visible, +textarea:focus-visible { + outline: 3px solid var(--accent-dark); + outline-offset: 2px; +} + +/* Selection */ +::selection { + background: var(--accent); + color: var(--paper); +} \ No newline at end of file