commit aa2f615960e1188ee55027052253dfeabb7a7aa6 Author: Jeff Emmett Date: Wed Feb 11 00:21:00 2026 +0000 Initial commit: Tino Andri healing practice website Static site with Dockerfile and docker-compose for Traefik deployment at tino-ardez.jeffemmett.com Co-Authored-By: Claude Opus 4.6 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2f6d0fd --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +Thumbs.db +*.swp +*.swo +*~ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..08c5e0f --- /dev/null +++ b/Dockerfile @@ -0,0 +1,7 @@ +FROM nginx:alpine +COPY nginx.conf /etc/nginx/conf.d/default.conf +COPY index.html /usr/share/nginx/html/ +COPY styles.css /usr/share/nginx/html/ +COPY script.js /usr/share/nginx/html/ +COPY images/ /usr/share/nginx/html/images/ +EXPOSE 80 diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..ed21309 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,14 @@ +services: + tino-ardez: + build: . + restart: unless-stopped + labels: + - "traefik.enable=true" + - "traefik.http.routers.tino-ardez.rule=Host(`tino-ardez.jeffemmett.com`)" + - "traefik.http.services.tino-ardez.loadbalancer.server.port=80" + networks: + - traefik-public + +networks: + traefik-public: + external: true diff --git a/images/engadin-hiking.jpg b/images/engadin-hiking.jpg new file mode 100644 index 0000000..ae6faa9 Binary files /dev/null and b/images/engadin-hiking.jpg differ diff --git a/images/hero-banner.jpg b/images/hero-banner.jpg new file mode 100644 index 0000000..8c1f974 Binary files /dev/null and b/images/hero-banner.jpg differ diff --git a/images/scuol-palace.jpg b/images/scuol-palace.jpg new file mode 100644 index 0000000..76f05dc Binary files /dev/null and b/images/scuol-palace.jpg differ diff --git a/images/testimonials-bg.jpg b/images/testimonials-bg.jpg new file mode 100644 index 0000000..1696e13 Binary files /dev/null and b/images/testimonials-bg.jpg differ diff --git a/images/tino-workshop.jpg b/images/tino-workshop.jpg new file mode 100644 index 0000000..7dd0272 Binary files /dev/null and b/images/tino-workshop.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3de2f57 --- /dev/null +++ b/index.html @@ -0,0 +1,270 @@ + + + + + + Tino Andri | SelbstHeilungsTechnik & QuantenHeilung | Ardez & Scuol + + + + + + + + + + + +
+
+

SelbstHeilungsTechnik & QuantenHeilung

+

Tino Andri

+

Heilung beginnt in dir selbst

+ Termin vereinbaren +
+
+ Tino Andri - SelbstHeilungsTechnik & QuantenHeilung im Engadin +
+
+ + +
+
+
+
+ Tino Andri Portrait +
+
+

Über mich

+
+

Zwischen meinem 18. und 24. Lebensjahr litt ich unter starken Rückenschmerzen durch Bandscheibenvorfälle, einem gerissenen Kreuzband, Meniskusriss, einer ausgekugelten Schulter, zwei Leistenbrüchen und einem geplatzten Blinddarm.

+

Ich fühlte mich körperlich und energetisch am falschen Ort, begleitet von einer tiefen Unzufriedenheit mit meinem Leben.

+

Vor fünf Jahren öffnete mir eine geführte Selbstheilungsmeditation die Augen. Dies weckte mein Interesse daran, wie Heilung funktioniert. Ich besuchte intensive Kurse und praktiziere nun seit vier Jahren.

+

Heute begleite ich Menschen auf ihrem eigenen Heilungsweg – Erwachsene, Jugendliche und Kinder.

+
+
+
+
+
+ + +
+
+

Angebote

+

Ich biete verschiedene Heilungssitzungen an, die auf Ihre individuellen Bedürfnisse abgestimmt sind.

+ +
+
+
+ + + +
+

SelbstHeilungsTechnik (SHT)

+

Eine sanfte Methode, die Ihren Körper dabei unterstützt, seine natürlichen Selbstheilungskräfte zu aktivieren und Blockaden zu lösen.

+
+ +
+
+ + + + + +
+

QuantenHeilung

+

Arbeiten auf der Quantenebene, um tiefgreifende Veränderungen im Energiefeld zu bewirken und das innere Gleichgewicht wiederherzustellen.

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

Sitzungen für alle Altersgruppen

+

Ob Erwachsene, Jugendliche oder Kinder – jeder Mensch kann von der Selbstheilung profitieren. Die Sitzungen werden individuell angepasst.

+
+
+
+
+ + +
+
+
+

"Dein Körper weiss, wie er heilen kann. Manchmal braucht er nur die richtige Unterstützung, um den Weg zu finden."

+ — Tino Andri +
+
+
+ + +
+
+

Standorte

+

Besuchen Sie mich in einem meiner zwei Praxisräume im wunderschönen Engadin.

+ +
+
+
+ Praxis Ardez - Tino Andri Werkstatt +
+
+

Praxis Ardez

+
+ Chanvers 197
+ 7546 Ardez +
+

Im Herzen des malerischen Bergdorfes Ardez, umgeben von der atemberaubenden Engadiner Landschaft.

+
+
+ +
+
+ Scuol Palace - Heilungspraxis +
+
+

Scuol Palace

+
+ Nairs 500
+ 7550 Scuol +
+

Im historischen Scuol Palace, einem Ort der Ruhe und Erholung mit langer Wellness-Tradition.

+
+
+
+
+
+ + +
+
+

Workshops

+

Erleben Sie die Kraft der Selbstheilung in der einzigartigen Atmosphäre der Engadiner Berge.

+ +
+
+ Workshop in den Engadiner Bergen +
+
+ Nächster Workshop +

Selbstheilung in den Bergen

+
+
+ + + + + + + Datum wird bekannt gegeben +
+
+ + + + + Chamonna Cler, Ardez (2475 m ü.M.) +
+
+

Ein besonderes Erlebnis auf 2475 Metern Höhe. Treffpunkt am Bahnhof Ardez um 09:15 Uhr, Aufstieg zur Alp Murtera, gefolgt von einer kurzen 20-minütigen Wanderung zur Chamonna Cler.

+

In der kraftvollen Bergumgebung tauchen wir gemeinsam in die Welt der Selbstheilung ein.

+ Interesse anmelden +
+
+
+
+ + +
+
+
+
+

Kontakt

+

Ich freue mich auf Ihre Nachricht. Gemeinsam finden wir den richtigen Weg für Ihre Heilung.

+ +
+
+ + + + +41 XX XXX XX XX +
+
+ + + + + info@tino-ardez.ch +
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..1228f3f --- /dev/null +++ b/nginx.conf @@ -0,0 +1,19 @@ +server { + listen 80; + server_name _; + root /usr/share/nginx/html; + index index.html; + + location / { + try_files $uri $uri/ /index.html; + } + + location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|webp)$ { + expires 30d; + add_header Cache-Control "public, immutable"; + } + + gzip on; + gzip_types text/plain text/css application/javascript image/svg+xml; + gzip_min_length 256; +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..42477ae --- /dev/null +++ b/script.js @@ -0,0 +1,125 @@ +/** + * Tino Andri - SelbstHeilungsTechnik & QuantenHeilung + * JavaScript functionality + */ + +document.addEventListener('DOMContentLoaded', function() { + // Mobile navigation toggle + const navToggle = document.querySelector('.nav-toggle'); + const navMenu = document.querySelector('.nav-menu'); + + if (navToggle && navMenu) { + navToggle.addEventListener('click', function() { + navToggle.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); + + // Close menu when clicking a link + navMenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => { + navToggle.classList.remove('active'); + navMenu.classList.remove('active'); + }); + }); + } + + // 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 headerOffset = 80; + const elementPosition = target.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - headerOffset; + + window.scrollTo({ + top: offsetPosition, + behavior: 'smooth' + }); + } + }); + }); + + // Reveal elements on scroll + const revealElements = document.querySelectorAll('.section'); + + const revealOnScroll = () => { + const windowHeight = window.innerHeight; + + revealElements.forEach(element => { + const elementTop = element.getBoundingClientRect().top; + const revealPoint = 150; + + if (elementTop < windowHeight - revealPoint) { + element.classList.add('visible'); + } + }); + }; + + // Initial class setup + revealElements.forEach(element => { + element.classList.add('reveal'); + }); + + // Run on load and scroll + revealOnScroll(); + window.addEventListener('scroll', revealOnScroll, { passive: true }); + + // Navigation background change on scroll + const nav = document.querySelector('.nav'); + + const updateNavOnScroll = () => { + if (window.scrollY > 50) { + nav.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)'; + } else { + nav.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.06)'; + } + }; + + window.addEventListener('scroll', updateNavOnScroll, { passive: true }); + + // Form submission (placeholder - replace with actual form handling) + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(this); + const data = Object.fromEntries(formData); + + // Here you would typically send the data to a server + console.log('Form submitted:', data); + + // Show success message (replace with actual implementation) + alert('Vielen Dank für Ihre Nachricht! Ich werde mich bald bei Ihnen melden.'); + this.reset(); + }); + } + + // Active navigation link highlighting + const sections = document.querySelectorAll('section[id]'); + + const highlightNav = () => { + const scrollY = window.pageYOffset; + + sections.forEach(section => { + const sectionHeight = section.offsetHeight; + const sectionTop = section.offsetTop - 100; + const sectionId = section.getAttribute('id'); + const navLink = document.querySelector(`.nav-menu a[href="#${sectionId}"]`); + + if (navLink) { + if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { + navLink.style.color = 'var(--color-primary)'; + } else { + navLink.style.color = ''; + } + } + }); + }; + + window.addEventListener('scroll', highlightNav, { passive: true }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..f7d978e --- /dev/null +++ b/styles.css @@ -0,0 +1,891 @@ +/* ========================================================================== + Tino Andri - SelbstHeilungsTechnik & QuantenHeilung + Modern, calming design for a healing practice + ========================================================================== */ + +/* -------------------------------------------------------------------------- + CSS Variables - Design Tokens + -------------------------------------------------------------------------- */ +:root { + /* Colors - Earthy, calming palette */ + --color-primary: #5a7d6c; /* Sage green */ + --color-primary-dark: #456459; + --color-primary-light: #7a9d8c; + --color-secondary: #c4a77d; /* Warm sand */ + --color-secondary-light: #ddc9a8; + + --color-text: #2d3436; + --color-text-light: #636e72; + --color-text-muted: #95a5a6; + + --color-bg: #faf9f7; /* Warm white */ + --color-bg-alt: #f0eeea; + --color-white: #ffffff; + + /* Typography */ + --font-heading: 'Cormorant Garamond', Georgia, serif; + --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; + + /* Spacing */ + --spacing-xs: 0.5rem; + --spacing-sm: 1rem; + --spacing-md: 2rem; + --spacing-lg: 4rem; + --spacing-xl: 6rem; + + /* Transitions */ + --transition-fast: 0.2s ease; + --transition-base: 0.3s ease; + --transition-slow: 0.5s ease; + + /* Border radius */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 16px; + + /* Shadows */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1); +} + +/* -------------------------------------------------------------------------- + Reset & Base + -------------------------------------------------------------------------- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + font-size: 16px; + line-height: 1.7; + color: var(--color-text); + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +img { + max-width: 100%; + height: auto; + display: block; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--color-primary-dark); +} + +/* -------------------------------------------------------------------------- + Typography + -------------------------------------------------------------------------- */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 500; + line-height: 1.3; + color: var(--color-text); +} + +h1 { font-size: clamp(2.5rem, 5vw, 4rem); } +h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); } +h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } + +p { + margin-bottom: 1rem; +} + +p:last-child { + margin-bottom: 0; +} + +/* -------------------------------------------------------------------------- + Layout + -------------------------------------------------------------------------- */ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-md); +} + +.section { + padding: var(--spacing-xl) 0; +} + +.section-title { + margin-bottom: var(--spacing-md); + position: relative; +} + +.section-title::after { + content: ''; + display: block; + width: 60px; + height: 2px; + background: var(--color-secondary); + margin-top: var(--spacing-sm); +} + +.section-title-center { + text-align: center; +} + +.section-title-center::after { + margin-left: auto; + margin-right: auto; +} + +.section-intro { + text-align: center; + max-width: 600px; + margin: 0 auto var(--spacing-lg); + color: var(--color-text-light); + font-size: 1.1rem; +} + +/* -------------------------------------------------------------------------- + Buttons + -------------------------------------------------------------------------- */ +.btn { + display: inline-block; + padding: 0.875rem 2rem; + font-family: var(--font-body); + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase; + border: none; + border-radius: var(--radius-sm); + cursor: pointer; + transition: all var(--transition-base); +} + +.btn-primary { + background-color: var(--color-primary); + color: var(--color-white); +} + +.btn-primary:hover { + background-color: var(--color-primary-dark); + color: var(--color-white); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + background-color: transparent; + color: var(--color-primary); + border: 2px solid var(--color-primary); +} + +.btn-secondary:hover { + background-color: var(--color-primary); + color: var(--color-white); +} + +.btn-full { + width: 100%; +} + +/* -------------------------------------------------------------------------- + Navigation + -------------------------------------------------------------------------- */ +.nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: rgba(250, 249, 247, 0.95); + backdrop-filter: blur(10px); + box-shadow: var(--shadow-sm); +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--spacing-sm) var(--spacing-md); + max-width: 1200px; + margin: 0 auto; +} + +.nav-logo { + font-family: var(--font-heading); + font-size: 1.5rem; + font-weight: 500; + color: var(--color-text); +} + +.nav-menu { + display: flex; + list-style: none; + gap: var(--spacing-md); +} + +.nav-menu a { + color: var(--color-text); + font-size: 0.9rem; + font-weight: 400; + padding: 0.5rem 0; + position: relative; +} + +.nav-menu a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: var(--color-primary); + transition: width var(--transition-base); +} + +.nav-menu a:hover::after { + width: 100%; +} + +.nav-toggle { + display: none; + flex-direction: column; + gap: 5px; + background: none; + border: none; + cursor: pointer; + padding: 5px; +} + +.nav-toggle span { + display: block; + width: 25px; + height: 2px; + background: var(--color-text); + transition: var(--transition-fast); +} + +/* -------------------------------------------------------------------------- + Hero Section + -------------------------------------------------------------------------- */ +.hero { + min-height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: var(--spacing-lg); + padding: calc(80px + var(--spacing-lg)) var(--spacing-md) var(--spacing-lg); + max-width: 1400px; + margin: 0 auto; +} + +.hero-content { + padding-right: var(--spacing-md); +} + +.hero-subtitle { + color: var(--color-primary); + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 2px; + text-transform: uppercase; + margin-bottom: var(--spacing-sm); +} + +.hero-title { + font-size: clamp(3rem, 6vw, 5rem); + font-weight: 400; + margin-bottom: var(--spacing-sm); + line-height: 1.1; +} + +.hero-tagline { + font-family: var(--font-heading); + font-size: 1.5rem; + font-style: italic; + color: var(--color-text-light); + margin-bottom: var(--spacing-md); +} + +.hero-image { + position: relative; + height: 100%; + min-height: 500px; +} + +.hero-img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: var(--radius-md); +} + +/* -------------------------------------------------------------------------- + Placeholder Images + -------------------------------------------------------------------------- */ +.placeholder-image { + width: 100%; + height: 100%; + min-height: 300px; + background: linear-gradient(135deg, var(--color-bg-alt) 0%, #e8e6e2 100%); + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.placeholder-image::before { + content: attr(data-text); + color: var(--color-text-muted); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 2px; +} + +.placeholder-image::after { + content: ''; + position: absolute; + inset: 0; + border: 2px dashed var(--color-text-muted); + border-radius: var(--radius-md); + opacity: 0.3; + pointer-events: none; +} + +.placeholder-portrait { + aspect-ratio: 3/4; + max-width: 400px; +} + +.placeholder-wide { + aspect-ratio: 16/9; + min-height: 250px; +} + +/* -------------------------------------------------------------------------- + About Section + -------------------------------------------------------------------------- */ +.about { + background: var(--color-white); +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--spacing-lg); + align-items: center; +} + +.about-text p { + color: var(--color-text-light); + font-size: 1.05rem; +} + +.about-text p:first-child::first-letter { + font-family: var(--font-heading); + font-size: 3.5rem; + float: left; + line-height: 1; + margin-right: 0.5rem; + color: var(--color-primary); +} + +.about-img { + width: 100%; + max-width: 400px; + height: auto; + aspect-ratio: 1/1; + object-fit: cover; + border-radius: var(--radius-md); + box-shadow: var(--shadow-md); +} + +/* -------------------------------------------------------------------------- + Services Section + -------------------------------------------------------------------------- */ +.services-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-md); +} + +.service-card { + background: var(--color-white); + padding: var(--spacing-md); + border-radius: var(--radius-md); + text-align: center; + box-shadow: var(--shadow-sm); + transition: all var(--transition-base); +} + +.service-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-md); +} + +.service-icon { + width: 60px; + height: 60px; + margin: 0 auto var(--spacing-sm); + color: var(--color-primary); +} + +.service-icon svg { + width: 100%; + height: 100%; +} + +.service-card h3 { + margin-bottom: var(--spacing-sm); + font-size: 1.25rem; +} + +.service-card p { + color: var(--color-text-light); + font-size: 0.95rem; +} + +/* -------------------------------------------------------------------------- + Quote Section + -------------------------------------------------------------------------- */ +.quote-section { + background: var(--color-primary); + padding: var(--spacing-xl) 0; +} + +.quote { + text-align: center; + max-width: 800px; + margin: 0 auto; +} + +.quote p { + font-family: var(--font-heading); + font-size: clamp(1.5rem, 3vw, 2rem); + font-style: italic; + color: var(--color-white); + line-height: 1.6; + margin-bottom: var(--spacing-sm); +} + +.quote cite { + color: var(--color-secondary-light); + font-style: normal; + font-size: 1rem; +} + +/* -------------------------------------------------------------------------- + Locations Section + -------------------------------------------------------------------------- */ +.locations { + background: var(--color-white); +} + +.locations-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--spacing-md); +} + +.location-card { + background: var(--color-bg); + border-radius: var(--radius-md); + overflow: hidden; + box-shadow: var(--shadow-sm); +} + +.location-img { + width: 100%; + height: 200px; + object-fit: cover; +} + +.location-content { + padding: var(--spacing-md); +} + +.location-content h3 { + margin-bottom: var(--spacing-xs); + color: var(--color-primary); +} + +.location-content address { + font-style: normal; + color: var(--color-text); + margin-bottom: var(--spacing-sm); + line-height: 1.6; +} + +.location-content p { + color: var(--color-text-light); + font-size: 0.95rem; +} + +/* -------------------------------------------------------------------------- + Workshops Section + -------------------------------------------------------------------------- */ +.workshop-card { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-md); + background: var(--color-white); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-md); +} + +.workshop-img { + width: 100%; + height: 100%; + min-height: 400px; + object-fit: cover; +} + +.workshop-content { + padding: var(--spacing-md); + display: flex; + flex-direction: column; + justify-content: center; +} + +.workshop-tag { + display: inline-block; + background: var(--color-secondary-light); + color: var(--color-text); + padding: 0.25rem 0.75rem; + border-radius: var(--radius-sm); + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: var(--spacing-sm); + align-self: flex-start; +} + +.workshop-content h3 { + font-size: 1.75rem; + margin-bottom: var(--spacing-sm); +} + +.workshop-details { + display: flex; + flex-direction: column; + gap: var(--spacing-xs); + margin-bottom: var(--spacing-sm); +} + +.workshop-detail { + display: flex; + align-items: center; + gap: var(--spacing-xs); + color: var(--color-text-light); + font-size: 0.95rem; +} + +.workshop-detail svg { + width: 20px; + height: 20px; + color: var(--color-primary); + flex-shrink: 0; +} + +.workshop-content p { + color: var(--color-text-light); + margin-bottom: var(--spacing-sm); +} + +.workshop-content .btn { + align-self: flex-start; + margin-top: var(--spacing-sm); +} + +/* -------------------------------------------------------------------------- + Contact Section + -------------------------------------------------------------------------- */ +.contact { + background: var(--color-bg-alt); +} + +.contact-grid { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: var(--spacing-lg); + align-items: start; +} + +.contact-info p { + color: var(--color-text-light); + margin-bottom: var(--spacing-md); +} + +.contact-details { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); +} + +.contact-item { + display: flex; + align-items: center; + gap: var(--spacing-sm); +} + +.contact-item svg { + width: 24px; + height: 24px; + color: var(--color-primary); + flex-shrink: 0; +} + +.contact-form { + background: var(--color-white); + padding: var(--spacing-md); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); +} + +.form-group { + margin-bottom: var(--spacing-sm); +} + +.form-group label { + display: block; + margin-bottom: 0.25rem; + font-size: 0.9rem; + font-weight: 600; + color: var(--color-text); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.75rem 1rem; + font-family: var(--font-body); + font-size: 1rem; + border: 1px solid #ddd; + border-radius: var(--radius-sm); + transition: border-color var(--transition-fast); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--color-primary); +} + +.form-group textarea { + resize: vertical; +} + +/* -------------------------------------------------------------------------- + Footer + -------------------------------------------------------------------------- */ +.footer { + background: var(--color-text); + color: var(--color-white); + padding: var(--spacing-lg) 0 var(--spacing-md); +} + +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--spacing-md); + padding-bottom: var(--spacing-md); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer-logo { + font-family: var(--font-heading); + font-size: 1.5rem; +} + +.footer-brand p { + color: rgba(255, 255, 255, 0.6); + font-size: 0.9rem; + margin-top: 0.25rem; +} + +.footer-links { + display: flex; + gap: var(--spacing-md); +} + +.footer-links a { + color: rgba(255, 255, 255, 0.7); + font-size: 0.9rem; +} + +.footer-links a:hover { + color: var(--color-white); +} + +.footer-bottom { + text-align: center; +} + +.footer-bottom p { + color: rgba(255, 255, 255, 0.5); + font-size: 0.85rem; +} + +/* -------------------------------------------------------------------------- + Responsive Design + -------------------------------------------------------------------------- */ +@media (max-width: 1024px) { + .hero { + grid-template-columns: 1fr; + min-height: auto; + padding-top: calc(80px + var(--spacing-md)); + } + + .hero-content { + padding-right: 0; + text-align: center; + } + + .hero-image { + min-height: 400px; + order: -1; + } + + .about-grid { + grid-template-columns: 1fr; + } + + .about-image { + display: flex; + justify-content: center; + } + + .services-grid { + grid-template-columns: repeat(2, 1fr); + } + + .workshop-card { + grid-template-columns: 1fr; + } + + .workshop-img { + min-height: 250px; + } + + .contact-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .nav-menu { + position: fixed; + top: 60px; + left: 0; + right: 0; + background: var(--color-bg); + flex-direction: column; + padding: var(--spacing-md); + gap: var(--spacing-sm); + box-shadow: var(--shadow-md); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + transition: all var(--transition-base); + } + + .nav-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + .nav-toggle { + display: flex; + } + + .nav-toggle.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .nav-toggle.active span:nth-child(2) { + opacity: 0; + } + + .nav-toggle.active span:nth-child(3) { + transform: rotate(-45deg) translate(5px, -5px); + } + + .services-grid { + grid-template-columns: 1fr; + } + + .locations-grid { + grid-template-columns: 1fr; + } + + .footer-content { + flex-direction: column; + text-align: center; + gap: var(--spacing-md); + } + + .footer-links { + flex-wrap: wrap; + justify-content: center; + } +} + +@media (max-width: 480px) { + :root { + --spacing-md: 1.5rem; + --spacing-lg: 3rem; + --spacing-xl: 4rem; + } + + .btn { + padding: 0.75rem 1.5rem; + font-size: 0.85rem; + } +} + +/* -------------------------------------------------------------------------- + Animations + -------------------------------------------------------------------------- */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in-up { + animation: fadeInUp 0.6s ease forwards; +} + +/* Reveal on scroll - add via JavaScript */ +.reveal { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +}