/* ========================================================================== CSS Custom Properties (Variables) Centrální definice barev, typografie, spacing a breakpointů ========================================================================== */ :root { /* ====================================================================== COLORS - Barevná paleta ====================================================================== */ /* Primary - Tanix Blue (akční prvky, CTA) */ --color-primary: #03A9F3; --color-primary-hover: #0290d1; --color-primary-active: #0278af; --color-primary-light: #e1f5fe; --color-primary-lighter: #f0fafd; /* Secondary - Tanix Purple */ --color-secondary: #ab8ce4; --color-secondary-hover: #9a7bd3; --color-secondary-light: #f3eefb; /* Neutrals - Grayscale */ --color-white: #FFFFFF; --color-gray-50: #F5F8FA; --color-gray-100: #EDF2F5; --color-gray-200: #D8E1E8; --color-gray-300: #B8C7D1; --color-gray-400: #87A4AE; --color-gray-500: #5C7A8A; --color-gray-600: #445E6E; --color-gray-700: #334857; --color-gray-800: #233545; --color-gray-900: #17243D; --color-black: #0D1520; /* Utility Accent Colors (pro ikony energií) */ --color-electric: #F59E0B; /* Elektřina - žlutá/amber */ --color-gas: #EF4444; /* Plyn - červená */ --color-water: #3B82F6; /* Voda - modrá */ --color-heat: #F97316; /* Teplo - oranžová */ /* Status Colors */ --color-success: #00c292; --color-success-light: #d9f5ee; --color-warning: #fec107; --color-warning-light: #fef8e1; --color-error: #EF4444; --color-error-light: #FEE2E2; --color-info: #03a9f3; --color-info-light: #e1f5fe; /* ====================================================================== TYPOGRAPHY - Typografie ====================================================================== */ /* Font Families */ --font-primary: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-mono: 'Fira Code', 'Consolas', 'Monaco', monospace; /* Font Sizes */ --text-xs: 0.875rem; /* 14px */ --text-sm: 1rem; /* 16px */ --text-base: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* ====================================================================== SPACING - Mezery (8px grid systém) ====================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* ====================================================================== LAYOUT - Layout specifikace ====================================================================== */ /* Container */ --container-max: 1280px; --container-padding: 1.5rem; /* 24px - mobile */ --container-padding-lg: 2rem; /* 32px - desktop */ /* Section Padding */ --section-padding-y: 4rem; /* 64px - mobile */ --section-padding-y-lg: 6rem; /* 96px - desktop */ /* Header */ --header-height: 100px; --header-height-scrolled: 64px; /* ====================================================================== BORDERS & RADIUS ====================================================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* pill shape */ --border-width: 1px; --border-width-2: 2px; /* ====================================================================== SHADOWS ====================================================================== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* Header shadow */ --shadow-header: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* Card hover shadow */ --shadow-card-hover: 0 20px 40px -10px rgb(0 0 0 / 0.15); /* Colored shadows for modern look */ --shadow-primary: 0 10px 40px -10px rgba(3, 169, 243, 0.4); --shadow-primary-lg: 0 20px 60px -15px rgba(3, 169, 243, 0.5); --shadow-secondary: 0 10px 40px -10px rgba(171, 140, 228, 0.4); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-bg-dark: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.3); --glass-blur: 20px; /* Card Design System */ --card-bg: rgba(255, 255, 255, 0.85); --card-bg-hover: rgba(255, 255, 255, 0.95); --card-border: 1px solid rgba(255, 255, 255, 0.6); --card-border-hover: 1px solid rgba(3, 169, 243, 0.2); --card-radius: var(--radius-2xl); --card-blur: blur(20px); --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); --card-shadow-hover: 0 16px 48px rgba(3, 169, 243, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9); --card-lift: -4px; /* Gradients */ --gradient-primary: linear-gradient(135deg, #03A9F3 0%, #ab8ce4 100%); --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-cool: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); --gradient-mesh: radial-gradient(at 40% 20%, rgba(3, 169, 243, 0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(171, 140, 228, 0.15) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(245, 158, 11, 0.1) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(0, 194, 146, 0.1) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(3, 169, 243, 0.1) 0px, transparent 50%); /* ====================================================================== TRANSITIONS & ANIMATIONS ====================================================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* Easing functions */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ====================================================================== Z-INDEX SCALE ====================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; } /* ========================================================================== BREAKPOINT MEDIA QUERIES (pro reference v komentářích) --breakpoint-sm: 640px; // Small devices --breakpoint-md: 768px; // Tablets --breakpoint-lg: 1024px; // Desktops --breakpoint-xl: 1280px; // Large desktops --breakpoint-2xl: 1440px; // Extra large ========================================================================== */