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

כפר סבא • מתחם אימונים חדש

+

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

+

גלו את הדרך להרמוניה
בין גוף לנפש

+ + שיעור ניסיון חינם + + +
+ + + + +
+ +
+
+
+
+ +
+
+
+

+ 合気道 + אמנות ההרמוניה +

+

+ איקידו היא אמנות לחימה יפנית מודרנית שפותחה במאה ה־20 על ידי מוריהיי אואשיבה. בניגוד לאמנויות לחימה אחרות, האיקידו מתמקדת בהגנה ללא תוקפנות — בניצול אנרגיית היריב להשגת שליטה והרמוניה. +

+

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

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

עקרונות הדרך

+

שלושת היסודות המנחים את תרגול האיקידו

+
+
+
+ +
+

אי — 合

+

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

+
+
+
+ +
+

קי — 気

+

אנרגיה פנימית. פיתוח וזרימה של כוח החיים דרך הגוף והנפש.

+
+
+
+ +
+

דו — 道

+

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

+
+
+
+
+ +
+
+

אימונים ושיעורים

+

+ תכנית אימונים מגוונת לכל הרמות — ממתחילים ועד מתקדמים +

+
+
+
+ מתחילים + גילאי 16+ +
+

קבוצת יסודות

+

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

+
    +
  • ראשון + רביעי
    • +
+
+
+
הכי פופולרי
+
+ כל הרמות + גילאי 16+ +
+

אימון מרכזי

+

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

+
    +
  • שני + חמישי
    • +
  • שישי בוקר
    • +
+
+
+
+ ילדים ונוער + גילאי 7–15 +
+

איקידו לילדים

+

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

+
    +
  • ראשון + רביעי
    • +
+
+
+
+
+ +
+
+ + +
+
+

הדוג׳ו שלנו

+

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

+
    +
  • + + 120 מ״ר משטח טאטאמי מקצועי +
    • +
  • + + מלתחות מרווחות עם מקלחות +
    • +
  • + + ציוד אימונים מסורתי — בוקן, ג׳ו, טנטו +
    • +
  • + + חנייה חינם צמוד למתחם +
    • +
  • + + נגישות מלאה לבעלי מוגבלויות +
    • +
+
+
+ +
+ +
+

הצטרפו אלינו

+

+ מוזמנים לשיעור ניסיון חינם. מלאו את הפרטים ונחזור אליכם תוך 24 שעות. +

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a1f49a5 --- /dev/null +++ b/script.js @@ -0,0 +1,199 @@ +(function() { + 'use strict'; + + // Check for reduced motion preference + const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + + // Navigation + const nav = document.querySelector('.main-nav'); + const navToggle = document.querySelector('.nav-toggle'); + const navLinks = document.querySelector('.nav-links'); + + // Scroll behavior for nav + let lastScrollY = 0; + let ticking = false; + + function updateNav() { + const scrollY = window.scrollY; + if (scrollY > 50) { + nav.classList.add('scrolled'); + } else { + nav.classList.remove('scrolled'); + } + lastScrollY = scrollY; + ticking = false; + } + + window.addEventListener('scroll', () => { + if (!ticking) { + requestAnimationFrame(updateNav); + ticking = true; + } + }, { passive: true }); + + // Mobile nav toggle + navToggle.addEventListener('click', () => { + const isOpen = navToggle.getAttribute('aria-expanded') === 'true'; + navToggle.setAttribute('aria-expanded', !isOpen); + navToggle.setAttribute('aria-label', isOpen ? 'פתח תפריט ניווט' : 'סגור תפריט ניווט'); + navLinks.classList.toggle('open'); + document.body.style.overflow = isOpen ? '' : 'hidden'; + }); + + // Close mobile nav on link click + navLinks.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.setAttribute('aria-label', 'פתח תפריט ניווט'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + }); + }); + + // Smooth scroll for anchor links + document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function(e) { + const targetId = this.getAttribute('href'); + if (targetId === '#') return; + + const target = document.querySelector(targetId); + if (target) { + e.preventDefault(); + target.scrollIntoView({ + behavior: prefersReducedMotion ? 'auto' : 'smooth', + block: 'start' + }); + } + }); + }); + + // Reveal on scroll + const revealElements = document.querySelectorAll('.reveal-text, .reveal-up'); + + if (!prefersReducedMotion && revealElements.length > 0) { + const revealObserver = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + revealObserver.unobserve(entry.target); + } + }); + }, { + threshold: 0.1, + rootMargin: '0px 0px -40px 0px' + }); + + revealElements.forEach(el => revealObserver.observe(el)); + } else { + // Show all elements immediately if reduced motion is preferred + revealElements.forEach(el => { + el.classList.add('visible'); + }); + } + + // Active section highlighting + const sections = document.querySelectorAll('section[id]'); + const navItems = document.querySelectorAll('.nav-links a:not(.nav-cta)'); + + if (sections.length > 0 && navItems.length > 0) { + const sectionObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const id = entry.target.getAttribute('id'); + navItems.forEach(item => { + item.classList.remove('active'); + if (item.getAttribute('href') === `#${id}`) { + item.classList.add('active'); + } + }); + } + }); + }, { + threshold: 0.2, + rootMargin: '-80px 0px -50% 0px' + }); + + sections.forEach(section => sectionObserver.observe(section)); + } + + // Form handling + const form = document.querySelector('.contact-form'); + if (form) { + form.addEventListener('submit', function(e) { + e.preventDefault(); + + const btn = form.querySelector('.submit-btn'); + const originalText = btn.querySelector('span').textContent; + const requiredFields = form.querySelectorAll('[required]'); + let isValid = true; + + // Basic validation + requiredFields.forEach(field => { + if (!field.value.trim()) { + isValid = false; + field.style.borderColor = 'var(--color-accent)'; + } else { + field.style.borderColor = ''; + } + }); + + if (!isValid) { + return; + } + + btn.querySelector('span').textContent = 'שולח...'; + btn.disabled = true; + + // Simulate submission (replace with actual form handling) + setTimeout(() => { + btn.querySelector('span').textContent = 'נשלח בהצלחה!'; + btn.style.background = '#2e7d32'; + + setTimeout(() => { + btn.querySelector('span').textContent = originalText; + btn.style.background = ''; + btn.disabled = false; + form.reset(); + }, 2500); + }, 1200); + }); + + // Clear error styling on input + form.querySelectorAll('input, textarea, select').forEach(field => { + field.addEventListener('input', () => { + field.style.borderColor = ''; + }); + }); + } + + // Keyboard navigation enhancement + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && navLinks.classList.contains('open')) { + navToggle.setAttribute('aria-expanded', 'false'); + navToggle.setAttribute('aria-label', 'פתח תפריט ניווט'); + navLinks.classList.remove('open'); + document.body.style.overflow = ''; + navToggle.focus(); + } + }); + + // Trap focus in mobile menu when open + navLinks.addEventListener('keydown', (e) => { + if (!navLinks.classList.contains('open')) return; + + const focusableElements = navLinks.querySelectorAll('a'); + const firstElement = focusableElements[0]; + const lastElement = focusableElements[focusableElements.length - 1]; + + if (e.key === 'Tab') { + if (e.shiftKey && document.activeElement === firstElement) { + e.preventDefault(); + navToggle.focus(); + } else if (!e.shiftKey && document.activeElement === lastElement) { + e.preventDefault(); + navToggle.focus(); + } + } + }); + +})(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5821332 --- /dev/null +++ b/style.css @@ -0,0 +1,1244 @@ +:root { + --color-bg: #0a0a0b; + --color-bg-elevated: #121214; + --color-surface: #1c1c20; + --color-text: #f5f5f7; + --color-text-muted: #b0b0b5; + --color-accent: #c41e3a; + --color-accent-light: #e63950; + --color-accent-dark: #9a1830; + --color-gold: #d4a853; + --font-sans: 'Noto Sans Hebrew', system-ui, sans-serif; + --font-serif: 'Noto Serif Hebrew', Georgia, serif; + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 1.5rem; + --space-lg: 3rem; + --space-xl: 5rem; + --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --arrow-transform: 5px; +} + +[dir="rtl"] { + --arrow-transform: -5px; +} + +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 80px; +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + html { + scroll-behavior: auto; + } +} + +body { + font-family: var(--font-sans); + font-size: 1rem; + line-height: 1.7; + color: var(--color-text); + background: var(--color-bg); + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + color: inherit; + text-decoration: none; +} + +img, svg { + display: block; + max-width: 100%; +} + +button, input, textarea, select { + font: inherit; + color: inherit; + background: none; + border: none; +} + +button { + cursor: pointer; +} + +ul, ol { + list-style: none; +} + +address { + font-style: normal; +} + +/* Navigation */ +.main-nav { + position: fixed; + top: 0; + inset-inline: 0; + z-index: 1000; + padding: var(--space-sm) var(--space-md); + transition: background 0.3s, padding 0.3s; +} + +.main-nav.scrolled { + background: rgba(10, 10, 11, 0.95); + backdrop-filter: blur(10px); + padding: var(--space-xs) var(--space-md); +} + +.nav-inner { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-logo { + display: flex; + align-items: center; + gap: var(--space-xs); + font-weight: 700; + font-size: 1.1rem; + transition: color 0.3s; +} + +.nav-logo:hover, +.nav-logo:focus { + color: var(--color-accent); +} + +.logo-icon { + width: 36px; + height: 36px; + color: var(--color-accent); +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + padding: 10px; + z-index: 1001; +} + +.nav-toggle span { + display: block; + width: 24px; + height: 2px; + background: var(--color-text); + transition: transform 0.3s, opacity 0.3s; +} + +.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-links { + display: flex; + align-items: center; + gap: var(--space-md); +} + +.nav-links a { + position: relative; + font-size: 0.9rem; + font-weight: 500; + transition: color 0.3s; +} + +.nav-links a:not(.nav-cta):hover, +.nav-links a:not(.nav-cta):focus { + color: var(--color-accent); +} + +.nav-links a:not(.nav-cta)::after { + content: ''; + position: absolute; + bottom: -4px; + inset-inline-start: 0; + width: 0; + height: 2px; + background: var(--color-accent); + transition: width 0.3s var(--ease-out-expo); +} + +.nav-links a:not(.nav-cta):hover::after, +.nav-links a:not(.nav-cta):focus::after { + width: 100%; +} + +.nav-links a.active { + color: var(--color-accent); +} + +.nav-cta { + padding: 0.6rem 1.4rem; + background: var(--color-accent); + border-radius: 4px; + transition: background 0.3s, transform 0.3s; +} + +.nav-cta:hover, +.nav-cta:focus { + background: var(--color-accent-light); + transform: translateY(-2px); +} + +@media (max-width: 768px) { + .nav-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 0; + inset-inline-end: 0; + bottom: 0; + width: 280px; + flex-direction: column; + align-items: flex-start; + padding: var(--space-xl) var(--space-md); + background: var(--color-bg-elevated); + transform: translateX(calc(100% * var(--dir-multiplier, 1))); + transition: transform 0.4s var(--ease-out-expo); + visibility: hidden; + } + + [dir="rtl"] .nav-links { + --dir-multiplier: -1; + } + + [dir="ltr"] .nav-links, + :not([dir]) .nav-links { + --dir-multiplier: 1; + } + + .nav-links.open { + transform: translateX(0); + visibility: visible; + } + + .nav-links a { + font-size: 1.2rem; + } +} + +/* Hero */ +.hero { + min-height: 100vh; + min-height: 100dvh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + padding: var(--space-xl) var(--space-md); +} + +.hero-bg { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.hero-enso { + position: absolute; + width: min(70vw, 500px); + height: min(70vw, 500px); + color: var(--color-accent); + opacity: 0.12; +} + +.enso-circle { + stroke-dasharray: 1; + stroke-dashoffset: 1; + animation: drawEnso 2.5s var(--ease-out-expo) forwards; + animation-delay: 0.3s; +} + +@keyframes drawEnso { + to { + stroke-dashoffset: 0; + } +} + +.hero-lines { + position: absolute; + inset: 0; + display: flex; + justify-content: space-around; + padding: 0 15%; + pointer-events: none; +} + +.hero-lines span { + width: 1px; + height: 100%; + background: linear-gradient(to bottom, transparent, var(--color-surface) 30%, var(--color-surface) 70%, transparent); + opacity: 0.2; +} + +.hero-content { + position: relative; + text-align: center; + z-index: 1; +} + +.hero-subtitle { + font-size: 0.85rem; + letter-spacing: 0.15em; + color: var(--color-text-muted); + margin-bottom: var(--space-md); + text-transform: uppercase; +} + +.hero-title { + font-family: var(--font-serif); + font-size: clamp(2.5rem, 10vw, 6rem); + font-weight: 700; + line-height: 1.1; + margin-bottom: var(--space-md); +} + +.title-line { + display: block; +} + +.title-accent { + color: var(--color-accent); +} + +.hero-tagline { + font-size: clamp(1.1rem, 2.5vw, 1.4rem); + color: var(--color-text-muted); + margin-bottom: var(--space-lg); + max-width: 400px; + margin-inline: auto; +} + +.hero-cta { + display: inline-flex; + align-items: center; + gap: var(--space-sm); + padding: 1rem 2rem; + font-size: 1rem; + font-weight: 600; + background: var(--color-accent); + color: var(--color-text); + border-radius: 4px; + transition: all 0.4s var(--ease-out-expo); +} + +.hero-cta svg { + width: 20px; + height: 20px; + transition: transform 0.4s var(--ease-out-expo); +} + +.hero-cta:hover, +.hero-cta:focus { + background: var(--color-accent-light); + transform: scale(1.05); +} + +.hero-cta:hover svg, +.hero-cta:focus svg { + transform: translateX(var(--arrow-transform)); +} + +.scroll-indicator { + position: absolute; + bottom: var(--space-md); + inset-inline-start: 50%; + transform: translateX(calc(-50% * var(--dir-flip, 1))); + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-xs); + font-size: 0.75rem; + color: var(--color-text-muted); + animation: bounce 2s infinite; + padding: var(--space-xs); + transition: color 0.3s; +} + +[dir="rtl"] .scroll-indicator { + --dir-flip: -1; +} + +.scroll-indicator:hover, +.scroll-indicator:focus { + color: var(--color-accent); +} + +.scroll-indicator svg { + width: 20px; + height: 20px; +} + +@keyframes bounce { + 0%, 100% { transform: translateX(calc(-50% * var(--dir-flip, 1))) translateY(0); } + 50% { transform: translateX(calc(-50% * var(--dir-flip, 1))) translateY(8px); } +} + +[dir="rtl"] @keyframes bounce { + 0%, 100% { transform: translateX(50%) translateY(0); } + 50% { transform: translateX(50%) translateY(8px); } +} + +/* Reveal Animations */ +.reveal-text, +.reveal-up { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); +} + +.reveal-text.visible, +.reveal-up.visible { + opacity: 1; + transform: translateY(0); +} + +/* Sections */ +.section { + padding: var(--space-xl) var(--space-md); + position: relative; +} + +@media (max-width: 768px) { + .section { + padding: var(--space-lg) var(--space-sm); + } +} + +.section-inner { + max-width: 1100px; + margin: 0 auto; +} + +.section-grid { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1.3fr; + gap: var(--space-lg); + align-items: center; +} + +@media (max-width: 900px) { + .section-grid { + grid-template-columns: 1fr; + text-align: center; + } +} + +.section-title { + font-family: var(--font-serif); + font-size: clamp(1.8rem, 4vw, 2.8rem); + font-weight: 700; + margin-bottom: var(--space-md); + line-height: 1.2; +} + +.section-title-center { + text-align: center; +} + +.title-jp { + display: block; + font-size: 0.5em; + color: var(--color-accent); + letter-spacing: 0.25em; + margin-bottom: var(--space-xs); + font-family: var(--font-sans); + font-weight: 400; +} + +@media (max-width: 480px) { + .title-jp { + font-size: 0.55em; + } +} + +.section-text { + font-size: 1.05rem; + color: var(--color-text-muted); + margin-bottom: var(--space-sm); + max-width: 55ch; + line-height: 1.8; +} + +.section-intro { + font-size: 1.1rem; + color: var(--color-text-muted); + text-align: center; + max-width: 50ch; + margin: 0 auto var(--space-lg); + line-height: 1.7; +} + +/* About Section */ +.section-about { + background: var(--color-bg-elevated); +} + +.about-visual { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 350px; +} + +.kanji-ai { + width: 180px; + height: 180px; + position: relative; + z-index: 1; +} + +.kanji-text { + font-family: serif; + font-size: 110px; + fill: var(--color-accent); + opacity: 0.85; +} + +.visual-circle { + position: absolute; + width: 260px; + height: 260px; + border: 1px solid var(--color-surface); + border-radius: 50%; + animation: rotate 40s linear infinite; +} + +.visual-circle::before { + content: ''; + position: absolute; + top: -4px; + left: 50%; + width: 8px; + height: 8px; + background: var(--color-accent); + border-radius: 50%; + transform: translateX(-50%); +} + +@keyframes rotate { + to { transform: rotate(360deg); } +} + +.features-list { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-top: var(--space-md); +} + +.feature { + display: flex; + align-items: center; + gap: var(--space-sm); + font-size: 0.95rem; +} + +.feature svg { + flex-shrink: 0; + width: 20px; + height: 20px; + color: var(--color-accent); +} + +@media (max-width: 900px) { + .about-visual { + order: -1; + min-height: 280px; + } + + .features-list { + align-items: center; + } +} + +/* Philosophy Section */ +.section-philosophy { + background: var(--color-bg); + overflow: hidden; +} + +.philosophy-bg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: min(90vw, 600px); + height: min(90vw, 600px); + opacity: 0.4; + pointer-events: none; +} + +.tomoe { + width: 100%; + height: 100%; + color: var(--color-accent); + animation: slowRotate 80s linear infinite; +} + +@keyframes slowRotate { + to { transform: rotate(360deg); } +} + +.principles { + display: grid; + grid-template-columns: 1.2fr 1fr 1fr; + gap: var(--space-md); + position: relative; + z-index: 1; +} + +@media (max-width: 900px) { + .principles { + grid-template-columns: 1fr; + max-width: 400px; + margin: 0 auto; + } +} + +.principle { + padding: var(--space-md); + background: var(--color-bg-elevated); + border: 1px solid var(--color-surface); + text-align: center; + transition: transform 0.4s var(--ease-out-expo), border-color 0.4s; +} + +.principle:hover, +.principle:focus-within { + transform: translateY(-5px); + border-color: var(--color-accent); +} + +.principle-featured { + padding: var(--space-lg) var(--space-md); + background: linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%); + border-color: var(--color-accent); +} + +@media (max-width: 900px) { + .principle-featured { + order: -1; + } +} + +.principle-icon { + width: 60px; + height: 60px; + margin: 0 auto var(--space-sm); + color: var(--color-accent); +} + +.principle-featured .principle-icon { + color: var(--color-text); +} + +.principle h3 { + font-family: var(--font-serif); + font-size: 1.3rem; + margin-bottom: var(--space-xs); +} + +.principle p { + color: var(--color-text-muted); + font-size: 0.9rem; + line-height: 1.7; +} + +.principle-featured p { + color: rgba(255, 255, 255, 0.9); +} + +/* Classes Section */ +.section-classes { + background: linear-gradient(to bottom, var(--color-bg-elevated), var(--color-bg)); +} + +.classes-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-md); +} + +@media (max-width: 1000px) { + .classes-grid { + grid-template-columns: 1fr; + max-width: 450px; + margin: 0 auto; + } +} + +.class-card { + position: relative; + padding: var(--space-md); + background: var(--color-surface); + border: 1px solid transparent; + border-radius: 6px; + transition: transform 0.4s var(--ease-out-expo), border-color 0.4s, box-shadow 0.4s; +} + +.class-card:hover, +.class-card:focus-within { + transform: translateY(-5px); + border-color: var(--color-accent); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.class-card-featured { + background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent)); + border-color: var(--color-accent); + grid-row: span 1; +} + +@media (max-width: 1000px) { + .class-card-featured { + order: -1; + } +} + +.class-badge { + position: absolute; + top: -10px; + inset-inline-start: var(--space-md); + padding: 0.3rem 0.8rem; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + background: var(--color-gold); + color: var(--color-bg); + border-radius: 2px; +} + +.class-card-featured .class-level { + background: var(--color-text); + color: var(--color-accent); +} + +.class-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-sm); +} + +.class-level { + padding: 0.25rem 0.6rem; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + background: var(--color-accent); + border-radius: 2px; +} + +.class-age { + font-size: 0.8rem; + color: var(--color-text-muted); +} + +.class-card-featured .class-age { + color: rgba(255, 255, 255, 0.8); +} + +.class-card h3 { + font-family: var(--font-serif); + font-size: 1.35rem; + margin-bottom: var(--space-xs); +} + +.class-card p { + font-size: 0.9rem; + color: var(--color-text-muted); + margin-bottom: var(--space-md); + line-height: 1.7; +} + +.class-card-featured p { + color: rgba(255, 255, 255, 0.85); +} + +.class-schedule { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: var(--space-sm); +} + +.class-schedule li { + display: flex; + justify-content: space-between; + font-size: 0.85rem; + padding: 0.25rem 0; +} + +.class-schedule span { + color: var(--color-text-muted); +} + +.class-card-featured .class-schedule span { + color: rgba(255, 255, 255, 0.7); +} + +.class-schedule time { + font-weight: 600; + font-feature-settings: 'tnum'; + direction: ltr; +} + +/* Dojo Section */ +.section-dojo { + display: grid; + grid-template-columns: 1fr 1.2fr; + min-height: 70vh; +} + +@media (max-width: 900px) { + .section-dojo { + grid-template-columns: 1fr; + min-height: auto; + } +} + +.dojo-visual { + position: relative; + background: var(--color-bg-elevated); + display: flex; + align-items: center; + justify-content: center; + min-height: 350px; + overflow: hidden; +} + +.tatami-grid { + position: absolute; + inset: 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: 2px; + padding: var(--space-md); + opacity: 0.25; +} + +.tatami-grid span { + background: linear-gradient(135deg, var(--color-surface), transparent); + border: 1px solid var(--color-surface); +} + +.dojo-torii { + position: relative; + width: 160px; + height: 120px; + color: var(--color-accent); + z-index: 1; +} + +.dojo-content { + padding: var(--space-lg); + display: flex; + flex-direction: column; + justify-content: center; +} + +@media (max-width: 900px) { + .dojo-content { + padding: var(--space-lg) var(--space-md); + text-align: center; + } +} + +.dojo-features { + margin-top: var(--space-md); +} + +.dojo-features li { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) 0; + border-bottom: 1px solid var(--color-surface); + font-size: 0.95rem; +} + +.dojo-features svg { + flex-shrink: 0; + width: 22px; + height: 22px; + color: var(--color-accent); +} + +@media (max-width: 900px) { + .dojo-features li { + justify-content: center; + } +} + +/* Contact Section */ +.section-contact { + background: var(--color-bg); + overflow: hidden; +} + +.contact-bg { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; +} + +.contact-enso { + width: min(80vw, 500px); + height: min(80vw, 500px); + color: var(--color-accent); +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1.3fr 1fr; + gap: var(--space-lg); + position: relative; + z-index: 1; +} + +@media (max-width: 900px) { + .contact-wrapper { + grid-template-columns: 1fr; + } +} + +.contact-form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-md); + background: var(--color-bg-elevated); + padding: var(--space-lg); + border-radius: 8px; + border: 1px solid var(--color-surface); +} + +@media (max-width: 600px) { + .contact-form { + grid-template-columns: 1fr; + padding: var(--space-md); + } +} + +.form-group { + position: relative; +} + +.form-group-full { + grid-column: 1 / -1; +} + +.form-group label { + display: block; + font-size: 0.85rem; + font-weight: 600; + color: var(--color-text); + margin-bottom: var(--space-xs); +} + +.required { + color: var(--color-accent); +} + +.form-group input, +.form-group textarea, +.form-group select { + width: 100%; + padding: 0.8rem var(--space-sm); + background: var(--color-surface); + border: 1px solid var(--color-surface); + border-radius: 4px; + transition: border-color 0.3s, box-shadow 0.3s; +} + +.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='%23b0b0b5' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: left 12px center; + padding-inline-start: var(--space-sm); + padding-inline-end: 2.5rem; +} + +[dir="rtl"] .form-group select { + background-position: left 12px center; +} + +[dir="ltr"] .form-group select, +:not([dir]) .form-group select { + background-position: right 12px center; +} + +.form-group input:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: var(--color-gold); + box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.2); +} + +.form-group textarea { + resize: vertical; + min-height: 100px; +} + +.submit-btn { + grid-column: 1 / -1; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 1rem 2rem; + background: var(--color-accent); + color: var(--color-text); + font-weight: 600; + font-size: 1rem; + border-radius: 4px; + transition: all 0.4s var(--ease-out-expo); + margin-top: var(--space-xs); +} + +.submit-btn svg { + width: 20px; + height: 20px; + transition: transform 0.4s var(--ease-out-expo); +} + +.submit-btn:hover, +.submit-btn:focus { + background: var(--color-accent-light); +} + +.submit-btn:hover svg, +.submit-btn:focus svg { + transform: translateX(var(--arrow-transform)); +} + +.submit-btn:focus-visible { + outline: 2px solid var(--color-gold); + outline-offset: 2px; +} + +.submit-btn:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +.contact-info { + background: var(--color-bg-elevated); + padding: var(--space-lg); + border-radius: 8px; + border: 1px solid var(--color-surface); +} + +.contact-info h3 { + font-family: var(--font-serif); + font-size: 1.3rem; + margin-bottom: var(--space-md); + color: var(--color-accent); +} + +.info-item { + display: flex; + align-items: flex-start; + gap: var(--space-sm); + margin-bottom: var(--space-sm); + font-size: 0.95rem; +} + +.info-item svg { + flex-shrink: 0; + width: 20px; + height: 20px; + color: var(--color-accent); + margin-top: 2px; +} + +.info-item a { + transition: color 0.3s; +} + +.info-item a:hover, +.info-item a:focus { + color: var(--color-accent); +} + +.placeholder-notice { + font-size: 0.75rem; + color: var(--color-gold); + margin-top: var(--space-xs); + font-style: italic; +} + +.hours { + margin-top: var(--space-md); + padding-top: var(--space-md); + border-top: 1px solid var(--color-surface); +} + +.hours h4 { + font-size: 0.9rem; + font-weight: 600; + margin-bottom: var(--space-xs); + color: var(--color-text); +} + +.hours p { + font-size: 0.95rem; + color: var(--color-text-muted); + line-height: 1.8; +} + +/* Footer */ +.main-footer { + background: var(--color-bg-elevated); + padding: var(--space-lg) var(--space-md); + border-top: 1px solid var(--color-surface); +} + +.footer-inner { + max-width: 1100px; + margin: 0 auto; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: var(--space-md); +} + +@media (max-width: 768px) { + .footer-inner { + grid-template-columns: 1fr; + text-align: center; + gap: var(--space-sm); + } +} + +.footer-brand { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +@media (max-width: 768px) { + .footer-brand { + justify-content: center; + } +} + +.footer-logo { + width: 36px; + height: 36px; + color: var(--color-accent); +} + +.footer-brand-text { + display: flex; + flex-direction: column; +} + +.brand-name { + font-family: var(--font-serif); + font-size: 1rem; + font-weight: 700; +} + +.brand-location { + font-size: 0.75rem; + color: var(--color-text-muted); +} + +.footer-nav { + display: flex; + gap: var(--space-md); + justify-content: center; + flex-wrap: wrap; +} + +.footer-nav a { + font-size: 0.85rem; + color: var(--color-text-muted); + transition: color 0.3s; +} + +.footer-nav a:hover, +.footer-nav a:focus { + color: var(--color-accent); +} + +.footer-copy { + font-size: 0.75rem; + color: var(--color-text-muted); +} + +/* Focus States */ +a:focus-visible, +button:focus-visible { + outline: 2px solid var(--color-gold); + outline-offset: 2px; +} + +/* Selection */ +::selection { + background: var(--color-accent); + color: var(--color-text); +} + +/* Scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--color-bg); +} + +::-webkit-scrollbar-thumb { + background: var(--color-surface); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-accent); +} \ No newline at end of file