Floating Flows static site + Coolify Dockerfile deploy
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
.git
|
||||
.gitignore
|
||||
.claude
|
||||
.hallmark
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
README.md
|
||||
.DS_Store
|
||||
**/.DS_Store
|
||||
@@ -0,0 +1,3 @@
|
||||
.DS_Store
|
||||
**/.DS_Store
|
||||
.claude/
|
||||
@@ -0,0 +1,3 @@
|
||||
[
|
||||
{ "date": "2026-06-17", "macrostructure": "Marquee Hero", "theme": "custom", "theme_axes": "light / high-contrast-serif / warm", "vibe": "calm sun-warmed grounded premium acroyoga", "enrichment": "photographic placeholders (Unsplash + gradient fallback)", "brief": "Floating Flows · premium AcroYoga studio · mobile-first redesign of floatingflows.com/v2, DNA from ommm.yoga" }
|
||||
]
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
# Floating Flows — static site served by nginx
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
# Site files into the nginx web root
|
||||
COPY . /usr/share/nginx/html
|
||||
|
||||
# Custom server config (gzip + asset caching)
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,29 @@
|
||||
# Floating Flows
|
||||
|
||||
Premium AcroYoga website for Floating Flows (Freiburg). Static HTML/CSS/JS — no build step.
|
||||
|
||||
- `index.html` — landing page (video hero, courses, location, reviews, booking, photo carousel, contact)
|
||||
- `courses.html` — full course details
|
||||
- `about.html` — about / story
|
||||
- `css/` — design system (`tokens.css`) + styles (`styles.css`)
|
||||
- `assets/` — images, video, brand
|
||||
|
||||
## Deploy (Coolify + Dockerfile)
|
||||
|
||||
This repo ships a `Dockerfile` that serves the static files with nginx on port **80**.
|
||||
|
||||
In Coolify:
|
||||
1. **New Resource → Application** from this Git repository.
|
||||
2. **Build Pack:** `Dockerfile`.
|
||||
3. **Port:** `80`.
|
||||
4. **Domain:** `floatingflows.george1.dev` (ensure DNS `A`/`CNAME` points at the Coolify host).
|
||||
5. Deploy.
|
||||
|
||||
## Run locally
|
||||
|
||||
Any static server works, e.g.:
|
||||
|
||||
```bash
|
||||
python3 -m http.server 4599
|
||||
# open http://localhost:4599
|
||||
```
|
||||
+149
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>About — Floating Flows AcroYoga Freiburg</title>
|
||||
<meta name="description" content="The story behind Floating Flows — premium AcroYoga in Freiburg with Luciana. Built on trust, breath and the joy of flight." />
|
||||
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Lato:wght@400;700;900&family=Poiret+One&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="nav nav--solid" id="nav">
|
||||
<div class="wrap nav__inner">
|
||||
<a class="brand" href="index.html" aria-label="Floating Flows home">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
<a href="courses.html">Courses</a>
|
||||
<a href="index.html#experience">The Practice</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="nav__right">
|
||||
<div class="nav__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
<a class="btn nav__cta" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="drawer"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="drawer" id="drawer" aria-hidden="true">
|
||||
<a class="drawer__link" href="courses.html">Courses</a>
|
||||
<a class="drawer__link" href="index.html#experience">The Practice</a>
|
||||
<a class="drawer__link" href="about.html">About</a>
|
||||
<a class="drawer__link" href="index.html#contact">Contact</a>
|
||||
<div class="drawer__meta">
|
||||
<a href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class →</a>
|
||||
<span>Seepark Glashaus · Freiburg</span>
|
||||
<div class="drawer__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pagehead">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Our story</p>
|
||||
<h1>We teach people to <span class="accent">trust</span> — and then to fly.</h1>
|
||||
<p class="lede">Floating Flows began with a simple belief: that connection is a practice, and everyone deserves the feeling of being held.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="wrap about-grid">
|
||||
<div class="about-portrait reveal">
|
||||
<img src="assets/img/bridge-tower.jpg" alt="AcroYoga practice at the covered bridge in Freiburg" />
|
||||
</div>
|
||||
<div class="prose reveal" data-d="1">
|
||||
<p class="first">Floating Flows is premium AcroYoga in Freiburg — a calm, light-filled practice where partner acrobatics, breath and therapeutic touch come together. We are a place to arrive, to let go, and to discover what your body can do with another’s support.</p>
|
||||
<p>Classes are led by <strong>Luciana</strong> — mindful, patient and endlessly encouraging. Groups are kept small so no one is rushed and no one is left behind, whether it’s your first time giving weight or your hundredth flight.</p>
|
||||
<p>More than a studio, we’re a community. The kind where you arrive a stranger and leave knowing names — where a shared potluck or a cup of tea is as much the practice as the poses themselves.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section experience">
|
||||
<div class="wrap">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">What we hold to</p>
|
||||
<h2 style="font-family:var(--font-display);font-size:clamp(1.9rem,5.5vw,var(--text-3xl));font-weight:400;max-width:18ch;margin-bottom:var(--space-2xl);">Three things we never compromise.</h2>
|
||||
</div>
|
||||
<div class="values">
|
||||
<div class="value reveal"><h3><span class="no">01</span>Safety, always</h3><p>Every flight is spotted, every progression earned. We practise fall training and build confidence slowly, so trust is a foundation — never a leap of faith.</p></div>
|
||||
<div class="value reveal" data-d="1"><h3><span class="no">02</span>Everyone belongs</h3><p>No partner, no experience and no particular body required. We work in rotating teams, so our room is for beginners and flyers alike, exactly as they are.</p></div>
|
||||
<div class="value reveal" data-d="2"><h3><span class="no">03</span>Joy is the point</h3><p>Beneath the skill is something simpler: play. We protect the laughter, the lightness and the delight of moving together.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section booking">
|
||||
<div class="wrap">
|
||||
<div class="booking__panel" style="grid-template-columns:1fr;text-align:center;justify-items:center;">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow" style="justify-content:center;">Begin</p>
|
||||
<h2 style="margin-bottom:var(--space-md);">Your first flight is waiting.</h2>
|
||||
<p class="booking__lede" style="margin-inline:auto;margin-bottom:var(--space-lg);">Come as you are. We’ll handle the rest.</p>
|
||||
<div class="booking__cta" style="justify-content:center;">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<a class="btn btn--ghost" href="mailto:floatingflows@web.de">floatingflows@web.de</a>
|
||||
</div>
|
||||
<div class="icons" style="justify-content:center;margin-top:var(--space-lg);">
|
||||
<a class="icon-btn icon-btn--lg" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__top">
|
||||
<div>
|
||||
<div class="brand" style="margin-bottom:var(--space-sm);">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</div>
|
||||
<p>Premium AcroYoga in Freiburg — trust, breath and the quiet joy of flight. For every body, every level.</p>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--on-night" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__cols">
|
||||
<div><h4>Explore</h4><a href="courses.html">Courses</a><a href="about.html">About</a></div>
|
||||
<div><h4>Visit</h4><a href="index.html#location">Location</a><a href="index.html#booking">Book</a><a href="index.html#contact">Contact</a></div>
|
||||
<div><h4>Connect</h4><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a><a href="mailto:floatingflows@web.de">floatingflows@web.de</a><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom"><span>© 2026 Floating Flows · Luciana · Freiburg</span><span>Made for movement.</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var toggle = document.getElementById('navToggle');
|
||||
var drawer = document.getElementById('drawer');
|
||||
var close = function(){ document.body.classList.remove('menu-open'); toggle.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); };
|
||||
toggle.addEventListener('click', function(){ var open = document.body.classList.toggle('menu-open'); toggle.setAttribute('aria-expanded', open); drawer.setAttribute('aria-hidden', !open); });
|
||||
drawer.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', close); });
|
||||
document.addEventListener('keydown', function(e){ if(e.key==='Escape') close(); });
|
||||
var io = new IntersectionObserver(function(entries){ entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } }); }, {threshold: 0.12, rootMargin: '0px 0px -40px 0px'});
|
||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+224
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Courses — Floating Flows AcroYoga Freiburg</title>
|
||||
<meta name="description" content="AcroYoga courses in Freiburg with Luciana — Beginner Flows, Classic Washing Machines 1, the Absolute Beginner workshop and private personal training." />
|
||||
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Lato:wght@400;700;900&family=Poiret+One&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="nav nav--solid" id="nav">
|
||||
<div class="wrap nav__inner">
|
||||
<a class="brand" href="index.html" aria-label="Floating Flows home">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
<a href="courses.html">Courses</a>
|
||||
<a href="index.html#experience">The Practice</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="index.html#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="nav__right">
|
||||
<div class="nav__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
<a class="btn nav__cta" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="drawer"><span></span><span></span><span></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="drawer" id="drawer" aria-hidden="true">
|
||||
<a class="drawer__link" href="courses.html">Courses</a>
|
||||
<a class="drawer__link" href="index.html#experience">The Practice</a>
|
||||
<a class="drawer__link" href="about.html">About</a>
|
||||
<a class="drawer__link" href="index.html#contact">Contact</a>
|
||||
<div class="drawer__meta">
|
||||
<a href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class →</a>
|
||||
<span>Seepark Glashaus · Freiburg</span>
|
||||
<div class="drawer__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="pagehead">
|
||||
<div class="wrap">
|
||||
<p class="eyebrow">Courses & Workshops</p>
|
||||
<h1>Term courses, <span class="accent">workshops</span> & private training.</h1>
|
||||
<p class="lede">All courses are taught by Luciana in small, attentive groups. You never need to bring a partner — we work in rotating teams.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BEGINNER FLOWS -->
|
||||
<section class="course" id="beginner-flows">
|
||||
<div class="wrap course__grid">
|
||||
<div class="course__head-wrap">
|
||||
<span class="course__num">01 / Term Course</span>
|
||||
<h2>Beginner Flows</h2>
|
||||
<p class="lede">A continuation of the Absolute Beginner 1 & 2 workshops — seven sessions to solidify the basics and grow into confident, flowing movement.</p>
|
||||
</div>
|
||||
<aside class="course__facts">
|
||||
<div class="fact"><span>Starts</span><strong>12 June 2026</strong></div>
|
||||
<div class="fact"><span>Schedule</span><strong>Thursdays, 18:30–20:00<small>18 & 25 Jun · 2, 9, 16, 23 Jul · +1 by arrangement</small></strong></div>
|
||||
<div class="fact"><span>Location</span><strong>Seepark Glashaus<small>Brandensteinstraße 24, 79110 Freiburg</small></strong></div>
|
||||
<div class="fact fact--price"><span>Energy exchange</span><strong>€126<small>full course · 7 sessions</small></strong></div>
|
||||
</aside>
|
||||
<div class="course__body">
|
||||
<p>In seven sessions (six fixed dates plus one by arrangement) we review the basics from Absolute Beginner 1 & 2 to create a solid foundation for more complex flows.</p>
|
||||
<p>The core of the course is four short beginner flows, which you’ll learn step by step and practise together as a group. Over the weeks we build confidence in the individual positions, the transitions between them, and the interplay between base, flyer and spotter.</p>
|
||||
<p>Alongside figures and transitions, we focus on fall training, breathing, and the foundations of a safe AcroYoga practice. It’s the ideal preparation for the Washing Machine 1 course.</p>
|
||||
<h3>Good to know</h3>
|
||||
<ul>
|
||||
<li>No partner required — we work in rotating teams. Couples are very welcome too.</li>
|
||||
<li>Drop-in via Hansefit is possible — please get in touch first.</li>
|
||||
<li>The content builds week to week, so attending as many sessions as possible is recommended.</li>
|
||||
</ul>
|
||||
<div class="callout">After registering, please message Luciana so she can add you to the course Signal group.</div>
|
||||
<div class="course__cta">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book this course</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">floatingflows@web.de <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WASHING MACHINES -->
|
||||
<section class="course" id="washing-machines">
|
||||
<div class="wrap course__grid">
|
||||
<div class="course__head-wrap">
|
||||
<span class="course__num">02 / Term Course</span>
|
||||
<h2>Classic Washing Machines 1</h2>
|
||||
<p class="lede">The natural next step after Beginner Flows — review the basics and link figures into continuous, flowing “washing machine” rotations.</p>
|
||||
</div>
|
||||
<aside class="course__facts">
|
||||
<div class="fact"><span>Starts</span><strong>18 June 2026</strong></div>
|
||||
<div class="fact"><span>Schedule</span><strong>Thursdays, 18:30–20:00<small>18 & 25 Jun · 2, 9, 16, 23 Jul · +1 by arrangement</small></strong></div>
|
||||
<div class="fact"><span>Location</span><strong>Seepark Glashaus<small>Brandensteinstraße 24, 79110 Freiburg</small></strong></div>
|
||||
<div class="fact fact--price"><span>Energy exchange</span><strong>€126<small>full course · 7 sessions</small></strong></div>
|
||||
</aside>
|
||||
<div class="course__body">
|
||||
<p>Over seven sessions (six fixed dates plus one by arrangement) we review the basics to create a strong foundation for more complex flows, then begin to connect figures into smooth, continuous transitions.</p>
|
||||
<p>We develop confidence in the individual positions, the transitions between them, and the interplay between base, flyer and spotter — supported throughout by fall training, breathing and safe practice.</p>
|
||||
<p>This course is perfect if you want to consolidate your figures and transitions and gain more experience applying them in flowing movement.</p>
|
||||
<h3>Good to know</h3>
|
||||
<ul>
|
||||
<li>No partner required — we work in rotating teams. Couples are welcome.</li>
|
||||
<li>Drop-in via Hansefit is possible — please get in touch first.</li>
|
||||
<li>The content builds on itself, so regular attendance is recommended.</li>
|
||||
</ul>
|
||||
<div class="callout">After registering, please message Luciana so she can add you to the course Signal group.</div>
|
||||
<div class="course__cta">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book this course</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">floatingflows@web.de <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABSOLUTE BEGINNER -->
|
||||
<section class="course" id="absolute-beginner">
|
||||
<div class="wrap course__grid">
|
||||
<div class="course__head-wrap">
|
||||
<span class="course__num">03 / Beginner Workshop</span>
|
||||
<h2>Absolute Beginner 1 · Freiburg Outdoor</h2>
|
||||
<p class="lede">A warm, mindful introduction for complete beginners — and the perfect way to bring a friend, partner or family member into the world of AcroYoga.</p>
|
||||
</div>
|
||||
<aside class="course__facts">
|
||||
<div class="fact"><span>Date</span><strong>28 June 2026</strong></div>
|
||||
<div class="fact"><span>Time</span><strong>10:00–16:00<small>two 2.5-hour sessions</small></strong></div>
|
||||
<div class="fact"><span>Location</span><strong>Seepark Glashaus — outdoor<small>Brandensteinstraße 24, 79110 Freiburg</small></strong></div>
|
||||
<div class="fact"><span>Includes</span><strong>Potluck & Thai massage<small>shared vegetarian break + guided relaxation</small></strong></div>
|
||||
</aside>
|
||||
<div class="course__body">
|
||||
<p>This workshop is for complete beginners of any age — and for anyone who would like to introduce their loved ones, friends or relatives to AcroYoga with support.</p>
|
||||
<p>Across two 2.5-hour sessions, Luciana mindfully teaches you the basics. During the break in between we share a vegetarian potluck. To close, you can look forward to a guided Thai massage for deep relaxation.</p>
|
||||
<div class="callout">Please bring something to share for the potluck, and warm clothes for the Thai massage.</div>
|
||||
<div class="course__cta">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Reserve a place</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">floatingflows@web.de <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PERSONAL TRAINING -->
|
||||
<section class="course" id="personal-training">
|
||||
<div class="wrap course__grid">
|
||||
<div class="course__head-wrap">
|
||||
<span class="course__num">04 / Private</span>
|
||||
<h2>Personal Training · 90 minutes</h2>
|
||||
<p class="lede">Prefer to train at home, can’t make the course dates, or want to work on something specific? Private sessions come to you.</p>
|
||||
</div>
|
||||
<aside class="course__facts">
|
||||
<div class="fact"><span>Format</span><strong>90 minutes<small>for 2 people</small></strong></div>
|
||||
<div class="fact"><span>Where</span><strong>Your home<small>anywhere within Freiburg · 4 cm safety mats provided</small></strong></div>
|
||||
<div class="fact fact--price"><span>Booking</span><strong>via Hansefit<small>plus €16 surcharge</small></strong></div>
|
||||
<div class="fact"><span>To arrange</span><strong>0176 35708720<small>call to discuss goals & a date</small></strong></div>
|
||||
</aside>
|
||||
<div class="course__body">
|
||||
<p>Ninety minutes of personal training for two people, bookable via Hansefit (plus a €16 surcharge). I’ll come to your home anywhere within Freiburg and bring 4 cm thick puzzle mats for your safety, and together we’ll work individually on your AcroYoga goals.</p>
|
||||
<h3>My repertoire</h3>
|
||||
<ul>
|
||||
<li>All AcroYoga poses and flows — except Icarians (pops and throws with brief loss of contact).</li>
|
||||
<li>Standing acrobatics is not currently offered.</li>
|
||||
</ul>
|
||||
<p>We always discuss your goals and a suitable date beforehand. Feel free to call me — I look forward to hearing from you.</p>
|
||||
<div class="course__cta">
|
||||
<a class="btn" href="tel:+4917635708720">Call 0176 35708720</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">floatingflows@web.de <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__top">
|
||||
<div>
|
||||
<div class="brand" style="margin-bottom:var(--space-sm);">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</div>
|
||||
<p>Premium AcroYoga in Freiburg — trust, breath and the quiet joy of flight. For every body, every level.</p>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--on-night" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__cols">
|
||||
<div><h4>Explore</h4><a href="courses.html">Courses</a><a href="about.html">About</a></div>
|
||||
<div><h4>Visit</h4><a href="index.html#location">Location</a><a href="index.html#booking">Book</a><a href="index.html#contact">Contact</a></div>
|
||||
<div><h4>Connect</h4><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a><a href="mailto:floatingflows@web.de">floatingflows@web.de</a><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom"><span>© 2026 Floating Flows · Luciana · Freiburg</span><span>Made for movement.</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
var toggle = document.getElementById('navToggle');
|
||||
var drawer = document.getElementById('drawer');
|
||||
var close = function(){ document.body.classList.remove('menu-open'); toggle.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); };
|
||||
toggle.addEventListener('click', function(){ var open = document.body.classList.toggle('menu-open'); toggle.setAttribute('aria-expanded', open); drawer.setAttribute('aria-hidden', !open); });
|
||||
drawer.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', close); });
|
||||
document.addEventListener('keydown', function(e){ if(e.key==='Escape') close(); });
|
||||
var io = new IntersectionObserver(function(entries){ entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } }); }, {threshold: 0.1, rootMargin: '0px 0px -40px 0px'});
|
||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+464
@@ -0,0 +1,464 @@
|
||||
/* Hallmark · macrostructure: Marquee Hero · tone: luxury · anchor hue: terracotta 40
|
||||
* Floating Flows — premium AcroYoga · mobile-first
|
||||
* pre-emit critique: P5 H5 E5 S4 R5 V5
|
||||
*/
|
||||
@import url("tokens.css");
|
||||
|
||||
/* ============ Reset / base ============ */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { overflow-x: clip; }
|
||||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-paper);
|
||||
color: var(--color-ink);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-display);
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
min-width: 0;
|
||||
}
|
||||
p { margin: 0; }
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ============ Layout helpers ============ */
|
||||
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
|
||||
.section { padding-block: clamp(2.75rem, 6.5vw, 6.5rem); }
|
||||
.eyebrow {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: var(--tracking-cap);
|
||||
text-transform: uppercase;
|
||||
color: var(--color-accent-deep);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.6em;
|
||||
}
|
||||
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--color-accent); display: inline-block; }
|
||||
.lede { font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: var(--color-ink-soft); max-width: 52ch; line-height: 1.5; }
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
.btn {
|
||||
--btn-bg: var(--color-accent);
|
||||
--btn-fg: var(--color-shell);
|
||||
display: inline-flex; align-items: center; gap: 0.55rem;
|
||||
font-family: var(--font-body); font-weight: 700;
|
||||
font-size: var(--text-sm); letter-spacing: 0.04em;
|
||||
padding: 0.95rem 1.7rem;
|
||||
background: var(--btn-bg); color: var(--btn-fg);
|
||||
border: none; border-radius: var(--radius-pill);
|
||||
cursor: pointer; white-space: nowrap;
|
||||
transition: transform var(--dur-fast) var(--ease-out),
|
||||
background var(--dur-fast) var(--ease-out),
|
||||
box-shadow var(--dur-mid) var(--ease-out);
|
||||
box-shadow: 0 12px 30px -16px oklch(52% 0.108 38 / 0.6);
|
||||
}
|
||||
.btn:hover { background: var(--color-accent-deep); transform: translateY(-2px); box-shadow: 0 18px 38px -16px oklch(52% 0.108 38 / 0.7); }
|
||||
.btn:active { transform: translateY(0); }
|
||||
.btn--ghost {
|
||||
--btn-bg: transparent; --btn-fg: var(--color-ink);
|
||||
border: 1px solid var(--color-line-2); box-shadow: none;
|
||||
}
|
||||
.btn--ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink-soft); }
|
||||
.btn--light { --btn-bg: var(--color-shell); --btn-fg: var(--color-ink); }
|
||||
.btn--light:hover { background: var(--color-paper-2); }
|
||||
.link-arrow {
|
||||
display: inline-flex; align-items: center; gap: 0.45rem;
|
||||
font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.03em;
|
||||
color: var(--color-accent-deep); white-space: nowrap;
|
||||
}
|
||||
.link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }
|
||||
.link-arrow:hover svg { transform: translateX(4px); }
|
||||
|
||||
/* ============ Nav ============ */
|
||||
.nav {
|
||||
position: fixed; inset: 0 0 auto 0; z-index: 60;
|
||||
transition: background var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
|
||||
}
|
||||
.nav__inner {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding-block: 1.1rem; gap: var(--space-md);
|
||||
}
|
||||
.brand { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; color: var(--color-ink); }
|
||||
.brand b { color: var(--color-accent-deep); font-weight: 500; }
|
||||
.nav--solid { background: oklch(97.8% 0.012 78 / 0.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--color-line); }
|
||||
.nav__links { display: none; flex-wrap: nowrap; white-space: nowrap; }
|
||||
.nav__links a { white-space: nowrap; }
|
||||
.nav__links a { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-soft); position: relative; transition: color var(--dur-fast) var(--ease-out); }
|
||||
.nav__links a:hover { color: var(--color-ink); }
|
||||
.nav__links a::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background: var(--color-accent); transition: width var(--dur-mid) var(--ease-out); }
|
||||
.nav__links a:hover::after { width: 100%; }
|
||||
.nav__cta { display: none; }
|
||||
.nav__toggle {
|
||||
display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
|
||||
width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer;
|
||||
}
|
||||
.nav__toggle span { height: 2px; width: 100%; background: var(--color-ink); border-radius: 2px; transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast); }
|
||||
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
|
||||
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
|
||||
/* Mobile drawer */
|
||||
.drawer {
|
||||
position: fixed; inset: 0; z-index: 55;
|
||||
background: var(--color-paper);
|
||||
display: flex; flex-direction: column; justify-content: center; gap: var(--space-md);
|
||||
padding: var(--space-3xl) clamp(1.5rem, 8vw, 3rem) var(--space-2xl);
|
||||
transform: translateY(-100%); opacity: 0; pointer-events: none;
|
||||
transition: transform var(--dur-slow) var(--ease-in-out), opacity var(--dur-mid) var(--ease-out);
|
||||
}
|
||||
body.menu-open .drawer { transform: translateY(0); opacity: 1; pointer-events: auto; }
|
||||
.drawer a.drawer__link { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3rem); color: var(--color-ink); }
|
||||
.drawer a.drawer__link:hover { color: var(--color-accent-deep); }
|
||||
.drawer__meta { margin-top: var(--space-xl); color: var(--color-ink-soft); font-size: var(--text-sm); display: flex; flex-direction: column; gap: 0.4rem; }
|
||||
.drawer__meta a { text-decoration: underline; text-underline-offset: 3px; }
|
||||
|
||||
/* ============ Hero — video split ============ */
|
||||
/* Mobile: full-bleed autoplay video background, light text overlaid at the bottom */
|
||||
.hero { position: relative; color: var(--color-on-night); overflow: clip; background: var(--color-night); }
|
||||
.hero__media { position: absolute; inset: 0; z-index: 0; background: linear-gradient(160deg, var(--color-accent-soft), var(--color-paper-3) 40%, var(--color-night) 120%); margin: 0; }
|
||||
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, oklch(24% 0.02 54 / 0.46) 0%, oklch(24% 0.02 54 / 0.30) 42%, oklch(22% 0.02 54 / 0.86) 100%); }
|
||||
.hero__grid { position: relative; z-index: 1; width: 100%; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.hero__inner, .hero__text { padding-block: clamp(2.25rem, 7vh, 4.5rem) clamp(2.25rem, 6vh, 4rem); width: 100%; }
|
||||
.hero__text { position: relative; z-index: 2; }
|
||||
.hero__eyebrow { color: var(--color-on-night); }
|
||||
.hero__eyebrow::before { background: var(--color-accent-soft); }
|
||||
.hero h1 { font-size: var(--text-display); font-weight: 400; margin-top: var(--space-md); max-width: 14ch; text-shadow: 0 2px 30px oklch(20% 0.02 54 / 0.4); }
|
||||
.hero h1 em { font-style: normal; color: var(--color-accent-soft); }
|
||||
.hero__sub { margin-top: var(--space-lg); max-width: 46ch; font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--color-on-night-soft); line-height: 1.5; text-shadow: 0 1px 16px oklch(20% 0.02 54 / 0.55); }
|
||||
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
|
||||
.hero__scroll { margin-top: var(--space-xl); display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--text-xs); letter-spacing: var(--tracking-cap); text-transform: uppercase; color: var(--color-on-night-soft); }
|
||||
.hero__scroll span { width: 1px; height: 2.4rem; background: linear-gradient(var(--color-on-night-soft), transparent); display: inline-block; }
|
||||
|
||||
/* Floating review chip on hero */
|
||||
.hero__quote { margin-top: var(--space-xl); border-top: 1px solid oklch(95% 0.012 78 / 0.25); padding-top: var(--space-md); max-width: 38ch; }
|
||||
.hero__quote p { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; color: var(--color-on-night); }
|
||||
.hero__quote cite { display:block; margin-top: 0.5rem; font-style: normal; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-soft); }
|
||||
|
||||
.hero__ghost { --btn-fg: var(--color-on-night); border-color: oklch(95% 0.012 78 / 0.45); background: oklch(95% 0.012 78 / 0.06); }
|
||||
.hero__ghost:hover { background: oklch(95% 0.012 78 / 0.16); border-color: var(--color-on-night); }
|
||||
|
||||
/* Desktop: split — text on cream (left), contained tall video frame (right). No awkward 9:16 crop. */
|
||||
@media (min-width: 960px) {
|
||||
.hero__ghost { --btn-fg: var(--color-ink); border-color: var(--color-line-2); background: transparent; }
|
||||
.hero__ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink-soft); }
|
||||
.hero { display: flex; align-items: center; color: var(--color-ink); background: var(--color-paper); min-height: min(98vh, 1000px); padding-top: 5rem; }
|
||||
.hero__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; min-height: auto; }
|
||||
.hero__media { position: relative; inset: auto; z-index: 1; border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 4/5; max-height: 88vh; box-shadow: var(--shadow-soft); }
|
||||
.hero__media::after { background: linear-gradient(180deg, transparent 55%, oklch(24% 0.02 54 / 0.30) 100%); }
|
||||
.hero__text { padding-block: 0; padding-right: clamp(0.5rem, 2vw, 2rem); }
|
||||
.hero h1 { font-size: clamp(3rem, 5.4vw, 5.4rem); line-height: 1.03; max-width: 12ch; margin-top: var(--space-lg); }
|
||||
.hero__sub { margin-top: var(--space-lg); max-width: 42ch; }
|
||||
.hero__actions { margin-top: var(--space-xl); }
|
||||
.hero__quote { margin-top: var(--space-xl); }
|
||||
.hero__scroll { display: none; }
|
||||
.hero__eyebrow { display: none; }
|
||||
.hero__eyebrow::before { background: var(--color-accent); }
|
||||
.hero h1 { text-shadow: none; }
|
||||
.hero h1 em { color: var(--color-accent-deep); }
|
||||
.hero__sub { color: var(--color-ink-soft); text-shadow: none; }
|
||||
.hero__scroll { color: var(--color-ink-faint); }
|
||||
.hero__scroll span { background: linear-gradient(var(--color-ink-faint), transparent); }
|
||||
.hero__quote { border-top-color: var(--color-line-2); }
|
||||
.hero__quote p { color: var(--color-ink); }
|
||||
.hero__quote cite { color: var(--color-accent-deep); }
|
||||
}
|
||||
|
||||
/* ============ Brand lockup ============ */
|
||||
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
|
||||
.brand__icon { width: 50px; height: 50px; object-fit: contain; display: block; flex-shrink: 0; }
|
||||
.brand__name { font-family: var(--font-brand); font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink); line-height: 1; font-weight: 400; white-space: nowrap; }
|
||||
.brand__name b { font-weight: 400; color: var(--color-accent-deep); }
|
||||
.footer .brand__name { color: var(--color-on-night); }
|
||||
.footer .brand__icon { width: 44px; height: 44px; }
|
||||
|
||||
/* Mobile: smaller logo, wordmark stacked (Floating / Flows) aligned to the icon, both words bold */
|
||||
@media (max-width: 959px) {
|
||||
.brand { gap: 0.6rem; }
|
||||
.brand__icon { width: 42px; height: 42px; }
|
||||
.brand__name { display: flex; flex-direction: column; font-size: 0.95rem; line-height: 1.05; letter-spacing: 0.13em; font-weight: 700; white-space: nowrap; }
|
||||
.brand__name b { display: block; font-weight: 700; }
|
||||
/* Over the dark hero video (nav transparent) — light + legible */
|
||||
.nav:not(.nav--solid) .brand__name { color: var(--color-shell); text-shadow: 0 1px 14px oklch(18% 0.02 54 / 0.6); }
|
||||
.nav:not(.nav--solid) .brand__name b { color: var(--color-accent-soft); }
|
||||
.nav:not(.nav--solid) .brand__icon { filter: drop-shadow(0 1px 7px oklch(18% 0.02 54 / 0.6)); }
|
||||
.nav:not(.nav--solid) .nav__toggle span { background: var(--color-shell); box-shadow: 0 1px 7px oklch(18% 0.02 54 / 0.5); }
|
||||
}
|
||||
|
||||
/* ============ Contact / social icon buttons ============ */
|
||||
.icons { display: inline-flex; align-items: center; gap: 0.5rem; }
|
||||
.icon-btn {
|
||||
width: 42px; height: 42px; border-radius: var(--radius-pill);
|
||||
display: inline-grid; place-items: center;
|
||||
border: 1px solid var(--color-line-2); color: var(--color-ink); background: transparent;
|
||||
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
|
||||
border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
|
||||
}
|
||||
.icon-btn svg { width: 18px; height: 18px; }
|
||||
.icon-btn:hover { background: var(--color-accent); color: var(--color-shell); border-color: var(--color-accent); transform: translateY(-2px); }
|
||||
.icon-btn--lg { width: 62px; height: 62px; }
|
||||
.icon-btn--lg svg { width: 24px; height: 24px; }
|
||||
.contact__links .icons { gap: 0.75rem; margin-top: var(--space-lg) !important; }
|
||||
.icon-btn--on-night { border-color: oklch(95% 0.012 78 / 0.22); color: var(--color-on-night); }
|
||||
.icon-btn--on-night:hover { background: var(--color-accent); color: var(--color-shell); border-color: var(--color-accent); }
|
||||
|
||||
/* ============ Ethos / intro ============ */
|
||||
.ethos { background: var(--color-paper); }
|
||||
.ethos__grid { display: grid; gap: var(--space-xl); }
|
||||
.ethos h2 { font-size: clamp(1.9rem, 5.5vw, var(--text-3xl)); font-weight: 400; max-width: 18ch; }
|
||||
.ethos h2 .accent { color: var(--color-accent-deep); }
|
||||
.ethos__cols { display: grid; gap: var(--space-lg); }
|
||||
.ethos__cols p { color: var(--color-ink-soft); }
|
||||
|
||||
/* ============ Offerings ============ */
|
||||
.offer__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
|
||||
.offer__head h2 { font-size: clamp(2rem, 6vw, var(--text-3xl)); font-weight: 400; max-width: 16ch; }
|
||||
.offer__list { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
|
||||
.offer-card {
|
||||
position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm);
|
||||
background: var(--color-shell);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-lg); padding: var(--space-lg);
|
||||
overflow: clip;
|
||||
transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
|
||||
}
|
||||
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--color-line-2); }
|
||||
.offer-card__num { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-accent-deep); letter-spacing: 0.1em; }
|
||||
.offer-card h3 { font-size: var(--text-xl); font-weight: 500; }
|
||||
.offer-card p { color: var(--color-ink-soft); font-size: var(--text-sm); }
|
||||
.offer-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-faint); letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
.offer-card__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
|
||||
.offer-card__meta span::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent-soft); }
|
||||
|
||||
/* ============ Experience (image + steps) ============ */
|
||||
.experience { background: var(--color-paper-2); }
|
||||
.experience__media { border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 4/5; background: linear-gradient(150deg, var(--color-accent-soft), var(--color-paper-3)); }
|
||||
.experience__media img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.experience h2 { font-size: clamp(1.9rem, 5.5vw, var(--text-3xl)); font-weight: 400; margin-bottom: var(--space-lg); max-width: 16ch; }
|
||||
.steps { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }
|
||||
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; }
|
||||
.step__no { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-accent); line-height: 1; width: 2.2rem; }
|
||||
.step h3 { font-size: var(--text-lg); font-weight: 500; margin-bottom: 0.25rem; }
|
||||
.step p { color: var(--color-ink-soft); font-size: var(--text-sm); }
|
||||
|
||||
/* ============ Location (Glashaus) ============ */
|
||||
.location { background: var(--color-paper); }
|
||||
.location__grid { display: grid; gap: var(--space-xl); align-items: center; }
|
||||
.location__media { position: relative; }
|
||||
.location__main { border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 4/5; background: linear-gradient(150deg, var(--color-accent-soft), var(--color-paper-3)); box-shadow: var(--shadow-soft); }
|
||||
.location__main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
|
||||
.location__main:hover img { transform: scale(1.04); }
|
||||
.location__inset { display: none; }
|
||||
@media (min-width: 820px) {
|
||||
.location__inset { display: block; position: absolute; right: -16px; bottom: -22px; width: 46%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-md); border: 6px solid var(--color-paper); box-shadow: var(--shadow-soft); }
|
||||
}
|
||||
.location h2 { font-size: clamp(1.9rem, 5.5vw, var(--text-3xl)); font-weight: 400; max-width: 16ch; margin-top: var(--space-md); }
|
||||
.location__lede { margin-top: var(--space-md); color: var(--color-ink-soft); font-size: clamp(1.05rem,2.4vw,1.2rem); line-height: 1.55; max-width: 46ch; }
|
||||
.location__notes { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
|
||||
.location__note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-sm); align-items: start; }
|
||||
.location__note svg { width: 20px; height: 20px; color: var(--color-accent); margin-top: 2px; }
|
||||
.location__note p { color: var(--color-ink-soft); font-size: var(--text-sm); }
|
||||
.location__addr { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
|
||||
@media (min-width: 820px) {
|
||||
.location__grid { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-2xl); }
|
||||
.location--rev .location__media { order: 2; }
|
||||
}
|
||||
|
||||
/* ============ Ambient video band ============ */
|
||||
.ambient { position: relative; overflow: clip; min-height: 62vh; display: grid; place-items: center; text-align: center; color: var(--color-on-night); background: var(--color-night); }
|
||||
.ambient__media { position: absolute; inset: 0; z-index: 0; }
|
||||
.ambient__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.ambient__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, oklch(22% 0.02 54 / 0.55), oklch(22% 0.02 54 / 0.62)); }
|
||||
.ambient__inner { position: relative; z-index: 2; padding: var(--space-3xl) var(--space-lg); max-width: 34ch; }
|
||||
.ambient__inner .eyebrow { color: var(--color-accent-soft); justify-content: center; }
|
||||
.ambient__inner .eyebrow::before { background: var(--color-accent-soft); }
|
||||
.ambient__inner h2 { font-size: clamp(2rem, 6vw, var(--text-4xl)); font-weight: 400; margin-top: var(--space-md); text-shadow: 0 2px 24px oklch(20% 0.02 54 / 0.5); }
|
||||
.ambient__inner p { margin-top: var(--space-md); color: var(--color-on-night-soft); text-shadow: 0 1px 14px oklch(20% 0.02 54 / 0.5); }
|
||||
|
||||
/* ============ Reviews ============ */
|
||||
.reviews { background: var(--color-night); color: var(--color-on-night); }
|
||||
.reviews .eyebrow { color: var(--color-accent-soft); }
|
||||
.reviews .eyebrow::before { background: var(--color-accent-soft); }
|
||||
.reviews h2 { color: var(--color-on-night); font-size: clamp(1.9rem, 5.5vw, var(--text-3xl)); font-weight: 400; max-width: 18ch; margin-top: var(--space-md); }
|
||||
.reviews__grid { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); grid-template-columns: 1fr; }
|
||||
.review {
|
||||
background: var(--color-night-2);
|
||||
border: 1px solid oklch(95% 0.012 78 / 0.08);
|
||||
border-radius: var(--radius-md); padding: var(--space-lg);
|
||||
display: flex; flex-direction: column; gap: var(--space-md);
|
||||
}
|
||||
.review__stars { color: var(--color-accent-soft); letter-spacing: 0.18em; font-size: var(--text-sm); }
|
||||
.review p { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4; color: var(--color-on-night); }
|
||||
.review cite { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-night-soft); }
|
||||
|
||||
/* ============ Booking ============ */
|
||||
.booking { background: var(--color-paper); }
|
||||
.booking__panel {
|
||||
background: var(--color-shell);
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: clamp(1.75rem, 5vw, var(--space-2xl));
|
||||
display: grid; gap: var(--space-xl);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
.booking h2 { font-size: clamp(2rem, 6vw, var(--text-3xl)); font-weight: 400; max-width: 14ch; }
|
||||
.booking__lede { color: var(--color-ink-soft); max-width: 44ch; }
|
||||
.passes { display: grid; gap: var(--space-sm); }
|
||||
.pass { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-top: 1px solid var(--color-line); }
|
||||
.pass:first-child { border-top: none; }
|
||||
.pass__name { font-weight: 700; font-size: var(--text-base); }
|
||||
.pass__name small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
|
||||
.pass__price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent-deep); white-space: nowrap; }
|
||||
.booking__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
|
||||
.booking__note { font-size: var(--text-xs); color: var(--color-ink-faint); }
|
||||
|
||||
/* ============ Contact / Instagram ============ */
|
||||
.contact { background: var(--color-paper-3); }
|
||||
.contact__grid { display: grid; gap: var(--space-xl); }
|
||||
.contact h2 { font-size: clamp(2rem, 6vw, var(--text-4xl)); font-weight: 400; max-width: 12ch; }
|
||||
.contact__links { display: grid; gap: var(--space-md); }
|
||||
.contact__row { display: flex; flex-direction: column; gap: 0.15rem; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-line-2); }
|
||||
.contact__row span { font-size: var(--text-xs); letter-spacing: var(--tracking-cap); text-transform: uppercase; color: var(--color-ink-faint); }
|
||||
.contact__row a { font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, var(--text-2xl)); color: var(--color-ink); transition: color var(--dur-fast); }
|
||||
.contact__row a:hover { color: var(--color-accent-deep); }
|
||||
.contact__intro { margin-top: var(--space-md); color: var(--color-ink-soft); max-width: 38ch; font-size: clamp(1.02rem, 2.2vw, 1.18rem); }
|
||||
|
||||
/* Auto-scrolling photo marquee */
|
||||
.marquee-band { padding-block: clamp(2.25rem, 5vw, 4.5rem); background: var(--color-paper); overflow: clip; }
|
||||
.marquee-band .marquee { margin-top: 0; }
|
||||
.marquee { margin-top: clamp(2rem, 5vw, var(--space-3xl)); width: 100%; overflow: clip; --mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: var(--mask); mask-image: var(--mask); }
|
||||
.marquee__track { display: flex; gap: var(--space-md); width: max-content; animation: marquee-scroll 60s linear infinite; }
|
||||
.marquee:hover .marquee__track { animation-play-state: paused; }
|
||||
.marquee__item { flex: 0 0 auto; width: clamp(240px, 30vw, 420px); aspect-ratio: 4/5; border-radius: var(--radius-md); overflow: clip; background: var(--color-paper-3); display: block; box-shadow: var(--shadow-soft); }
|
||||
.marquee__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
|
||||
.marquee__item:hover img { transform: scale(1.05); }
|
||||
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||||
|
||||
/* ============ Footer ============ */
|
||||
.footer { background: var(--color-night); color: var(--color-on-night-soft); padding-block: var(--space-2xl) var(--space-xl); }
|
||||
.footer__top { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid oklch(95% 0.012 78 / 0.1); }
|
||||
.footer__brand { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-on-night); }
|
||||
.footer__brand + p { margin-top: var(--space-sm); max-width: 36ch; font-size: var(--text-sm); }
|
||||
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); }
|
||||
.footer__cols h4 { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-cap); text-transform: uppercase; color: var(--color-on-night); margin-bottom: var(--space-sm); }
|
||||
.footer__cols a, .footer__cols p { display: block; font-size: var(--text-sm); color: var(--color-on-night-soft); margin-bottom: 0.5rem; transition: color var(--dur-fast); }
|
||||
.footer__cols a:hover { color: var(--color-accent-soft); }
|
||||
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-ink-faint); }
|
||||
|
||||
/* ============ Page header (about) ============ */
|
||||
.pagehead { padding-top: clamp(7rem, 18vh, 11rem); padding-bottom: clamp(2.5rem, 7vw, var(--space-3xl)); background: var(--color-paper-2); }
|
||||
.pagehead h1 { font-size: var(--text-display-s); font-weight: 400; max-width: 16ch; margin-top: var(--space-md); }
|
||||
.pagehead h1 .accent { color: var(--color-accent-deep); }
|
||||
.pagehead .lede { margin-top: var(--space-lg); }
|
||||
|
||||
/* about */
|
||||
.about-portrait { border-radius: var(--radius-lg); overflow: clip; aspect-ratio: 3/4; background: linear-gradient(150deg, var(--color-accent-soft), var(--color-paper-3)); }
|
||||
.about-portrait img { width:100%; height:100%; object-fit: cover; }
|
||||
.prose { max-width: var(--maxw-text); display: grid; gap: var(--space-md); }
|
||||
.prose p { color: var(--color-ink-soft); }
|
||||
.prose p.first::first-letter { font-family: var(--font-display); font-size: 3.4rem; line-height: 0.8; float: left; padding: 0.1em 0.12em 0 0; color: var(--color-accent-deep); }
|
||||
.values { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
|
||||
.value h3 { font-size: var(--text-lg); font-weight: 500; margin-bottom: 0.35rem; }
|
||||
.value h3 .no { color: var(--color-accent); font-size: var(--text-sm); margin-right: 0.5rem; }
|
||||
.value p { color: var(--color-ink-soft); font-size: var(--text-sm); }
|
||||
|
||||
/* ============ Reveal animation ============ */
|
||||
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
|
||||
.reveal.in { opacity: 1; transform: none; }
|
||||
.reveal[data-d="1"]{ transition-delay: 80ms; }
|
||||
.reveal[data-d="2"]{ transition-delay: 160ms; }
|
||||
.reveal[data-d="3"]{ transition-delay: 240ms; }
|
||||
|
||||
/* ============ Responsive ============ */
|
||||
@media (min-width: 720px) {
|
||||
.ethos__grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
|
||||
.ethos__cols { grid-template-columns: 1fr 1fr; }
|
||||
.offer__list { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.reviews__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
.contact__grid { grid-template-columns: 1fr 1fr; align-items: center; }
|
||||
.ig-strip { grid-template-columns: repeat(4, minmax(0,1fr)); }
|
||||
.footer__top { grid-template-columns: 1.4fr 1fr; }
|
||||
.footer__cols { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
.values { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
.booking__panel { grid-template-columns: 0.95fr 1.05fr; align-items: start; column-gap: var(--space-2xl); }
|
||||
.booking__head { grid-column: 1; align-self: center; }
|
||||
.passes { grid-column: 2; }
|
||||
.experience__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
|
||||
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center; }
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.nav__links { display: flex; gap: clamp(1.1rem, 2.2vw, 1.9rem); align-items: center; }
|
||||
.nav__cta { display: inline-flex; }
|
||||
.nav__toggle { display: none; }
|
||||
.offer__list { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
.offer__head { grid-template-columns: 1fr 1fr; align-items: end; }
|
||||
.offer-card--wide { grid-column: span 1; }
|
||||
}
|
||||
|
||||
/* ============ Nav icon row ============ */
|
||||
/* Top-bar contact icons removed on every breakpoint — they live in the footer + contact section now */
|
||||
.nav__icons { display: none; }
|
||||
.nav__right { display: flex; align-items: center; gap: var(--space-md); }
|
||||
.drawer__icons { display: inline-flex; gap: 0.6rem; margin-top: var(--space-md); }
|
||||
|
||||
/* ============ Course cards (home) ============ */
|
||||
.offer-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
|
||||
.course-badge { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent-deep); background: var(--color-blush); padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); white-space: nowrap; }
|
||||
.course-price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); white-space: nowrap; }
|
||||
.offer-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: auto; padding-top: var(--space-sm); }
|
||||
.offer-card { grid-template-rows: auto auto 1fr auto auto; }
|
||||
|
||||
/* ============ Course detail page ============ */
|
||||
.course { padding-block: clamp(2.5rem, 6vw, var(--space-3xl)); border-top: 1px solid var(--color-line); }
|
||||
.course:first-of-type { border-top: none; }
|
||||
.course__grid { display: grid; gap: var(--space-xl); }
|
||||
.course__num { font-family: var(--font-display); color: var(--color-accent); font-size: var(--text-sm); letter-spacing: 0.1em; }
|
||||
.course h2 { font-size: clamp(1.8rem, 5vw, var(--text-3xl)); font-weight: 400; margin: var(--space-xs) 0 var(--space-md); max-width: 18ch; }
|
||||
.course__facts { display: grid; gap: 0; background: var(--color-shell); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: clip; align-self: start; }
|
||||
.fact { display: grid; gap: 0.2rem; padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-line); }
|
||||
.fact:last-child { border-bottom: none; }
|
||||
.fact span { font-size: var(--text-xs); letter-spacing: var(--tracking-cap); text-transform: uppercase; color: var(--color-ink-faint); }
|
||||
.fact strong { font-weight: 700; font-size: var(--text-base); color: var(--color-ink); }
|
||||
.fact strong small { display: block; font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-soft); }
|
||||
.fact--price strong { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--color-accent-deep); }
|
||||
.course__body { display: grid; gap: var(--space-md); max-width: var(--maxw-text); }
|
||||
.course__body p { color: var(--color-ink-soft); }
|
||||
.course__body h3 { font-size: var(--text-lg); font-weight: 500; margin-top: var(--space-sm); }
|
||||
.course__body ul { margin: 0; padding-left: 1.1rem; color: var(--color-ink-soft); display: grid; gap: 0.4rem; }
|
||||
.course__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-sm); }
|
||||
.callout { background: var(--color-blush); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink); }
|
||||
@media (min-width: 860px) {
|
||||
.course__grid { grid-template-columns: 1fr 340px; align-items: start; gap: var(--space-2xl); }
|
||||
.course__head-wrap { grid-column: 1; }
|
||||
.course__facts { grid-row: 1 / span 3; grid-column: 2; position: sticky; top: 90px; }
|
||||
}
|
||||
|
||||
/* ============ Reduced motion ============ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
|
||||
html { scroll-behavior: auto; }
|
||||
.reveal { opacity: 1; transform: none; transition: opacity 120ms linear; }
|
||||
.btn:hover, .offer-card:hover { transform: none; }
|
||||
.drawer { transition: opacity 140ms linear; }
|
||||
.marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
|
||||
.marquee__track { animation: none; }
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/* Hallmark · custom theme: warm-clay · tone: luxury/atmospheric · anchor hue: terracotta 40
|
||||
* vibe: "calm, sun-warmed, grounded, premium acroyoga"
|
||||
* paper oklch(97.5% 0.012 76) · accent oklch(60% 0.10 40) clay/warm
|
||||
* display: Fraunces · body: Lato
|
||||
* axes: paper-band=light / display-style=high-contrast-serif / accent-hue=warm
|
||||
* pre-emit critique: P5 H5 E5 S4 R5 V5
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ---- Paper / surfaces (warm cream → sand) ---- */
|
||||
--color-paper: oklch(97.8% 0.012 78); /* base cream */
|
||||
--color-paper-2: oklch(95.2% 0.016 74); /* soft sand */
|
||||
--color-paper-3: oklch(90.5% 0.022 68); /* deeper sand */
|
||||
--color-shell: oklch(99.2% 0.006 86); /* near-white card */
|
||||
|
||||
/* ---- Ink (warm taupe-brown) ---- */
|
||||
--color-ink: oklch(31% 0.018 62); /* primary text */
|
||||
--color-ink-soft: oklch(46% 0.018 58); /* secondary */
|
||||
--color-ink-faint:oklch(60% 0.014 56); /* tertiary/meta */
|
||||
|
||||
/* ---- Accent (terracotta / clay) ---- */
|
||||
--color-accent: oklch(60% 0.105 41); /* clay terracotta */
|
||||
--color-accent-deep: oklch(52% 0.108 38); /* pressed / hover */
|
||||
--color-accent-soft: oklch(82% 0.055 46); /* peach wash */
|
||||
|
||||
/* ---- Lines & focus ---- */
|
||||
--color-line: oklch(87% 0.018 64);
|
||||
--color-line-2: oklch(80% 0.022 60);
|
||||
--color-focus: oklch(52% 0.108 38);
|
||||
|
||||
/* ---- Dark band (footer / contrast section) ---- */
|
||||
--color-night: oklch(28% 0.018 56);
|
||||
--color-night-2: oklch(33% 0.018 56);
|
||||
--color-on-night: oklch(95% 0.012 78);
|
||||
--color-on-night-soft: oklch(78% 0.014 64);
|
||||
|
||||
/* ---- Blush (logo background tone) ---- */
|
||||
--color-blush: oklch(91% 0.028 44); /* logo backdrop blush */
|
||||
--color-blush-2: oklch(86% 0.034 42);
|
||||
|
||||
/* ---- Typography ---- */
|
||||
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
|
||||
--font-brand: "Poiret One", "Fraunces", serif; /* art-deco wordmark — matches logo */
|
||||
--font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
|
||||
--text-xs: 0.78rem;
|
||||
--text-sm: 0.9rem;
|
||||
--text-base: 1.02rem;
|
||||
--text-lg: 1.2rem;
|
||||
--text-xl: 1.5rem;
|
||||
--text-2xl: 2rem;
|
||||
--text-3xl: 2.75rem;
|
||||
--text-4xl: 3.75rem;
|
||||
--text-display-s: clamp(2.6rem, 7vw, 4.2rem);
|
||||
--text-display: clamp(3.1rem, 11vw, 7rem);
|
||||
|
||||
--leading-tight: 1.04;
|
||||
--leading-snug: 1.22;
|
||||
--leading-body: 1.62;
|
||||
--tracking-cap: 0.22em;
|
||||
--tracking-tight:-0.02em;
|
||||
|
||||
/* ---- Spacing (4pt scale) ---- */
|
||||
--space-2xs: 0.25rem;
|
||||
--space-xs: 0.5rem;
|
||||
--space-sm: 0.75rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2.5rem;
|
||||
--space-2xl: 4rem;
|
||||
--space-3xl: 6rem;
|
||||
--space-4xl: 9rem;
|
||||
|
||||
/* ---- Radius / rule ---- */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 24px;
|
||||
--radius-pill: 999px;
|
||||
--rule-hair: 1px;
|
||||
|
||||
/* ---- Motion ---- */
|
||||
--dur-fast: 160ms;
|
||||
--dur-mid: 320ms;
|
||||
--dur-slow: 620ms;
|
||||
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* ---- Layout ---- */
|
||||
--maxw: 1200px;
|
||||
--maxw-text: 64ch;
|
||||
--shadow-soft: 0 22px 60px -28px oklch(31% 0.018 62 / 0.32);
|
||||
}
|
||||
+379
@@ -0,0 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Floating Flows — Premium AcroYoga in Freiburg</title>
|
||||
<meta name="description" content="Floating Flows — premium AcroYoga in Freiburg with Luciana. Partner acrobatics, beginner flows, washing machines and therapeutic flying. No partner needed. Book a class." />
|
||||
<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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Lato:wght@400;700;900&family=Poiret+One&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ============ NAV ============ -->
|
||||
<header class="nav" id="nav">
|
||||
<div class="wrap nav__inner">
|
||||
<a class="brand" href="index.html" aria-label="Floating Flows home">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
<a href="courses.html">Courses</a>
|
||||
<a href="#experience">The Practice</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<div class="nav__right">
|
||||
<div class="nav__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg>
|
||||
</a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call Floating Flows">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg>
|
||||
</a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email Floating Flows">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<a class="btn nav__cta" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="drawer">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile drawer -->
|
||||
<div class="drawer" id="drawer" aria-hidden="true">
|
||||
<a class="drawer__link" href="courses.html">Courses</a>
|
||||
<a class="drawer__link" href="#experience">The Practice</a>
|
||||
<a class="drawer__link" href="#location">Location</a>
|
||||
<a class="drawer__link" href="about.html">About</a>
|
||||
<a class="drawer__link" href="#contact">Contact</a>
|
||||
<div class="drawer__meta">
|
||||
<a href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class →</a>
|
||||
<span>Seepark Glashaus · Freiburg</span>
|
||||
<div class="drawer__icons icons">
|
||||
<a class="icon-btn" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ HERO (video) ============ -->
|
||||
<section class="hero">
|
||||
<div class="wrap hero__grid">
|
||||
<div class="hero__text">
|
||||
<p class="eyebrow hero__eyebrow">AcroYoga · Freiburg</p>
|
||||
<h1>Learn to <em>float</em>, together.</h1>
|
||||
<p class="hero__sub">The joyful art of flying together — AcroYoga, taught with care by Luciana. For every body, every level. No partner needed.</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Book a class</a>
|
||||
<a class="btn btn--ghost hero__ghost" href="#offerings">Explore classes</a>
|
||||
</div>
|
||||
<blockquote class="hero__quote">
|
||||
<p>“I arrived nervous and left flying. The most welcoming room I’ve ever practised in.”</p>
|
||||
<cite>Mara K. · ★★★★★</cite>
|
||||
</blockquote>
|
||||
<div class="hero__scroll"><span></span> Scroll</div>
|
||||
</div>
|
||||
<figure class="hero__media">
|
||||
<video class="hero__video" autoplay muted loop playsinline preload="auto" poster="assets/img/hero-1.jpg">
|
||||
<source src="assets/video/hero-1.mp4" type="video/mp4" />
|
||||
<img src="assets/img/sunset-doublebird.jpg" alt="Two practitioners in an AcroYoga flying pose at golden hour" />
|
||||
</video>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ETHOS ============ -->
|
||||
<section class="section ethos" id="ethos">
|
||||
<div class="wrap ethos__grid">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Welcome to Floating Flows</p>
|
||||
<h2>A practice built on <span class="accent">trust, breath and play.</span></h2>
|
||||
</div>
|
||||
<div class="ethos__cols">
|
||||
<p class="reveal" data-d="1">AcroYoga blends the wisdom of yoga, the dynamics of acrobatics and the care of therapeutic touch. You’ll learn to give weight, to receive it, and to move as one — held by a community that has your back.</p>
|
||||
<p class="reveal" data-d="2">No experience and no partner required. We work in rotating teams, so everyone finds a base, a flyer and a spotter. Beginners and seasoned flyers share the same mat, the same breath, the same quiet thrill of letting go.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ OFFERINGS (real courses) ============ -->
|
||||
<section class="section offer" id="offerings">
|
||||
<div class="wrap">
|
||||
<div class="offer__head">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Classes & Courses</p>
|
||||
<h2>Find your place in the flow.</h2>
|
||||
</div>
|
||||
<p class="lede reveal" data-d="1">Term courses, beginner workshops and private training — all taught in small, attentive groups at the Seepark Glashaus in Freiburg.</p>
|
||||
</div>
|
||||
<div class="offer__list">
|
||||
|
||||
<article class="offer-card reveal">
|
||||
<div class="offer-card__top"><span class="course-badge">Starts 12 Jun 2026</span><span class="course-price">€126</span></div>
|
||||
<span class="offer-card__num">01 / Term Course</span>
|
||||
<h3>Beginner Flows</h3>
|
||||
<p>Seven sessions building four short beginner flows step by step — positions, transitions and the interplay of base, flyer and spotter, plus fall training and breath.</p>
|
||||
<div class="offer-card__meta"><span>All levels</span><span>7 × 90 min</span><span>No partner needed</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#beginner-flows">Course details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal" data-d="1">
|
||||
<div class="offer-card__top"><span class="course-badge">Starts 18 Jun 2026</span><span class="course-price">€126</span></div>
|
||||
<span class="offer-card__num">02 / Term Course</span>
|
||||
<h3>Classic Washing Machines 1</h3>
|
||||
<p>The next step after beginner flows. Link figures into continuous “washing machine” rotations, deepening trust and timing between base and flyer over seven weeks.</p>
|
||||
<div class="offer-card__meta"><span>Improver</span><span>7 × 90 min</span><span>Rotating teams</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#washing-machines">Course details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal" data-d="2">
|
||||
<div class="offer-card__top"><span class="course-badge">28 Jun 2026 · Outdoor</span><span class="course-price">Workshop</span></div>
|
||||
<span class="offer-card__num">03 / Beginner Workshop</span>
|
||||
<h3>Absolute Beginner 1</h3>
|
||||
<p>A gentle full-day introduction for complete beginners — two mindful sessions, a shared vegetarian potluck, and a guided Thai massage to close. Bring a friend.</p>
|
||||
<div class="offer-card__meta"><span>Complete beginners</span><span>10:00–16:00</span><span>Freiburg outdoor</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#absolute-beginner">Workshop details <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
<article class="offer-card reveal">
|
||||
<div class="offer-card__top"><span class="course-badge">By arrangement</span><span class="course-price">Hansefit +€16</span></div>
|
||||
<span class="offer-card__num">04 / Private</span>
|
||||
<h3>Personal Training · 90 min</h3>
|
||||
<p>One-to-one (for two people) in the comfort of your home anywhere in Freiburg. I bring 4 cm safety mats and we work directly on your AcroYoga goals.</p>
|
||||
<div class="offer-card__meta"><span>For 2 people</span><span>90 min</span><span>At your home</span></div>
|
||||
<div class="offer-card__foot"><a class="link-arrow" href="courses.html#personal-training">How it works <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a></div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ EXPERIENCE ============ -->
|
||||
<section class="section experience" id="experience">
|
||||
<div class="wrap experience__grid">
|
||||
<div class="experience__media reveal">
|
||||
<img src="assets/img/spotting-class.jpg" alt="A flyer being spotted in an AcroYoga class at the Seepark Glashaus" />
|
||||
</div>
|
||||
<div class="reveal" data-d="1">
|
||||
<p class="eyebrow">Your first flight</p>
|
||||
<h2>What an evening with us feels like.</h2>
|
||||
<div class="steps">
|
||||
<div class="step">
|
||||
<div class="step__no">01</div>
|
||||
<div><h3>Arrive & land</h3><p>We open every session with breath and a gentle warm-up. Bare feet, a warm welcome, and the day left at the door.</p></div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__no">02</div>
|
||||
<div><h3>Build trust</h3><p>Guided, spotted and never rushed. You’ll learn to base, fly and catch with partners of every level — and how to fall safely.</p></div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__no">03</div>
|
||||
<div><h3>Take flight</h3><p>The moment it clicks. Float, invert and flow — then unwind with a partner Thai-massage cool-down before you go.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ LOCATION (Glashaus) ============ -->
|
||||
<section class="section location" id="location">
|
||||
<div class="wrap location__grid">
|
||||
<div class="location__media reveal">
|
||||
<div class="location__main"><img src="assets/img/glashaus-2.webp" alt="View over the Seepark lake from the Glashaus in Freiburg" loading="lazy" /></div>
|
||||
</div>
|
||||
<div class="reveal" data-d="1">
|
||||
<p class="eyebrow">Our home</p>
|
||||
<h2>The Glashaus, in the Seepark.</h2>
|
||||
<p class="location__lede">We practise in one of Freiburg’s most beautiful settings — a soaring timber-and-glass pavilion in the Seepark, looking out over the lake to the green hillside beyond.</p>
|
||||
<div class="location__notes">
|
||||
<div class="location__note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
|
||||
<p>Simply stunning to look at and endlessly photogenic — especially under a starry sky.</p>
|
||||
</div>
|
||||
<div class="location__note">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12a9 9 0 0 1 18 0"/><path d="M3 12a9 9 0 0 0 18 0"/><path d="M12 3v18"/></svg>
|
||||
<p>A fantastic view of the water, open air, and space to simply relax. The perfect place to fly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="location__addr">
|
||||
<a class="btn btn--ghost" href="https://maps.google.com/?q=Seepark+Glashaus+Brandensteinstra%C3%9Fe+24+79110+Freiburg" target="_blank" rel="noopener">Get directions</a>
|
||||
<span style="color:var(--color-ink-soft);font-size:var(--text-sm);">Brandensteinstraße 24, 79110 Freiburg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ AMBIENT (calm video) ============ -->
|
||||
<section class="ambient" id="ambient">
|
||||
<div class="ambient__media">
|
||||
<video autoplay muted loop playsinline preload="auto" poster="assets/img/calm-poster.jpg">
|
||||
<source src="assets/video/calm.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div class="ambient__inner">
|
||||
<p class="eyebrow">Outdoors, in the open air</p>
|
||||
<h2>Arrive heavy. Leave light.</h2>
|
||||
<p>Under a glass roof and an open sky, in the green heart of the Seepark — a place to breathe, to trust, and to fly.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ REVIEWS ============ -->
|
||||
<section class="section reviews" id="reviews">
|
||||
<div class="wrap">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Stories from the studio</p>
|
||||
<h2>Words from our community.</h2>
|
||||
</div>
|
||||
<div class="reviews__grid">
|
||||
<figure class="review reveal"><div class="review__stars">★★★★★</div><p>“Every time I step into class I feel a lightness that helps me set down the stress of the week. Truly special.”</p><cite>— Amelie R.</cite></figure>
|
||||
<figure class="review reveal" data-d="1"><div class="review__stars">★★★★★</div><p>“Inspiring, knowledgeable teaching and a genuinely warm room. I came alone and left with a community.”</p><cite>— Simon T.</cite></figure>
|
||||
<figure class="review reveal" data-d="2"><div class="review__stars">★★★★★</div><p>“I never imagined I’d be upside down on someone’s feet and laughing. Luciana made the impossible feel safe.”</p><cite>— Priya N.</cite></figure>
|
||||
<figure class="review reveal"><div class="review__stars">★★★★★</div><p>“My partner and I come every term. It’s become the best evening of our week.”</p><cite>— Jonas & Lena</cite></figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ BOOKING ============ -->
|
||||
<section class="section booking" id="booking">
|
||||
<div class="wrap">
|
||||
<div class="booking__panel">
|
||||
<div class="booking__head reveal">
|
||||
<p class="eyebrow">Book your place</p>
|
||||
<h2>Ready to fly?</h2>
|
||||
<p class="booking__lede">Reserve through our booking system, then message me so I can add you to the course Signal group. New here? The Absolute Beginner workshop is the softest landing.</p>
|
||||
</div>
|
||||
<div class="passes reveal" data-d="1">
|
||||
<div class="pass"><div class="pass__name">Term Course<small>7 sessions</small></div><div class="pass__price">€126</div></div>
|
||||
<div class="pass"><div class="pass__name">Drop-In<small>via Hansefit</small></div><div class="pass__price">Hansefit</div></div>
|
||||
<div class="pass"><div class="pass__name">Personal Training<small>90 min · 2 people</small></div><div class="pass__price">+€16</div></div>
|
||||
<div class="pass"><div class="pass__name">Absolute Beginner<small>Full-day workshop</small></div><div class="pass__price">Enquire</div></div>
|
||||
</div>
|
||||
<div class="booking__cta reveal" data-d="2" style="grid-column:1/-1;">
|
||||
<a class="btn" href="https://floatingflows.com/v2/" target="_blank" rel="noopener">Open booking & schedule</a>
|
||||
<a class="link-arrow" href="mailto:floatingflows@web.de">Register or ask a question
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="booking__note" style="grid-column:1/-1;">Live availability and registration are managed in the existing booking system. Drop-in is possible via Hansefit — please get in touch.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PHOTO CAROUSEL ============ -->
|
||||
<section class="marquee-band" aria-label="Photos from Floating Flows">
|
||||
<div class="marquee">
|
||||
<div class="marquee__track">
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/sunset-doublebird.jpg" alt="AcroYoga double bird at sunset" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/spotting-class.jpg" alt="A flyer being spotted in class" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/bridge-tower.jpg" alt="Standing AcroYoga at the covered bridge" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/kids-pyramid.jpg" alt="Family AcroYoga pyramid" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener"><img src="assets/img/park-batwing.jpg" alt="AcroYoga bat-hang in the park" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/sunset-doublebird.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/spotting-class.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/bridge-tower.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/kids-pyramid.jpg" alt="" loading="lazy"></a>
|
||||
<a class="marquee__item" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-hidden="true" tabindex="-1"><img src="assets/img/park-batwing.jpg" alt="" loading="lazy"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ CONTACT / INSTAGRAM ============ -->
|
||||
<section class="section contact" id="contact">
|
||||
<div class="wrap contact__grid">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow">Say hello</p>
|
||||
<h2>Come find us.</h2>
|
||||
<p class="contact__intro">A glimpse of life at Floating Flows — come fly with us in the Seepark.</p>
|
||||
</div>
|
||||
<div class="contact__links reveal" data-d="1">
|
||||
<div class="contact__row"><span>Email</span><a href="mailto:floatingflows@web.de">floatingflows@web.de</a></div>
|
||||
<div class="contact__row"><span>Phone</span><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
<div class="contact__row"><span>Instagram</span><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a></div>
|
||||
<div class="contact__row"><span>Studio</span><a href="https://maps.google.com/?q=Seepark+Glashaus+Brandensteinstra%C3%9Fe+24+79110+Freiburg" target="_blank" rel="noopener">Seepark Glashaus · Brandensteinstraße 24, 79110 Freiburg</a></div>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--lg" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--lg" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ FOOTER ============ -->
|
||||
<footer class="footer">
|
||||
<div class="wrap">
|
||||
<div class="footer__top">
|
||||
<div>
|
||||
<div class="brand" style="margin-bottom:var(--space-sm);">
|
||||
<img class="brand__icon" src="assets/brand/floating-flows-icon.png" alt="" onerror="this.style.display='none'" />
|
||||
<span class="brand__name">Floating <b>Flows</b></span>
|
||||
</div>
|
||||
<p>Premium AcroYoga in Freiburg — trust, breath and the quiet joy of flight. For every body, every level.</p>
|
||||
<div class="icons" style="margin-top:var(--space-md);">
|
||||
<a class="icon-btn icon-btn--on-night" href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="tel:+4917635708720" aria-label="Call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 12l3 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-2z"/></svg></a>
|
||||
<a class="icon-btn icon-btn--on-night" href="mailto:floatingflows@web.de" aria-label="Email"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3.5 7.5l8.5 5.5 8.5-5.5"/></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__cols">
|
||||
<div><h4>Explore</h4><a href="courses.html">Courses</a><a href="about.html">About</a></div>
|
||||
<div><h4>Visit</h4><a href="#location">Location</a><a href="#booking">Book</a><a href="#contact">Contact</a></div>
|
||||
<div><h4>Connect</h4><a href="https://www.instagram.com/floatingflows/" target="_blank" rel="noopener">@floatingflows</a><a href="mailto:floatingflows@web.de">floatingflows@web.de</a><a href="tel:+4917635708720">0176 35708720</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__bottom"><span>© 2026 Floating Flows · Luciana · Freiburg</span><span>Made for movement.</span></div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
// Random hero video on each visit (acro clips only)
|
||||
var heroVids = [
|
||||
['assets/video/hero-1.mp4', 'assets/img/hero-1.jpg'],
|
||||
['assets/video/hero-2.mp4', 'assets/img/hero-2.jpg'],
|
||||
['assets/video/hero-3.mp4', 'assets/img/hero-3.jpg']
|
||||
];
|
||||
var hv = document.querySelector('.hero__video');
|
||||
if (hv) {
|
||||
var pick = heroVids[Math.floor(Math.random() * heroVids.length)];
|
||||
var src = hv.querySelector('source');
|
||||
if (src && pick[0] !== src.getAttribute('src')) {
|
||||
src.setAttribute('src', pick[0]);
|
||||
hv.setAttribute('poster', pick[1]);
|
||||
hv.load();
|
||||
}
|
||||
var play = function(){ var p = hv.play(); if (p && p.catch) p.catch(function(){}); };
|
||||
play(); hv.addEventListener('canplay', play, { once: true });
|
||||
}
|
||||
|
||||
var nav = document.getElementById('nav');
|
||||
var onScroll = function(){ nav.classList.toggle('nav--solid', window.scrollY > 40); };
|
||||
onScroll(); window.addEventListener('scroll', onScroll, {passive:true});
|
||||
var toggle = document.getElementById('navToggle');
|
||||
var drawer = document.getElementById('drawer');
|
||||
var close = function(){ document.body.classList.remove('menu-open'); toggle.setAttribute('aria-expanded','false'); drawer.setAttribute('aria-hidden','true'); };
|
||||
toggle.addEventListener('click', function(){
|
||||
var open = document.body.classList.toggle('menu-open');
|
||||
toggle.setAttribute('aria-expanded', open); drawer.setAttribute('aria-hidden', !open);
|
||||
});
|
||||
drawer.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', close); });
|
||||
document.addEventListener('keydown', function(e){ if(e.key==='Escape') close(); });
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(en){ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
|
||||
}, {threshold: 0.12, rootMargin: '0px 0px -40px 0px'});
|
||||
document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
|
||||
|
||||
// Kick section/background videos to play once visible (offscreen autoplay can defer)
|
||||
var vio = new IntersectionObserver(function(es){ es.forEach(function(e){ if(e.isIntersecting){ var p=e.target.play(); if(p&&p.catch)p.catch(function(){}); } }); }, {threshold: 0.2});
|
||||
document.querySelectorAll('.ambient video').forEach(function(v){ vio.observe(v); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Compression
|
||||
gzip on;
|
||||
gzip_comp_level 5;
|
||||
gzip_min_length 1024;
|
||||
gzip_types text/plain text/css application/javascript image/svg+xml application/json;
|
||||
|
||||
# Long cache for static assets (images, video, fonts, css/js)
|
||||
location ~* \.(?:css|js|jpg|jpeg|png|webp|gif|ico|svg|mp4|woff2?)$ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# Serve files directly; .html pages resolve by their own URL
|
||||
location / {
|
||||
try_files $uri $uri/ =404;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user