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

כפר סבא

+

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

+

מתחם אימונים חדשני ותוסס

+ התחילו את המסע +
+ +
+ +
+
+
+
+ +
+
+

אודות המרכז

+

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

+

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

+
+
+ 0 + שנות ניסיון +
+
+ 0 + + + מתאמנים +
+
+ 0 + מדריכים +
+
+
+
+
+ +
+
+

תוכניות אימונים

+
+
+
מומלץ למתחילים
+
+ +
+

קורס יסודות

+

+ קורס מקיף לחסרי ניסיון קודם. למדו את העקרונות הבסיסיים, + נפילות בטוחות (אוקמי), ותנועות היסוד של האיקידו. + הקורס כולל 12 מפגשים שבועיים. +

+ גילאי 16+ | ללא ניסיון קודם +
+ +
+
+ +
+

מתקדמים

+

+ העמקה בטכניקות מורכבות, עבודה עם נשק מסורתי + (ג׳ו, בוקן, טאנטו), + והכנה לבחינות דירוג. +

+ דרגת 5 קיו ומעלה +
+ +
+
+ +
+

ילדים ונוער

+

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

+ גילאי 6–15 +
+ +
+
+ +
+

אימון אישי

+

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

+ בתיאום מראש +
+
+
+
+ +
+
+
+

הדרך של האיקידו

+
+

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

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

הרמוניה

+

התמזגות עם אנרגיית היריב במקום התנגדות ישירה

+
+
+
+ +
+

מרכוז

+

שמירה על יציבות פנימית וחיצונית בכל מצב

+
+
+
+ +
+

זרימה

+

תנועה מתמשכת ומעגלית המנצלת את כוח התנופה

+
+
+
+
+ +
+
+
+ +
+
+

לוח אימונים

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
יוםבוקרצהרייםערב
ראשון—ילדים 16:00מבוגרים 19:30
שנימתקדמים 07:00—מתחילים 18:30
שלישי—נוער 17:00מבוגרים 20:00
רביעימתקדמים 07:00—כללי 19:00
חמישי—ילדים 16:00נשק 20:00
שישיאימון פתוח 09:00——
+
+

* הלוח עשוי להשתנות בחגים ובחופשות. צרו קשר לאישור.

+
+
+ +
+
+
+

בואו להתאמן

+

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

+
+
+ + [כתובת המרכז] +
+
+ + [טלפון] +
+
+ + [אימייל] +
+
+ + +
+
+
+ + + +
+
+ + + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..949f7d2 --- /dev/null +++ b/script.js @@ -0,0 +1,301 @@ +(function() { + 'use strict'; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Set current year in footer + const yearEl = document.getElementById('current-year'); + if (yearEl) { + yearEl.textContent = new Date().getFullYear(); + } + + // Navigation scroll behavior + const nav = document.querySelector('.nav'); + let lastScrollY = window.scrollY; + let ticking = false; + + function updateNav() { + const currentScrollY = window.scrollY; + + if (currentScrollY > 100) { + nav.classList.add('nav--scrolled'); + } else { + nav.classList.remove('nav--scrolled'); + } + + if (currentScrollY > lastScrollY && currentScrollY > 500) { + nav.classList.add('nav--hidden'); + } else { + nav.classList.remove('nav--hidden'); + } + + lastScrollY = currentScrollY; + ticking = false; + } + + window.addEventListener('scroll', function() { + if (!ticking) { + requestAnimationFrame(updateNav); + ticking = true; + } + }, { passive: true }); + + // Mobile menu toggle + const navToggle = document.querySelector('.nav__toggle'); + const navMenu = document.querySelector('.nav__menu'); + + if (navToggle && navMenu) { + navToggle.addEventListener('click', function() { + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + navMenu.classList.toggle('is-open'); + }); + + // Close mobile menu on link click + navMenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', function() { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('is-open'); + }); + }); + } + + // Fade out scroll indicator after delay + const heroScroll = document.querySelector('.hero__scroll'); + if (heroScroll && !prefersReducedMotion) { + setTimeout(() => { + heroScroll.classList.add('is-faded'); + }, 4000); + } + + // Reveal animations with Intersection Observer + const revealElements = document.querySelectorAll('.reveal'); + + if (prefersReducedMotion) { + // Show all elements immediately if reduced motion is preferred + revealElements.forEach(el => { + el.classList.add('is-visible'); + }); + } else { + let revealDelay = 0; + + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + // Use a stagger based on when elements enter viewport + setTimeout(() => { + entry.target.classList.add('is-visible'); + }, revealDelay); + revealDelay += 80; + + // Reset delay after a batch + setTimeout(() => { + revealDelay = 0; + }, 500); + + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.15, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } + + // Animated counters + function animateCounter(element, target, duration = 1800) { + if (prefersReducedMotion) { + element.textContent = target; + return; + } + + const start = performance.now(); + + function updateCounter(currentTime) { + const elapsed = currentTime - start; + const progress = Math.min(elapsed / duration, 1); + + // Ease out cubic + const easeOut = 1 - Math.pow(1 - progress, 3); + const current = Math.floor(easeOut * target); + + element.textContent = current; + + if (progress < 1) { + requestAnimationFrame(updateCounter); + } else { + element.textContent = target; + } + } + + requestAnimationFrame(updateCounter); + } + + const statNumbers = document.querySelectorAll('.stat__number'); + + const statsObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const target = parseInt(entry.target.dataset.target, 10); + animateCounter(entry.target, target); + statsObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.5 + }); + + statNumbers.forEach(stat => statsObserver.observe(stat)); + + // 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 navHeight = nav ? nav.offsetHeight : 0; + const targetPosition = target.getBoundingClientRect().top + window.scrollY - navHeight - 20; + + window.scrollTo({ + top: targetPosition, + behavior: prefersReducedMotion ? 'auto' : 'smooth' + }); + + // Set focus for accessibility + target.setAttribute('tabindex', '-1'); + target.focus({ preventScroll: true }); + } + }); + }); + + // Hero title animation + if (!prefersReducedMotion) { + const heroTitle = document.querySelector('.hero__title'); + if (heroTitle) { + heroTitle.style.opacity = '0'; + heroTitle.style.transform = 'translateY(30px)'; + + setTimeout(() => { + heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + heroTitle.style.opacity = '1'; + heroTitle.style.transform = 'translateY(0)'; + }, 200); + } + } + + // Email validation helper + function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + } + + // Form submission handling + const contactForm = document.querySelector('.contact__form'); + const formStatus = document.querySelector('.form-status'); + + if (contactForm && formStatus) { + const nameInput = document.getElementById('name'); + const emailInput = document.getElementById('email'); + const nameError = document.getElementById('name-error'); + const emailError = document.getElementById('email-error'); + + // Clear error on input + if (nameInput && nameError) { + nameInput.addEventListener('input', function() { + this.removeAttribute('aria-invalid'); + nameError.textContent = ''; + }); + } + + if (emailInput && emailError) { + emailInput.addEventListener('input', function() { + this.removeAttribute('aria-invalid'); + emailError.textContent = ''; + }); + } + + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const submitBtn = this.querySelector('.form-submit'); + const originalText = submitBtn.textContent; + let isValid = true; + + // Validate name + if (nameInput && !nameInput.value.trim()) { + isValid = false; + nameInput.setAttribute('aria-invalid', 'true'); + if (nameError) nameError.textContent = 'נא להזין שם מלא'; + } + + // Validate email + if (emailInput) { + if (!emailInput.value.trim()) { + isValid = false; + emailInput.setAttribute('aria-invalid', 'true'); + if (emailError) emailError.textContent = 'נא להזין כתובת דוא״ל'; + } else if (!isValidEmail(emailInput.value.trim())) { + isValid = false; + emailInput.setAttribute('aria-invalid', 'true'); + if (emailError) emailError.textContent = 'כתובת דוא״ל לא תקינה'; + } + } + + if (!isValid) { + formStatus.textContent = 'נא לתקן את השגיאות בטופס'; + formStatus.className = 'form-status form-status--error'; + return; + } + + submitBtn.textContent = 'שולח...'; + submitBtn.disabled = true; + formStatus.textContent = ''; + + // Simulate form submission + setTimeout(() => { + submitBtn.textContent = 'נשלח בהצלחה! ✓'; + submitBtn.style.background = 'var(--tertiary)'; + formStatus.textContent = 'ההודעה נשלחה בהצלחה. ניצור איתכם קשר בהקדם.'; + formStatus.className = 'form-status form-status--success'; + + setTimeout(() => { + submitBtn.textContent = originalText; + submitBtn.style.background = ''; + submitBtn.disabled = false; + contactForm.reset(); + formStatus.textContent = ''; + formStatus.className = 'form-status'; + }, 4000); + }, 1500); + }); + } + + // Keyboard navigation enhancement + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && navToggle && navMenu) { + navToggle.setAttribute('aria-expanded', 'false'); + navMenu.classList.remove('is-open'); + } + }); + + // Detect scroll on table + const tableWrap = document.querySelector('.schedule__table-wrap'); + const scrollHint = document.querySelector('.schedule__scroll-hint'); + + if (tableWrap && scrollHint) { + tableWrap.addEventListener('scroll', function() { + if (this.scrollLeft > 10) { + scrollHint.style.opacity = '0'; + } else { + scrollHint.style.opacity = '1'; + } + }, { passive: true }); + } + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f0cea10 --- /dev/null +++ b/style.css @@ -0,0 +1,1188 @@ +:root { + --dark: #1D3557; + --dark-deep: #0D1B2A; + --accent: #E63946; + --secondary: #F4A261; + --tertiary: #1B7A6E; + --light: #F1FAEE; + --light-cream: #FFF8F0; + --gray: #355070; + --gray-light: #D4E4E7; + --text-muted: #4A6377; + + --font-display: 'Heebo', sans-serif; + --font-body: 'Rubik', sans-serif; + + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; + --space-xl: 8rem; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + --radius-full: 9999px; + + --transition-fast: 150ms ease; + --transition-base: 300ms ease; + --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1); +} + +*, +*::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-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +body { + font-family: var(--font-body); + font-size: 1rem; + line-height: 1.6; + color: var(--dark); + background-color: var(--light-cream); + overflow-x: hidden; +} + +h1, h2, h3, h4 { + font-family: var(--font-display); + font-weight: 900; + line-height: 1.1; + text-wrap: balance; +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input, select, textarea { + font: inherit; + color: inherit; +} + +address { + font-style: normal; +} + +/* Skip link for accessibility */ +.skip-link { + position: absolute; + top: -100%; + inset-inline-start: 50%; + transform: translateX(50%); + background: var(--accent); + color: var(--light); + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + z-index: 9999; + transition: top var(--transition-fast); + font-weight: 700; +} + +[dir="ltr"] .skip-link { + transform: translateX(-50%); +} + +.skip-link:focus { + top: var(--space-sm); +} + +/* Navigation */ +.nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + background: rgba(241, 250, 238, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(29, 53, 87, 0.1); + transition: transform var(--transition-base), box-shadow var(--transition-base); +} + +.nav--hidden { + transform: translateY(-100%); +} + +.nav--scrolled { + box-shadow: 0 4px 20px rgba(29, 53, 87, 0.1); +} + +.nav__inner { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: var(--space-sm) var(--space-md); +} + +.nav__logo { + display: flex; + align-items: center; + gap: var(--space-sm); + font-family: var(--font-display); + font-weight: 700; + font-size: 1.125rem; + color: var(--dark); + transition: color var(--transition-fast); +} + +.nav__logo:hover, +.nav__logo:focus { + color: var(--accent); +} + +.nav__logo svg { + flex-shrink: 0; +} + +.nav__toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 36px; + height: 36px; + background: none; + border: none; + cursor: pointer; + padding: 6px; +} + +.nav__toggle span { + display: block; + width: 100%; + height: 2px; + background: var(--dark); + border-radius: var(--radius-full); + transition: transform var(--transition-base), opacity var(--transition-base); +} + +.nav__toggle[aria-expanded="true"] span:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} + +.nav__toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0; +} + +.nav__toggle[aria-expanded="true"] span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} + +.nav__menu { + display: flex; + align-items: center; + gap: var(--space-md); + list-style: none; +} + +.nav__menu a { + position: relative; + font-weight: 500; + padding: var(--space-xs) 0; + transition: color var(--transition-fast); +} + +.nav__menu a::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--accent); + transition: width var(--transition-base); +} + +.nav__menu a:hover::after, +.nav__menu a:focus::after { + width: 100%; +} + +.nav__menu a:hover, +.nav__menu a:focus { + color: var(--accent); +} + +@media (max-width: 768px) { + .nav__toggle { + display: flex; + } + + .nav__menu { + position: absolute; + top: 100%; + inset-inline: 0; + flex-direction: column; + gap: 0; + background: var(--light); + border-bottom: 1px solid rgba(29, 53, 87, 0.1); + max-height: 0; + overflow: hidden; + transition: max-height var(--transition-slow); + } + + .nav__menu.is-open { + max-height: 300px; + } + + .nav__menu li { + width: 100%; + } + + .nav__menu a { + display: block; + padding: var(--space-sm) var(--space-md); + border-bottom: 1px solid rgba(29, 53, 87, 0.05); + } + + .nav__menu a::after { + display: none; + } +} + +/* Hero */ +.hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-xl) var(--space-md); + background: linear-gradient(135deg, var(--dark-deep) 0%, var(--dark) 50%, var(--gray) 100%); + overflow: hidden; +} + +.hero__bg { + position: absolute; + inset: 0; + pointer-events: none; +} + +.hero__circle { + position: absolute; + border-radius: 50%; + opacity: 0.08; +} + +.hero__circle--1 { + width: 600px; + height: 600px; + background: var(--accent); + top: -200px; + inset-inline-end: -100px; +} + +.hero__circle--2 { + width: 400px; + height: 400px; + background: var(--secondary); + bottom: -100px; + inset-inline-start: -50px; +} + +.hero__circle--3 { + width: 200px; + height: 200px; + background: var(--tertiary); + top: 50%; + inset-inline-start: 60%; +} + +.hero__enso { + position: absolute; + width: 500px; + height: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + opacity: 0.1; +} + +.hero__content { + position: relative; + text-align: center; + color: var(--light); + z-index: 1; +} + +.hero__subtitle { + font-size: clamp(1rem, 2vw, 1.25rem); + font-weight: 300; + letter-spacing: 0.3em; + text-transform: uppercase; + margin-bottom: var(--space-sm); + color: var(--gray-light); +} + +.hero__title { + font-size: clamp(2.5rem, 8vw, 5.5rem); + margin-bottom: var(--space-md); +} + +.hero__title-main { + display: block; + color: var(--accent); + text-shadow: 0 0 60px rgba(230, 57, 70, 0.4); +} + +.hero__title-sub { + display: block; + font-size: 0.6em; + font-weight: 700; + color: var(--light); + margin-top: var(--space-xs); +} + +.hero__tagline { + font-size: clamp(1.125rem, 2.5vw, 1.5rem); + font-weight: 300; + margin-bottom: var(--space-lg); + color: var(--gray-light); +} + +.hero__cta { + display: inline-block; + padding: var(--space-sm) var(--space-lg); + background: var(--accent); + color: var(--light); + font-weight: 700; + font-size: 1.125rem; + border-radius: var(--radius-full); + transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base); +} + +.hero__cta:hover, +.hero__cta:focus { + transform: translateY(-3px); + box-shadow: 0 10px 40px rgba(230, 57, 70, 0.4); + background: #d62839; +} + +.hero__cta:focus-visible { + outline: 3px solid var(--secondary); + outline-offset: 3px; +} + +.hero__scroll { + position: absolute; + bottom: var(--space-md); + inset-inline-start: 50%; + transform: translateX(50%); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + color: var(--gray-light); + font-size: 0.875rem; + opacity: 1; + transition: opacity 3s ease 3s; +} + +[dir="ltr"] .hero__scroll { + transform: translateX(-50%); +} + +.hero__scroll.is-faded { + opacity: 0; +} + +/* Reveal animations */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +/* Section title */ +.section-title { + font-size: clamp(2rem, 5vw, 3rem); + margin-bottom: var(--space-lg); + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 60px; + height: 4px; + background: var(--accent); + margin-top: var(--space-sm); + border-radius: var(--radius-full); +} + +.section-title--light { + color: var(--light); +} + +.section-title--light::after { + background: var(--secondary); +} + +/* About section */ +.about { + padding: var(--space-xl) var(--space-md); + background: var(--light-cream); +} + +.about__inner { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--space-lg); + max-width: 1100px; + margin: 0 auto; + align-items: center; +} + +@media (max-width: 900px) { + .about__inner { + grid-template-columns: 1fr; + } + + .about__visual { + order: -1; + max-width: 250px; + margin: 0 auto; + } +} + +.about__illustration { + width: 100%; + height: auto; +} + +.about__text { + font-size: 1.0625rem; + margin-bottom: var(--space-md); + color: var(--gray); + max-width: 55ch; +} + +.about__stats { + display: flex; + gap: var(--space-lg); + margin-top: var(--space-lg); + flex-wrap: wrap; +} + +@media (max-width: 500px) { + .about__stats { + gap: var(--space-md); + } +} + +.stat { + text-align: center; + min-width: 80px; +} + +.stat__number { + display: inline; + font-family: var(--font-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 900; + color: var(--accent); + line-height: 1; +} + +.stat__suffix { + font-family: var(--font-display); + font-size: clamp(1.5rem, 3vw, 2rem); + font-weight: 900; + color: var(--accent); +} + +.stat__label { + display: block; + font-size: 0.875rem; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-top: var(--space-xs); +} + +/* Training section */ +.training { + padding: var(--space-xl) var(--space-md); + background: linear-gradient(135deg, var(--dark) 0%, var(--dark-deep) 100%); +} + +.training__inner { + max-width: 1100px; + margin: 0 auto; +} + +.training__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-md); +} + +@media (min-width: 900px) { + .training__grid { + grid-template-columns: repeat(4, 1fr); + } + + .training-card--featured { + grid-column: span 2; + } +} + +@media (max-width: 600px) { + .training__grid { + grid-template-columns: 1fr; + } +} + +.training-card { + position: relative; + background: rgba(241, 250, 238, 0.05); + border: 1px solid rgba(241, 250, 238, 0.1); + border-radius: var(--radius-lg); + padding: var(--space-lg) var(--space-md); + text-align: center; + color: var(--light); + transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base); +} + +.training-card:hover, +.training-card:focus-within { + border-color: rgba(241, 250, 238, 0.3); + background: rgba(241, 250, 238, 0.08); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); +} + +.training-card--featured { + border-color: var(--accent); + background: rgba(230, 57, 70, 0.08); +} + +.training-card__badge { + position: absolute; + top: -12px; + inset-inline-end: var(--space-md); + background: var(--secondary); + color: var(--dark); + font-size: 0.75rem; + font-weight: 700; + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-full); + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.training-card__icon { + width: 70px; + height: 70px; + margin: 0 auto var(--space-md); + transition: transform var(--transition-base); +} + +.training-card:hover .training-card__icon, +.training-card:focus-within .training-card__icon { + transform: scale(1.1); +} + +.training-card__icon svg { + width: 100%; + height: 100%; +} + +.training-card__title { + font-size: 1.375rem; + margin-bottom: var(--space-sm); +} + +.training-card__desc { + font-size: 0.9375rem; + color: var(--gray-light); + margin-bottom: var(--space-md); + line-height: 1.6; +} + +.training-card__age { + display: inline-block; + font-size: 0.8125rem; + color: var(--secondary); + border: 1px solid var(--secondary); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-full); +} + +/* Philosophy section */ +.philosophy { + padding: var(--space-xl) var(--space-md); + background: var(--light); +} + +.philosophy__inner { + display: grid; + grid-template-columns: 1.5fr 1fr; + gap: var(--space-lg); + max-width: 1000px; + margin: 0 auto; + align-items: center; +} + +@media (max-width: 900px) { + .philosophy__inner { + grid-template-columns: 1fr; + } + + .philosophy__visual { + order: -1; + } +} + +.philosophy__quote { + position: relative; + padding: var(--space-lg); + margin-bottom: var(--space-lg); + background: linear-gradient(135deg, rgba(230, 57, 70, 0.05) 0%, rgba(244, 162, 97, 0.05) 100%); + border-radius: var(--radius-lg); + border-inline-start: 4px solid var(--accent); +} + +.philosophy__quote p { + font-size: clamp(1rem, 1.8vw, 1.1875rem); + font-style: italic; + line-height: 1.7; + margin-bottom: var(--space-sm); + max-width: 50ch; +} + +.philosophy__quote cite { + font-size: 0.9375rem; + color: var(--text-muted); + font-style: normal; +} + +.philosophy__principles { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-md); +} + +@media (max-width: 600px) { + .philosophy__principles { + grid-template-columns: 1fr; + gap: var(--space-sm); + } + + .principle { + display: grid; + grid-template-columns: auto 1fr; + gap: 0 var(--space-sm); + text-align: start; + } + + .principle__icon { + grid-row: 1 / 3; + margin: 0; + align-self: center; + } + + .principle h3 { + align-self: end; + } +} + +.principle { + text-align: center; + padding: var(--space-sm); +} + +.principle__icon { + width: 50px; + height: 50px; + margin: 0 auto var(--space-xs); +} + +.principle h3 { + font-size: 1.125rem; + margin-bottom: var(--space-xs); + color: var(--dark); +} + +.principle p { + font-size: 0.9375rem; + color: var(--text-muted); + line-height: 1.5; +} + +/* Mitsudomoe (Tomoe) */ +.tomoe { + width: 180px; + height: 180px; + margin: 0 auto; + border-radius: 50%; + background: var(--dark); + position: relative; + box-shadow: 0 15px 50px rgba(29, 53, 87, 0.2); +} + +.tomoe__magatama { + position: absolute; + width: 50%; + height: 50%; + top: 0; + left: 25%; + transform-origin: center bottom; +} + +.tomoe__magatama::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: var(--light); + border-radius: 50% 50% 50% 0; + transform: rotate(-45deg); +} + +.tomoe__magatama::after { + content: ''; + position: absolute; + width: 30%; + height: 30%; + background: var(--dark); + border-radius: 50%; + top: 25%; + left: 35%; +} + +.tomoe__magatama--1 { + transform: rotate(0deg); +} + +.tomoe__magatama--1::before { + background: var(--accent); +} + +.tomoe__magatama--2 { + transform: rotate(120deg); +} + +.tomoe__magatama--2::before { + background: var(--secondary); +} + +.tomoe__magatama--3 { + transform: rotate(240deg); +} + +.tomoe__magatama--3::before { + background: var(--light); +} + +/* Schedule section */ +.schedule { + padding: var(--space-xl) var(--space-md); + background: var(--light-cream); +} + +.schedule__inner { + max-width: 900px; + margin: 0 auto; +} + +.schedule__table-wrap { + position: relative; + overflow-x: auto; + border-radius: var(--radius-lg); + box-shadow: 0 10px 40px rgba(29, 53, 87, 0.1); + -webkit-overflow-scrolling: touch; +} + +.schedule__scroll-hint { + display: none; + text-align: center; + font-size: 0.75rem; + color: var(--text-muted); + padding: var(--space-xs); + background: rgba(29, 53, 87, 0.05); + transition: opacity var(--transition-base); +} + +@media (max-width: 600px) { + .schedule__scroll-hint { + display: block; + } +} + +.schedule__table { + width: 100%; + border-collapse: collapse; + background: var(--light); + min-width: 500px; +} + +.schedule__table th, +.schedule__table td { + padding: var(--space-sm) var(--space-md); + text-align: center; + border-bottom: 1px solid rgba(29, 53, 87, 0.1); +} + +.schedule__table thead th { + background: var(--dark); + color: var(--light); + font-family: var(--font-display); + font-weight: 700; + font-size: 0.9375rem; +} + +.schedule__table thead th:first-child { + width: 20%; +} + +.schedule__table tbody tr:hover { + background: rgba(42, 157, 143, 0.05); +} + +.schedule__table tbody th { + font-weight: 700; + color: var(--dark); + background: rgba(29, 53, 87, 0.03); + text-align: start; +} + +.schedule__cell--adult { + color: var(--dark); + font-weight: 500; +} + +.schedule__cell--kids { + color: var(--tertiary); + font-weight: 600; +} + +.schedule__cell--special { + color: var(--accent); + font-weight: 700; +} + +.schedule__note { + text-align: center; + font-size: 0.875rem; + color: var(--text-muted); + margin-top: var(--space-md); +} + +/* Contact section */ +.contact { + padding: var(--space-xl) var(--space-md); + background: linear-gradient(135deg, var(--tertiary) 0%, var(--dark) 100%); +} + +.contact__inner { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: var(--space-xl); + max-width: 1100px; + margin: 0 auto; + align-items: start; +} + +@media (max-width: 800px) { + .contact__inner { + grid-template-columns: 1fr; + } +} + +.contact__info { + color: var(--light); +} + +.contact__info .section-title { + color: var(--light); +} + +.contact__text { + font-size: 1.0625rem; + margin-bottom: var(--space-lg); + color: var(--light); + opacity: 0.9; +} + +.contact__details { + margin-bottom: var(--space-lg); +} + +.contact__item { + display: flex; + align-items: center; + gap: var(--space-sm); + margin-bottom: var(--space-sm); + color: var(--light); +} + +.contact__item svg { + flex-shrink: 0; + color: var(--secondary); +} + +.contact__item a { + text-decoration: underline; + text-decoration-color: transparent; + text-underline-offset: 3px; + transition: text-decoration-color var(--transition-fast); +} + +.contact__item a:hover, +.contact__item a:focus { + text-decoration-color: var(--secondary); +} + +.contact__social-note { + font-size: 0.875rem; + color: var(--gray-light); + margin-bottom: var(--space-xs); +} + +.contact__social { + display: flex; + gap: var(--space-sm); +} + +.social-link { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border: 2px solid rgba(241, 250, 238, 0.3); + border-radius: 50%; + color: var(--light); + transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base); +} + +.social-link:hover, +.social-link:focus { + border-color: var(--secondary); + background: rgba(244, 162, 97, 0.2); + transform: translateY(-3px); +} + +.social-link:focus-visible { + outline: 3px solid var(--secondary); + outline-offset: 2px; +} + +/* Contact form */ +.contact__form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-md); + padding: var(--space-lg); + background: var(--light); + border-radius: var(--radius-lg); + box-shadow: 0 20px 60px rgba(13, 27, 42, 0.3); +} + +@media (max-width: 500px) { + .contact__form { + grid-template-columns: 1fr; + padding: var(--space-md); + } +} + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} + +.form-group--full { + grid-column: 1 / -1; +} + +.form-group label { + font-weight: 700; + font-size: 0.875rem; + color: var(--dark); +} + +.form-group .required { + color: var(--accent); +} + +.form-group input, +.form-group select, +.form-group textarea { + padding: var(--space-sm); + border: 2px solid var(--gray-light); + border-radius: var(--radius-md); + background: var(--light-cream); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15); +} + +.form-group input[aria-invalid="true"], +.form-group textarea[aria-invalid="true"] { + border-color: var(--accent); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.form-error { + font-size: 0.8125rem; + color: var(--accent); + min-height: 1.2em; +} + +.form-submit { + grid-column: 1 / -1; + padding: var(--space-sm) var(--space-lg); + background: var(--accent); + color: var(--light); + font-weight: 700; + font-size: 1.125rem; + border: none; + border-radius: var(--radius-full); + cursor: pointer; + transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); +} + +.form-submit:hover, +.form-submit:focus { + background: #d62839; + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(230, 57, 70, 0.3); +} + +.form-submit:focus-visible { + outline: 3px solid var(--secondary); + outline-offset: 3px; +} + +.form-submit:active { + transform: translateY(0); +} + +.form-submit:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; +} + +.form-status { + grid-column: 1 / -1; + text-align: center; + font-weight: 500; + min-height: 1.5em; +} + +.form-status--success { + color: var(--tertiary); +} + +.form-status--error { + color: var(--accent); +} + +/* Footer */ +.footer { + padding: var(--space-lg) var(--space-md); + background: var(--dark-deep); + color: var(--gray-light); +} + +.footer__inner { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-md); + text-align: center; +} + +.footer__logo { + display: flex; + align-items: center; + gap: var(--space-sm); + font-family: var(--font-display); + font-weight: 700; + font-size: 1.25rem; + color: var(--light); +} + +.footer__nav { + display: flex; + gap: var(--space-md); + flex-wrap: wrap; + justify-content: center; +} + +.footer__nav a { + color: var(--gray-light); + transition: color var(--transition-fast); +} + +.footer__nav a:hover, +.footer__nav a:focus { + color: var(--accent); +} + +.footer__copy { + font-size: 0.875rem; + color: var(--text-muted); +} + +/* Focus visible for keyboard users */ +:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 3px; +} + +button:focus:not(:focus-visible), +a:focus:not(:focus-visible), +input:focus:not(:focus-visible), +select:focus:not(:focus-visible), +textarea:focus:not(:focus-visible) { + outline: none; +} \ No newline at end of file