🎨 Salon Rose Design System

Moderní, elegantní design s tekutými efekty a efekty lomu světla.

Barevná Paleta

Salon Pink

#c93a8a

Primary Accent

Light Pink

#e8a5d4

Hover & Accents

Dark Mauve

#8a4a80

Secondary Accent

Glass White

rgba(255,255,255,0.1)

Glassmorphism

Typografie

Playfair Display – Nadpisy

Font Weight: 700 | Elegantní serif font pro nadpisy

Segoe UI – Main Text (600 weight)

Primární font pro obsah, čitelný a moderní

Segoe UI – Medium Text (500 weight)

Pro menu a sekundární obsah

Segoe UI – Body Text (Regular weight)

Hlavní obsah, popis, paragraf

Komponenty

Tlačítka

Link Button

Kartička

Glassmorphism efekt s tekutou animací na pozadí.

Badge

Design Badge

Input Field

Animace & Efekty

orbFloat (12s)

glowPulse (2s)

waveFlow (3-4s)

liquidFlow (8s)

lightRefract (6s)

liquidShimmer (4s)

Použité Animace

🔄 gradientShift – Animace pozadí celé stránky (8s)
🌀 orbFloat – Plovoucí orby na pozadí karet (10-15s)
💫 liquidFlow – Tekuté přechody gradientů (8s)
✨ lightRefract – Simulace lomu světla (6s)
🌊 waveFlow – Vlnový efekt přes tlačítka (3-4s)
💎 glowPulse – Pulzující záře (2s)
🎭 liquidShimmer – Třpytivý tekutý efekt (4s)
🎈 floatBg – Plovoucí pozadí (20s)
📍 fadeInUp – Fade in animace ze spodu (1s)

Design Features

✨

Glassmorphism

Moderní skleněný efekt s backdrop-filter a semi-transparentními pozadími.

🌊

Tekuté Efekty

Plynulé animace a organické tvary s radial gradients.

💎

Lom Světla

Simulace světla procházejícího skrz tekutiny s opacity animacemi.

🎯

Konzistentnost

CSS proměnné pro sjednocené barvy, poloměry a stíny.

📱

Responsivní

Perfektní na mobilech, tabletech i desktopu.

⚡

Hladké Přechody

Cubic-bezier timingové funkce pro elegantní animace.

CSS Proměnné

/* Barvy */
--primary-color: #1d1d1f
--accent-color: #c93a8a (Salon Pink)
--accent-light: #e8a5d4
--accent-dark: #8a4a80

/* Poloměry */
--radius-sm: 12px
--radius-md: 18px
--radius-lg: 24px
--radius-xl: 30px
--radius-pill: 999px

/* Stíny */
--shadow-sm: 0 2px 8px rgba(201, 58, 138, 0.12)
--shadow-md: 0 4px 16px rgba(201, 58, 138, 0.15)
--shadow-lg: 0 8px 32px rgba(201, 58, 138, 0.18)

/* Glassmorphism */
--glass-blur: blur(20px) saturate(180%)
--glass-bg: rgba(255,255,255,0.1)
--glass-border: rgba(255,255,255,0.18)
--glass-border-strong: rgba(255,255,255,0.25)

/* Animace */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1)
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1)

Layout & Šířky Sekcí

Standardní Max-Width: 900px

Všechny hlavní obsahové sekce mají jednotnou šířku 900px pro konzistentní vzhled napříč celou stránkou. Tato šířka optimalizuje čitelnost a vizuální harmonii bez ohledu na velikost monitoru.

about_intro max-width: 900px

about_founder max-width: 900px

faq-section max-width: 900px

call_to_action max-width: 900px

kontakt-mapa max-width: 900px

💡 Tato konzistence vytváří profesionální a harmonický vzhled s předvídatelnou strukturou, která zlepšuje uživatelský zážitek.