commit 2e33398d1f5ea5cbf20b40a507fbb54655f8763e Author: George Turkington Date: Wed Jun 17 12:35:31 2026 +0200 Floating Flows static site + Coolify Dockerfile deploy Co-Authored-By: Claude Opus 4.8 diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..0dfb1de --- /dev/null +++ b/.dockerignore @@ -0,0 +1,9 @@ +.git +.gitignore +.claude +.hallmark +Dockerfile +.dockerignore +README.md +.DS_Store +**/.DS_Store diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a391419 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +**/.DS_Store +.claude/ diff --git a/.hallmark/log.json b/.hallmark/log.json new file mode 100644 index 0000000..4890572 --- /dev/null +++ b/.hallmark/log.json @@ -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" } +] diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..0b040dd --- /dev/null +++ b/Dockerfile @@ -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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..8073bc0 --- /dev/null +++ b/README.md @@ -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 +``` diff --git a/about.html b/about.html new file mode 100644 index 0000000..e26c98c --- /dev/null +++ b/about.html @@ -0,0 +1,149 @@ + + + + + +About — Floating Flows AcroYoga Freiburg + + + + + + + + +

+ +

+ Floating Flows + + +

+ + + +

+ Book a class + +

+ + + +

Our story

We teach people to trust — and then to fly.

Floating Flows began with a simple belief: that connection is a practice, and everyone deserves the feeling of being held.

+ +

AcroYoga practice at the covered bridge in Freiburg

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.

Classes are led by Luciana — 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.

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.

+ +

What we hold to

Three things we never compromise.

01Safety, always

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.

02Everyone belongs

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.

03Joy is the point

Beneath the skill is something simpler: play. We protect the laughter, the lightness and the delight of moving together.

+ +

Begin

Your first flight is waiting.

Come as you are. We’ll handle the rest.

+ Book a class + floatingflows@web.de +

+ + + +

+ + + + + + diff --git a/assets/brand/floating-flows-icon.png b/assets/brand/floating-flows-icon.png new file mode 100644 index 0000000..338ef8c Binary files /dev/null and b/assets/brand/floating-flows-icon.png differ diff --git a/assets/brand/logo.jpg b/assets/brand/logo.jpg new file mode 100644 index 0000000..82405c0 Binary files /dev/null and b/assets/brand/logo.jpg differ diff --git a/assets/img/bridge-tower.jpg b/assets/img/bridge-tower.jpg new file mode 100644 index 0000000..56bcbd6 Binary files /dev/null and b/assets/img/bridge-tower.jpg differ diff --git a/assets/img/calm-poster.jpg b/assets/img/calm-poster.jpg new file mode 100644 index 0000000..f4257b1 Binary files /dev/null and b/assets/img/calm-poster.jpg differ diff --git a/assets/img/glashaus-2.webp b/assets/img/glashaus-2.webp new file mode 100644 index 0000000..3317237 Binary files /dev/null and b/assets/img/glashaus-2.webp differ diff --git a/assets/img/glashaus.jpg b/assets/img/glashaus.jpg new file mode 100644 index 0000000..6639642 Binary files /dev/null and b/assets/img/glashaus.jpg differ diff --git a/assets/img/hero-1.jpg b/assets/img/hero-1.jpg new file mode 100644 index 0000000..c399980 Binary files /dev/null and b/assets/img/hero-1.jpg differ diff --git a/assets/img/hero-2.jpg b/assets/img/hero-2.jpg new file mode 100644 index 0000000..ed0a9db Binary files /dev/null and b/assets/img/hero-2.jpg differ diff --git a/assets/img/hero-3.jpg b/assets/img/hero-3.jpg new file mode 100644 index 0000000..40baa8a Binary files /dev/null and b/assets/img/hero-3.jpg differ diff --git a/assets/img/hero-poster.jpg b/assets/img/hero-poster.jpg new file mode 100644 index 0000000..c399980 Binary files /dev/null and b/assets/img/hero-poster.jpg differ diff --git a/assets/img/kids-pyramid.jpg b/assets/img/kids-pyramid.jpg new file mode 100644 index 0000000..a44a932 Binary files /dev/null and b/assets/img/kids-pyramid.jpg differ diff --git a/assets/img/park-batwing.jpg b/assets/img/park-batwing.jpg new file mode 100644 index 0000000..3a64324 Binary files /dev/null and b/assets/img/park-batwing.jpg differ diff --git a/assets/img/spotting-class.jpg b/assets/img/spotting-class.jpg new file mode 100644 index 0000000..8b37424 Binary files /dev/null and b/assets/img/spotting-class.jpg differ diff --git a/assets/img/sunset-doublebird.jpg b/assets/img/sunset-doublebird.jpg new file mode 100644 index 0000000..741845f Binary files /dev/null and b/assets/img/sunset-doublebird.jpg differ diff --git a/assets/video/calm.mp4 b/assets/video/calm.mp4 new file mode 100644 index 0000000..128f410 Binary files /dev/null and b/assets/video/calm.mp4 differ diff --git a/assets/video/clip-beginner.mp4 b/assets/video/clip-beginner.mp4 new file mode 100644 index 0000000..b61868d Binary files /dev/null and b/assets/video/clip-beginner.mp4 differ diff --git a/assets/video/clip-workshop.mp4 b/assets/video/clip-workshop.mp4 new file mode 100644 index 0000000..cfb533a Binary files /dev/null and b/assets/video/clip-workshop.mp4 differ diff --git a/assets/video/hero-1.mp4 b/assets/video/hero-1.mp4 new file mode 100644 index 0000000..6dcc1eb Binary files /dev/null and b/assets/video/hero-1.mp4 differ diff --git a/assets/video/hero-2.mp4 b/assets/video/hero-2.mp4 new file mode 100644 index 0000000..281957c Binary files /dev/null and b/assets/video/hero-2.mp4 differ diff --git a/assets/video/hero-3.mp4 b/assets/video/hero-3.mp4 new file mode 100644 index 0000000..91ec406 Binary files /dev/null and b/assets/video/hero-3.mp4 differ diff --git a/courses.html b/courses.html new file mode 100644 index 0000000..1241713 --- /dev/null +++ b/courses.html @@ -0,0 +1,224 @@ + + + + + +Courses — Floating Flows AcroYoga Freiburg + + + + + + + + +

+ +

+ Floating Flows + + +

+ + + +

+ Book a class + +

+ + + +

Courses & Workshops

Term courses, workshops & private training.

All courses are taught by Luciana in small, attentive groups. You never need to bring a partner — we work in rotating teams.

+ + +

+ 01 / Term Course +

Beginner Flows

A continuation of the Absolute Beginner 1 & 2 workshops — seven sessions to solidify the basics and grow into confident, flowing movement.

+ +

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.

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.

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.

Good to know

No partner required — we work in rotating teams. Couples are very welcome too.
Drop-in via Hansefit is possible — please get in touch first.
The content builds week to week, so attending as many sessions as possible is recommended.

After registering, please message Luciana so she can add you to the course Signal group.

+ Book this course + floatingflows@web.de +

+ + +

+ 02 / Term Course +

Classic Washing Machines 1

The natural next step after Beginner Flows — review the basics and link figures into continuous, flowing “washing machine” rotations.

+ +

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.

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.

This course is perfect if you want to consolidate your figures and transitions and gain more experience applying them in flowing movement.

Good to know

No partner required — we work in rotating teams. Couples are welcome.
Drop-in via Hansefit is possible — please get in touch first.
The content builds on itself, so regular attendance is recommended.

After registering, please message Luciana so she can add you to the course Signal group.

+ Book this course + floatingflows@web.de +

+ + +

+ 03 / Beginner Workshop +

Absolute Beginner 1 · Freiburg Outdoor

A warm, mindful introduction for complete beginners — and the perfect way to bring a friend, partner or family member into the world of AcroYoga.

+ +

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.

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.

Please bring something to share for the potluck, and warm clothes for the Thai massage.

+ Reserve a place + floatingflows@web.de +

+ + +

+ 04 / Private +

Personal Training · 90 minutes

Prefer to train at home, can’t make the course dates, or want to work on something specific? Private sessions come to you.

+ +

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.

My repertoire

All AcroYoga poses and flows — except Icarians (pops and throws with brief loss of contact).
Standing acrobatics is not currently offered.

We always discuss your goals and a suitable date beforehand. Feel free to call me — I look forward to hearing from you.

+ Call 0176 35708720 + floatingflows@web.de +

+ + + + + + + diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..2831276 --- /dev/null +++ b/css/styles.css @@ -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; } +} diff --git a/css/tokens.css b/css/tokens.css new file mode 100644 index 0000000..42a1197 --- /dev/null +++ b/css/tokens.css @@ -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); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..9527de9 --- /dev/null +++ b/index.html @@ -0,0 +1,379 @@ + + + + + +Floating Flows — Premium AcroYoga in Freiburg + + + + + + + + + +

+ +

+ Floating Flows + + +

+ + + + + + + + + +

+ Book a class + +

+ + + + + +

AcroYoga · Freiburg

Learn to float, together.

The joyful art of flying together — AcroYoga, taught with care by Luciana. For every body, every level. No partner needed.

+ Book a class + Explore classes +

+
“I arrived nervous and left flying. The most welcoming room I’ve ever practised in.”
+ Mara K. · ★★★★★ +

Scroll

Two practitioners in an AcroYoga flying pose at golden hour

+ + +

Welcome to Floating Flows

A practice built on trust, breath and play.

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.

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.

+ + +

Classes & Courses

Find your place in the flow.

Term courses, beginner workshops and private training — all taught in small, attentive groups at the Seepark Glashaus in Freiburg.

+ +

Starts 12 Jun 2026€126

+ 01 / Term Course +

Beginner Flows

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.

All levels7 × 90 minNo partner needed

Course details

+ +

Starts 18 Jun 2026€126

+ 02 / Term Course +

Classic Washing Machines 1

The next step after beginner flows. Link figures into continuous “washing machine” rotations, deepening trust and timing between base and flyer over seven weeks.

Improver7 × 90 minRotating teams

Course details

+ +

28 Jun 2026 · OutdoorWorkshop

+ 03 / Beginner Workshop +

Absolute Beginner 1

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.

Complete beginners10:00–16:00Freiburg outdoor

Workshop details

+ +

By arrangementHansefit +€16

+ 04 / Private +

Personal Training · 90 min

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.

For 2 people90 minAt your home

How it works

+ +

+ + +

A flyer being spotted in an AcroYoga class at the Seepark Glashaus

Your first flight

What an evening with us feels like.

Arrive & land

We open every session with breath and a gentle warm-up. Bare feet, a warm welcome, and the day left at the door.

Build trust

Guided, spotted and never rushed. You’ll learn to base, fly and catch with partners of every level — and how to fall safely.

Take flight

The moment it clicks. Float, invert and flow — then unwind with a partner Thai-massage cool-down before you go.

+ + +

View over the Seepark lake from the Glashaus in Freiburg

Our home

The Glashaus, in the Seepark.

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.

+ +

Simply stunning to look at and endlessly photogenic — especially under a starry sky.

+ +

A fantastic view of the water, open air, and space to simply relax. The perfect place to fly.

+ Get directions + Brandensteinstraße 24, 79110 Freiburg +

+ + +

Outdoors, in the open air

Arrive heavy. Leave light.

Under a glass roof and an open sky, in the green heart of the Seepark — a place to breathe, to trust, and to fly.

+ + +

Stories from the studio

Words from our community.

★★★★★

“Every time I step into class I feel a lightness that helps me set down the stress of the week. Truly special.”

— Amelie R. +

★★★★★

“Inspiring, knowledgeable teaching and a genuinely warm room. I came alone and left with a community.”

— Simon T. +

★★★★★

“I never imagined I’d be upside down on someone’s feet and laughing. Luciana made the impossible feel safe.”

— Priya N. +

★★★★★

“My partner and I come every term. It’s become the best evening of our week.”

— Jonas & Lena +

+ + +

Book your place

Ready to fly?

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.

Term Course7 sessions

€126

Drop-Invia Hansefit

Hansefit

Personal Training90 min · 2 people

+€16

Absolute BeginnerFull-day workshop

Enquire

+ Open booking & schedule + Register or ask a question + + +

Live availability and registration are managed in the existing booking system. Drop-in is possible via Hansefit — please get in touch.

+ + +

+ + + + + +

+ + +

Say hello

Come find us.

A glimpse of life at Floating Flows — come fly with us in the Seepark.

Emailfloatingflows@web.de

Phone0176 35708720

Instagram@floatingflows

StudioSeepark Glashaus · Brandensteinstraße 24, 79110 Freiburg

+ + + +

+ + + + + + + diff --git a/nginx.conf b/nginx.conf new file mode 100644 index 0000000..9de0819 --- /dev/null +++ b/nginx.conf @@ -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; + } +}