/* ========================================== DESIGN TOKENS – Universal Business Template ========================================== Použití: data-theme atribut na - data-theme="craftsman" (výchozí) - data-theme="restaurant" - data-theme="business" ========================================== */ /* === Výchozí: Řemesla / Truhlářství === */ :root, [data-theme="craftsman"] { /* Barvy */ --color-primary: #3D2B1F; --color-primary-light: #5A3D2B; --color-primary-dark: #25160F; --color-accent: #C89B6B; --color-accent-light: #d4a574; --color-accent-dark: #a07d4f; --color-bg: #FAF6F2; --color-bg-alt: #F0EAE3; --color-white: #ffffff; --color-text: #25160F; --color-text-light: #8C7B6B; --color-text-on-dark: rgba(255, 255, 255, 0.85); /* Specifické */ --color-hero-overlay: linear-gradient(135deg, rgba(26, 18, 9, 0.75) 0%, rgba(26, 18, 9, 0.5) 50%, rgba(26, 18, 9, 0.65) 100%); --color-nav-bg-scrolled: rgba(255, 255, 255, 0.95); --color-nav-bg-mobile: rgba(37, 22, 15, 0.98); --color-card-bg: var(--color-white); --color-section-alt: var(--color-bg-alt); --color-border: rgba(37, 22, 15, 0.1); /* Typografie */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Layout */ --container-max: 1280px; --container-narrow: 960px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* Stíny */ --shadow-sm: 0 2px 8px rgba(26, 18, 9, 0.08); --shadow-md: 0 8px 32px rgba(26, 18, 9, 0.12); --shadow-lg: 0 16px 48px rgba(26, 18, 9, 0.16); /* Spacing */ --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Animace */ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* === Restaurace === */ [data-theme="restaurant"] { --color-primary: #8B1A1A; --color-primary-light: #B71C1C; --color-primary-dark: #5C0E0E; --color-accent: #D4A017; --color-accent-light: #E0B830; --color-accent-dark: #B8860B; --color-bg: #FFF8F0; --color-bg-alt: #FFF0E0; --color-white: #ffffff; --color-text: #2C1810; --color-text-light: #A08060; --color-text-on-dark: rgba(255, 255, 255, 0.9); --color-hero-overlay: linear-gradient(135deg, rgba(60, 20, 10, 0.75) 0%, rgba(92, 14, 14, 0.5) 50%, rgba(60, 20, 10, 0.65) 100%); --color-nav-bg-scrolled: rgba(255, 248, 240, 0.95); --color-nav-bg-mobile: rgba(44, 24, 16, 0.98); --color-card-bg: var(--color-white); --color-section-alt: var(--color-bg-alt); --color-border: rgba(44, 24, 16, 0.1); --shadow-sm: 0 2px 8px rgba(44, 24, 16, 0.08); --shadow-md: 0 8px 32px rgba(44, 24, 16, 0.12); --shadow-lg: 0 16px 48px rgba(44, 24, 16, 0.16); } /* === Malé podnikání === */ [data-theme="business"] { --color-primary: #1A3A5C; --color-primary-light: #2C5282; --color-primary-dark: #0F2440; --color-accent: #2E7D32; --color-accent-light: #43A047; --color-accent-dark: #1B5E20; --color-bg: #F5F5F5; --color-bg-alt: #EEEEEE; --color-white: #ffffff; --color-text: #1A1A2E; --color-text-light: #666680; --color-text-on-dark: rgba(255, 255, 255, 0.85); --color-hero-overlay: linear-gradient(135deg, rgba(15, 36, 64, 0.8) 0%, rgba(26, 58, 92, 0.5) 50%, rgba(15, 36, 64, 0.7) 100%); --color-nav-bg-scrolled: rgba(255, 255, 255, 0.95); --color-nav-bg-mobile: rgba(26, 26, 46, 0.98); --color-card-bg: var(--color-white); --color-section-alt: var(--color-bg-alt); --color-border: rgba(26, 26, 46, 0.1); --shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.08); --shadow-md: 0 8px 32px rgba(26, 26, 46, 0.12); --shadow-lg: 0 16px 48px rgba(26, 26, 46, 0.16); } /* === Kategorie badge === */ .category-badge { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 4px 12px; background: var(--color-accent); color: var(--color-white); border-radius: 50px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } /* Tmavý preset */ [data-theme="dark"] { --color-primary: #0f0f1a; --color-primary-light: #1a1a2e; --color-primary-dark: #050510; --color-accent: #5a8dee; --color-accent-light: #7aaaff; --color-accent-dark: #4070cc; --color-bg: #1a1a2e; --color-bg-alt: #13131f; --color-white: #ffffff; --color-text: #e0e0f0; --color-text-light: #9999bb; --color-text-on-dark: rgba(255,255,255,0.9); --color-hero-overlay: linear-gradient(135deg, rgba(5,5,16,0.9) 0%, rgba(26,26,46,0.7) 50%, rgba(5,5,16,0.85) 100%); --color-nav-bg-scrolled: rgba(26,26,46,0.95); --color-nav-bg-mobile: rgba(15,15,26,0.98); --color-card-bg: #23233a; --color-section-alt: var(--color-bg-alt); --color-border: rgba(255,255,255,0.1); } /* Světlý preset */ [data-theme="light"] { --color-primary: #ffffff; --color-primary-light: #f0f0f0; --color-primary-dark: #e0e0e0; --color-accent: #2196f3; --color-accent-light: #64b5f6; --color-accent-dark: #1976d2; --color-bg: #ffffff; --color-bg-alt: #f9f9f9; --color-white: #ffffff; --color-text: #212121; --color-text-light: #757575; --color-text-on-dark: rgba(0,0,0,0.8); --color-hero-overlay: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(240,240,240,0.7) 50%, rgba(255,255,255,0.9) 100%); --color-nav-bg-scrolled: rgba(255,255,255,0.95); --color-nav-bg-mobile: rgba(255,255,255,0.98); --color-card-bg: #ffffff; --color-section-alt: var(--color-bg-alt); --color-border: rgba(0,0,0,0.1); } /* Umělec preset */ [data-theme="artist"] { --color-primary: #0a0a0a; --color-primary-light: #1a1a2e; --color-primary-dark: #050508; --color-accent: #e040fb; --color-accent-light: #f070ff; --color-accent-dark: #b020d0; --color-bg: #0a0a0a; --color-bg-alt: #111118; --color-white: #ffffff; --color-text: #f0f0f0; --color-text-light: #999; --color-text-on-dark: rgba(255, 255, 255, 0.9); --color-hero-overlay: linear-gradient(135deg, rgba(10,10,10,0.8) 0%, rgba(224,64,251,0.3) 50%, rgba(10,10,10,0.85) 100%); --color-nav-bg-scrolled: rgba(10,10,10,0.95); --color-nav-bg-mobile: rgba(10,10,10,0.98); --color-card-bg: #1a1a2e; --color-section-alt: #111118; --color-border: rgba(255,255,255,0.1); --shadow-sm: 0 2px 8px rgba(224,64,251,0.15); --shadow-md: 0 8px 32px rgba(224,64,251,0.2); --shadow-lg: 0 16px 48px rgba(224,64,251,0.25); }