/* ============================================== MASTER STYLES CSS - MODULAR IMPORT SYSTEM ttrening.com Professional Website - Production Ready ============================================== */ /* Import all modular CSS files in correct order */ /* 1. Variables - Must be loaded first */ @import url('./01-variables.css'); /* 2. Base styles and reset */ @import url('./02-base.css'); /* 3. Layout system (grid, flexbox, containers) */ @import url('./03-layout.css'); /* 4. Components (buttons, cards, forms, navigation) */ @import url('./04-components.css'); /* 5. Utility classes (helpers, spacing, colors) */ @import url('./05-utilities.css'); /* 6. Page-specific styles */ @import url('./06-pages.css'); /* 7. Accessibility styles */ @import url('./accessibility.css'); /* ============================================== CRITICAL CSS - Inline in for performance Uncomment if you want to inline critical CSS ============================================== */ /* // Critical above-the-fold styles .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); background: var(--glass-white); backdrop-filter: var(--glass-backdrop); border-bottom: 1px solid var(--glass-border); z-index: var(--z-navbar); } .hero { padding: calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl); text-align: center; } */ /* ============================================== BROWSER-SPECIFIC FIXES ============================================== */ /* Safari-specific fixes */ @supports (-webkit-backdrop-filter: blur(1px)) { .navbar, .card, .btn, .form-input, .course-nav, .content-container { -webkit-backdrop-filter: var(--glass-backdrop); } } /* Firefox fallbacks */ @-moz-document url-prefix() { .navbar, .card, .btn, .form-input, .course-nav, .content-container { background: rgba(255, 255, 255, 0.15); } } /* ============================================== PRINT STYLES ============================================== */ @media print { .navbar, .back-to-top, .mobile-menu-toggle, .btn, button { display: none !important; } body { background: white !important; color: black !important; padding-top: 0 !important; } .hero, .section, .card, .content-container { background: white !important; border: 1px solid #ccc !important; box-shadow: none !important; backdrop-filter: none !important; } h1, h2, h3, h4, h5, h6 { color: black !important; } p, li { color: #333 !important; } a { color: #0066cc !important; text-decoration: underline !important; } } /* ============================================== REDUCED MOTION PREFERENCES ============================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .animate-fadeInUp, .animate-fadeIn, .animate-slideInRight, .animate-bounce, .animate-pulse, .animate-spin { animation: none !important; } } .body-type-distribution { max-width: 400px; margin: 0 auto; } .distribution-item { margin-bottom: 1.5rem; } .distribution-bar { height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; margin-bottom: 0.5rem; } .distribution-fill { height: 100%; border-radius: 20px; transition: width 0.8s ease; } .distribution-fill.ecto { background: linear-gradient(90deg, #3b82f6, #60a5fa); } .distribution-fill.meso { background: linear-gradient(90deg, #10b981, #34d399); } .distribution-fill.endo { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .distribution-label { display: flex; justify-content: space-between; align-items: center; } .distribution-label span { color: var(--text-secondary); font-weight: 500; } .distribution-label strong { color: var(--white); font-size: 1.125rem; font-weight: 700; } /* Move back-to-top to bottom left */ .back-to-top { bottom: var(--spacing-6); left: var(--spacing-6); /* Umesto right */ right: auto; /* Resetuj right poziciju */ } /* Mobile positioning */ @media (max-width: 768px) { .back-to-top { left: 20px; bottom: 20px; } } /* Method selection */ .card.active { border-color: var(--primary); background: var(--primary-100); } .card.active .badge { background: var(--primary); color: var(--white); } .card.active h4 { color: var(--primary); }