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 <noreply@anthropic.com>
This commit is contained in:
commit
aa2f615960
|
|
@ -0,0 +1,5 @@
|
|||
.DS_Store
|
||||
Thumbs.db
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
|
|
@ -0,0 +1,270 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Tino Andri | SelbstHeilungsTechnik & QuantenHeilung | Ardez & Scuol</title>
|
||||
<meta name="description" content="Tino Andri bietet SelbstHeilungsTechnik und QuantenHeilung für Erwachsene, Jugendliche und Kinder in Ardez und Scuol, Engadin.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Nunito+Sans:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<a href="#" class="nav-logo">Tino Andri</a>
|
||||
<button class="nav-toggle" aria-label="Menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#about">Über mich</a></li>
|
||||
<li><a href="#services">Angebote</a></li>
|
||||
<li><a href="#locations">Standorte</a></li>
|
||||
<li><a href="#workshops">Workshops</a></li>
|
||||
<li><a href="#contact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<header class="hero">
|
||||
<div class="hero-content">
|
||||
<p class="hero-subtitle">SelbstHeilungsTechnik & QuantenHeilung</p>
|
||||
<h1 class="hero-title">Tino Andri</h1>
|
||||
<p class="hero-tagline">Heilung beginnt in dir selbst</p>
|
||||
<a href="#contact" class="btn btn-primary">Termin vereinbaren</a>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<img src="images/hero-banner.jpg" alt="Tino Andri - SelbstHeilungsTechnik & QuantenHeilung im Engadin" class="hero-img">
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="section about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-image">
|
||||
<img src="images/testimonials-bg.jpg" alt="Tino Andri Portrait" class="about-img">
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<h2 class="section-title">Über mich</h2>
|
||||
<div class="about-text">
|
||||
<p>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.</p>
|
||||
<p>Ich fühlte mich körperlich und energetisch am falschen Ort, begleitet von einer tiefen Unzufriedenheit mit meinem Leben.</p>
|
||||
<p>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.</p>
|
||||
<p>Heute begleite ich Menschen auf ihrem eigenen Heilungsweg – Erwachsene, Jugendliche und Kinder.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="section services">
|
||||
<div class="container">
|
||||
<h2 class="section-title section-title-center">Angebote</h2>
|
||||
<p class="section-intro">Ich biete verschiedene Heilungssitzungen an, die auf Ihre individuellen Bedürfnisse abgestimmt sind.</p>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>SelbstHeilungsTechnik (SHT)</h3>
|
||||
<p>Eine sanfte Methode, die Ihren Körper dabei unterstützt, seine natürlichen Selbstheilungskräfte zu aktivieren und Blockaden zu lösen.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||
<path d="M2 12h20"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>QuantenHeilung</h3>
|
||||
<p>Arbeiten auf der Quantenebene, um tiefgreifende Veränderungen im Energiefeld zu bewirken und das innere Gleichgewicht wiederherzustellen.</p>
|
||||
</div>
|
||||
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Sitzungen für alle Altersgruppen</h3>
|
||||
<p>Ob Erwachsene, Jugendliche oder Kinder – jeder Mensch kann von der Selbstheilung profitieren. Die Sitzungen werden individuell angepasst.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quote Section -->
|
||||
<section class="quote-section">
|
||||
<div class="container">
|
||||
<blockquote class="quote">
|
||||
<p>"Dein Körper weiss, wie er heilen kann. Manchmal braucht er nur die richtige Unterstützung, um den Weg zu finden."</p>
|
||||
<cite>— Tino Andri</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Locations Section -->
|
||||
<section id="locations" class="section locations">
|
||||
<div class="container">
|
||||
<h2 class="section-title section-title-center">Standorte</h2>
|
||||
<p class="section-intro">Besuchen Sie mich in einem meiner zwei Praxisräume im wunderschönen Engadin.</p>
|
||||
|
||||
<div class="locations-grid">
|
||||
<div class="location-card">
|
||||
<div class="location-image">
|
||||
<img src="images/tino-workshop.jpg" alt="Praxis Ardez - Tino Andri Werkstatt" class="location-img">
|
||||
</div>
|
||||
<div class="location-content">
|
||||
<h3>Praxis Ardez</h3>
|
||||
<address>
|
||||
Chanvers 197<br>
|
||||
7546 Ardez
|
||||
</address>
|
||||
<p>Im Herzen des malerischen Bergdorfes Ardez, umgeben von der atemberaubenden Engadiner Landschaft.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="location-card">
|
||||
<div class="location-image">
|
||||
<img src="images/scuol-palace.jpg" alt="Scuol Palace - Heilungspraxis" class="location-img">
|
||||
</div>
|
||||
<div class="location-content">
|
||||
<h3>Scuol Palace</h3>
|
||||
<address>
|
||||
Nairs 500<br>
|
||||
7550 Scuol
|
||||
</address>
|
||||
<p>Im historischen Scuol Palace, einem Ort der Ruhe und Erholung mit langer Wellness-Tradition.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Workshops Section -->
|
||||
<section id="workshops" class="section workshops">
|
||||
<div class="container">
|
||||
<h2 class="section-title section-title-center">Workshops</h2>
|
||||
<p class="section-intro">Erleben Sie die Kraft der Selbstheilung in der einzigartigen Atmosphäre der Engadiner Berge.</p>
|
||||
|
||||
<div class="workshop-card">
|
||||
<div class="workshop-image">
|
||||
<img src="images/engadin-hiking.jpg" alt="Workshop in den Engadiner Bergen" class="workshop-img">
|
||||
</div>
|
||||
<div class="workshop-content">
|
||||
<span class="workshop-tag">Nächster Workshop</span>
|
||||
<h3>Selbstheilung in den Bergen</h3>
|
||||
<div class="workshop-details">
|
||||
<div class="workshop-detail">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
||||
<line x1="16" y1="2" x2="16" y2="6"/>
|
||||
<line x1="8" y1="2" x2="8" y2="6"/>
|
||||
<line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
<span>Datum wird bekannt gegeben</span>
|
||||
</div>
|
||||
<div class="workshop-detail">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<span>Chamonna Cler, Ardez (2475 m ü.M.)</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>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.</p>
|
||||
<p>In der kraftvollen Bergumgebung tauchen wir gemeinsam in die Welt der Selbstheilung ein.</p>
|
||||
<a href="#contact" class="btn btn-secondary">Interesse anmelden</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section contact">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info">
|
||||
<h2 class="section-title">Kontakt</h2>
|
||||
<p>Ich freue mich auf Ihre Nachricht. Gemeinsam finden wir den richtigen Weg für Ihre Heilung.</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<div class="contact-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||
</svg>
|
||||
<span>+41 XX XXX XX XX</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<span>info@tino-ardez.ch</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" action="#" method="POST">
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Telefon (optional)</label>
|
||||
<input type="tel" id="phone" name="phone">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Nachricht</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-full">Nachricht senden</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">Tino Andri</span>
|
||||
<p>SelbstHeilungsTechnik & QuantenHeilung</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="#about">Über mich</a>
|
||||
<a href="#services">Angebote</a>
|
||||
<a href="#locations">Standorte</a>
|
||||
<a href="#workshops">Workshops</a>
|
||||
<a href="#contact">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 Tino Andri. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 });
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue