/* Minification failed. Returning unminified contents. (15,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (36,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (149,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (151,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (161,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (162,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (163,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (175,49): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (175,66): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (178,34): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (193,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (194,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (198,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (199,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (201,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (206,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (207,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (211,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (212,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (230,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (236,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (237,39): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (253,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (257,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (257,71): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (282,22): run-time error CSS1039: Token not allowed after unary operator: '-transition' (313,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (317,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (331,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (332,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (343,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (368,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (369,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (397,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (403,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (404,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (420,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (430,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (436,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (472,38): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (491,37): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (507,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (520,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (525,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (545,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (546,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (569,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (570,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (585,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (596,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (614,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (616,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (617,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (621,30): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (622,25): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (626,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (627,25): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (645,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (649,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (650,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (663,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (698,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (699,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (701,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (703,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (711,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (712,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (714,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (719,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (720,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (721,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (722,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (724,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (732,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (733,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (735,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (736,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (741,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (743,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (752,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (784,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (1060,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (1060,71): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1937,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (1938,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (1941,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (1944,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1977,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (1978,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (1980,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (1985,30): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' (1998,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2008,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (2009,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2011,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (2018,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2028,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2241,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (2242,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2244,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (2247,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2254,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2256,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2260,36): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2296,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2308,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2313,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2319,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2334,45): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2334,72): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2383,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (2384,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2385,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (2386,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (2412,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2473,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-white-s' (2476,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2662,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (2663,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (2697,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (3181,16): run-time error CSS1030: Expected identifier, found '.' (3181,35): run-time error CSS1031: Expected selector, found ')' (3181,35): run-time error CSS1025: Expected comma or open brace, found ')' (3189,10): run-time error CSS1030: Expected identifier, found '.' (3189,29): run-time error CSS1031: Expected selector, found ')' (3189,29): run-time error CSS1025: Expected comma or open brace, found ')' (3197,16): run-time error CSS1030: Expected identifier, found '.' (3197,35): run-time error CSS1031: Expected selector, found ')' (3197,35): run-time error CSS1025: Expected comma or open brace, found ')' (3203,10): run-time error CSS1030: Expected identifier, found '.' (3203,29): run-time error CSS1031: Expected selector, found ')' (3203,29): run-time error CSS1025: Expected comma or open brace, found ')' (3217,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3218,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3219,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3220,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3222,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3223,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3224,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3226,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3227,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3228,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3230,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3231,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3233,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3243,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (3262,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (3267,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (3280,46): run-time error CSS1039: Token not allowed after unary operator: '-gradient-start' (3280,69): run-time error CSS1039: Token not allowed after unary operator: '-gradient-end' (3294,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (3301,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3305,50): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3305,72): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (3306,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (3314,30): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (3327,26): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (3409,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (3411,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (3416,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (3420,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (3426,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3427,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (3445,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (3451,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light' (3458,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3469,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (3476,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light' (3488,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (3491,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3498,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (3499,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-light' (3513,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3520,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (3524,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light' (3666,17): run-time error CSS1035: Expected colon, found ',' (3866,5): run-time error CSS1035: Expected colon, found '{' (4237,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-50' (4281,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (4286,17): run-time error CSS1039: Token not allowed after unary operator: '-text-light' (4302,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (4307,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (4349,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4356,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4369,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4379,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4389,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (4402,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4403,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (4418,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (4423,21): run-time error CSS1039: Token not allowed after unary operator: '-text-light' (4430,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (4452,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4478,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4479,17): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (4485,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (4490,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4491,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (4496,26): run-time error CSS1039: Token not allowed after unary operator: '-white' (4497,21): run-time error CSS1039: Token not allowed after unary operator: '-text-dark' (4502,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (4503,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (4536,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (4567,21): run-time error CSS1039: Token not allowed after unary operator: '-white' (4572,30): run-time error CSS1039: Token not allowed after unary operator: '-primary-color' (4599,26): run-time error CSS1039: Token not allowed after unary operator: '-white' (4604,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (4717,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-white' (4733,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (4735,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (4737,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (4742,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (4748,26): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4754,29): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (4763,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (4771,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-white' (4782,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (4783,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4788,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (4812,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (4824,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-white' (4826,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius-lg' (4828,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (4841,49): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4841,71): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (4843,36): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (4852,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (4853,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4857,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4858,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (4866,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4870,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (4876,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4882,25): run-time error CSS1039: Token not allowed after unary operator: '-border-radius' (4884,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (4902,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (4909,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4914,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-black' (4921,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-fast' */ /* Reset and Base Styles */ /** { margin: 0; padding: 0; box-sizing: border-box; }*/ /* Preloader */ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--primary-white-s); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s, visibility 0.5s; } .preloader.hidden { opacity: 0; visibility: hidden; } .loader { display: flex; gap: 10px; } .loader-circle { width: 15px; height: 15px; background: var(--primary-black); border-radius: 50%; animation: loaderPulse 1.5s infinite ease-in-out; } .loader-circle:nth-child(1) { animation-delay: 0s; } .loader-circle:nth-child(2) { animation-delay: 0.2s; } .loader-circle:nth-child(3) { animation-delay: 0.4s; } @keyframes loaderPulse { 0%, 80%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.3); opacity: 0.5; } } :root { --primary-black: #000000; --primary-white-s: #ffffff; --gray-100: #f8f9fa; --gray-200: #e9ecef; --gray-300: #dee2e6; --gray-400: #ced4da; --gray-500: #adb5bd; --gray-600: #6c757d; --gray-700: #495057; --gray-800: #343a40; --gray-900: #212529; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.25); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --border-radius: 8px; --border-radius-lg: 16px; --border-radius-xl: 24px; } /*body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--gray-900); background-color: var(--primary-white-s); overflow-x: hidden; } html { scroll-behavior: smooth; } .container-home { max-width: 1400px; margin: 0 auto; padding: 0 20px; }*/ /* Typography */ /*h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; letter-spacing: -0.02em; } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); } h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } p { margin-bottom: 1rem; color: var(--gray-700); font-size: 1rem; line-height: 1.8; } .label-info{ background-color:black; color:white; }*/ /* Buttons */ .btn-primary, .btn-outline, .btn-outline-white { padding: 12px 24px; font-size: 16px; font-weight: 600; border: none; border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-normal); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; position: relative; overflow: hidden; } .btn-primary { background: var(--primary-black) !important; color: var(--primary-white-s) !important; border: 2px solid var(--primary-black) !important; position: relative; z-index: 1; } .btn-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, var(--gray-800), var(--primary-black)); z-index: -1; opacity: 0; transition: opacity var(--transition-normal); border-radius: inherit; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .btn-primary:hover::before { opacity: 1; } .btn-outline { background: transparent; color: var(--primary-black); border: 2px solid var(--primary-black); } .btn-outline:hover { background: var(--primary-black); color: var(--primary-white-s); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline-white { background: transparent; color: var(--primary-white-s); border: 2px solid var(--primary-white-s); } .btn-outline-white:hover { background: var(--primary-white-s); color: var(--primary-black); transform: translateY(-2px); } .btn-large { padding: 16px 32px; font-size: 18px; } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; transition: all var(--transition-normal); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-md); border-bottom: 1px solid var(--gray-200); } .nav-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { font-size: 1.5rem; font-weight: 900; } .logo-text { color: var(--primary-black); } .logo-accent { background: linear-gradient(135deg, var(--primary-black) 0%, var(--gray-600) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Logo Styles */ .logo-text-container { display: flex; align-items: center; } .logo-text-main { font-size: 32px; font-weight: 900; color: #000000; letter-spacing: -1px; line-height: 1; } /* Logo Image Styles (for footer) */ .logo-image { height: 45px; width: auto; object-fit: contain; transition: var(--transition); /* Convert any color image to pure black */ filter: brightness(0) saturate(100%) invert(0); -webkit-filter: brightness(0) saturate(100%) invert(0); } .logo-image:hover { transform: scale(1.05); filter: brightness(0) saturate(100%) invert(0); -webkit-filter: brightness(0) saturate(100%) invert(0); } /* Footer logo specific */ .footer-logo-img { height: 40px; filter: brightness(0) invert(1); opacity: 0.9; } .footer-logo-img:hover { opacity: 1; transform: scale(1.05); } .nav-menu { display: flex; list-style: none; gap: 2rem; } .nav-link { color: var(--gray-700); text-decoration: none; font-weight: 500; font-size: 0.95rem !important; transition: all var(--transition-fast); position: relative; white-space: nowrap; padding: 0.5rem 0; text-decoration: none; } .nav-link:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary-black); transition: width var(--transition-fast); } .nav-link:hover:after, .nav-link.active:after { width: 100%; text-decoration: none; } .nav-link:hover, .nav-link.active { color: var(--primary-black); text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: 1rem; } .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: transparent; border: none; cursor: pointer; padding: 0; } .menu-toggle span { width: 100%; height: 3px; background: var(--primary-black); transition: all var(--transition-fast); border-radius: 2px; } .menu-toggle.active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); } /* =================================== MODERN NAVBAR SPECIFIC STYLES =================================== */ .navbar-modern { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; transition: all var(--transition-normal); border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .navbar-modern.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-md); border-bottom: 1px solid var(--gray-200); } .navbar-content { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0 !important; position: relative; gap: 2rem; } .navbar-logo { display: flex; flex-direction: column; text-decoration: none; transition: all var(--transition-fast); } .navbar-logo:hover { transform: scale(1.02); } .navbar-logo .logo-text { font-size: 1.5rem; font-weight: 900; color: var(--primary-black); line-height: 1; } .navbar-logo .logo-tagline { font-size: 0.7rem; color: var(--gray-600); font-weight: 500; margin-top: 2px; } .navbar-menu { display: flex; align-items: center; flex: 1; list-style: none; margin: 0; padding: 0; /*gap: 3rem;*/ } .desktop-menu { display: flex; align-items: center; width: 100%; justify-content: space-between; } /* Navbar Groups - Organized Layout */ .navbar-group { display: flex; align-items: center; gap: 1.5rem; } .navbar-group-left { /* Environment + Admin - la stânga */ justify-content: flex-start; /*padding-right: 2rem;*/ } .navbar-group-left:not(:empty) { border-right: 1px solid var(--gray-300); } .navbar-group-center { /* Homepage navigation - centru */ justify-content: center; flex: 1; /*gap: 2rem;*/ padding: 0 1.7rem; } .navbar-group-right { /* Module + User - la dreapta */ justify-content: flex-end; gap: 1rem; padding-left: 2rem; } .navbar-group-right:not(:empty) { border-left: 1px solid var(--gray-300); } .nav-item { position: relative; text-decoration: none; } .nav-item.dropdown .nav-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .nav-item .nav-link.active { color: var(--primary-black); font-weight: 700; position: relative; text-decoration: none; } .nav-item .nav-link.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 3px; background: var(--primary-black); border-radius: 3px; } .nav-item .nav-link:hover { color: var(--primary-black); } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001; } .mobile-menu-toggle span { width: 100%; height: 3px; background: var(--primary-black); transition: all var(--transition-fast); border-radius: 2px; } .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); } /* Mobile Menu */ .mobile-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; background: var(--primary-white-s); box-shadow: var(--shadow-lg); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .mobile-menu.active { max-height: calc(100vh - 70px); overflow-y: auto; padding: 1.5rem; } .mobile-nav-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-200); } .mobile-nav-section:last-child { border-bottom: none; } .mobile-nav-section h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; color: var(--gray-600); margin-bottom: 1rem; letter-spacing: 1px; } .mobile-nav-section ul { list-style: none; padding: 0; margin: 0; } .mobile-nav-section li { margin-bottom: 0.5rem; } .mobile-nav-section a { display: block; padding: 0.75rem 1rem; color: var(--gray-700); text-decoration: none; border-radius: var(--border-radius); transition: all var(--transition-fast); } .mobile-nav-section a:hover { background: var(--gray-100); color: var(--primary-black); } .mobile-nav-section a.active { background: var(--primary-black); color: var(--primary-white-s); font-weight: 700; } /* User Menu Desktop */ .navbar-user-menu { display: flex; align-items: center; } .user-menu-link { display: flex; align-items: center; gap: 0.5rem; } .user-menu-link .username { font-weight: 600; color: var(--gray-700); } .user-menu-link .credits-badge { background: var(--primary-black); color: var(--primary-white-s); padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; } .user-dropdown .dropdown-menu { min-width: 220px; } .user-dropdown .dropdown-menu .dropdown-header { font-weight: 700; color: var(--gray-700); padding: 0.75rem 1rem; } .user-dropdown .dropdown-menu li a { padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; } .user-dropdown .dropdown-menu li a i { width: 20px; text-align: center; } .logout-link, .logout-link-mobile { color: #dc3545 !important; } .logout-link:hover, .logout-link-mobile:hover { background: rgba(220, 53, 69, 0.1) !important; } /* Auth Buttons */ .navbar-auth-buttons { display: flex; align-items: center; gap: 1rem; } .btn-outline-register { padding: 0.5rem 1.5rem; border: 2px solid var(--primary-black); color: var(--primary-black); background: transparent; border-radius: var(--border-radius); font-weight: 600; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-outline-register:hover { background: var(--primary-black); color: var(--primary-white-s); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-primary-login { padding: 0.5rem 1.5rem; background: var(--primary-black); color: var(--primary-white-s); border: 2px solid var(--primary-black); border-radius: var(--border-radius); font-weight: 600; transition: all var(--transition-fast); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary-login:hover { background: var(--gray-800); border-color: var(--gray-800); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--primary-white-s); } /* Mobile Credits Display */ .mobile-credits-display { background: var(--gray-100); padding: 1rem; border-radius: var(--border-radius); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; } .mobile-credits-display i { color: var(--primary-black); } /* Mobile Auth Buttons */ .mobile-auth-buttons { display: flex; flex-direction: column; gap: 1rem; } .mobile-auth-btn { width: 100%; justify-content: center; padding: 0.75rem 1.5rem; font-size: 1rem; } /* Visibility Classes */ .desktop-only { display: block; } .mobile-only { display: none; } /* Environment Indicator */ .environment-indicator { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border-radius: var(--border-radius); font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .env-dev { background: #28a745; color: white; } .env-stage { background: #ffc107; color: #212529; } /* ===== NAVBAR GLOBAL OVERRIDES - PE TOATE PAGINILE ===== */ /* Acestea se aplică peste tot pentru navbar consistent */ /* Force Inter font în navbar */ .navbar-modern, .navbar-modern *:not([class*="fa-"]):not(.fa):not(.glyphicon) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } /* Navbar font sizes - GLOBALE */ .navbar-logo .logo-text { font-size: 1.5rem !important; font-weight: 900 !important; } .navbar-logo .logo-tagline { font-size: 0.7rem !important; font-weight: 500 !important; } .navbar-modern .nav-link, .navbar-group .nav-link, .homepage-nav-link { font-size: 0.95rem !important; font-weight: 500 !important; } .navbar-modern .dropdown-toggle { font-size: 0.95rem !important; font-weight: 500 !important; } .navbar-modern .username { font-size: 0.95rem !important; font-weight: 600 !important; } .navbar-modern .credits-badge { font-size: 0.85rem !important; font-weight: 600 !important; } .navbar-modern .btn-outline-register, .navbar-modern .btn-primary-login { font-size: 0.95rem !important; font-weight: 600 !important; } /* Responsive Navbar - Tablets */ @media (max-width: 1400px) { .navbar-group-center { gap: 1.5rem; padding: 0 1.5rem; } .navbar-group-left, .navbar-group-right { gap: 1rem; } .nav-link { font-size: 0.9rem; } } /* Responsive Navbar - Mobile */ @media (max-width: 991px) { .desktop-menu { display: none; } .mobile-menu-toggle { display: flex; } .mobile-menu { display: block; } .desktop-only { display: none; } .mobile-only { display: block; } .navbar-content { padding: 0.75rem 0; } .navbar-logo .logo-text { font-size: 1.25rem; } .navbar-logo .logo-tagline { font-size: 0.65rem; } .environment-indicator { font-size: 0.65rem; padding: 0.25rem 0.5rem; } /* Remove group separators on mobile */ .navbar-group-left, .navbar-group-right { border: none !important; padding: 0; } } /* Hero Section */ /*.hero { min-height: 100vh; display: flex; flex-direction: column;*/ /*align-items: center;*/ /*position: relative; padding: 0; background: linear-gradient(180deg, var(--primary-white-s) 0%, var(--gray-100) 100%); overflow-x: hidden; overflow-y: visible; } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .geometric-shape { position: absolute; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; opacity: 0.03; animation: float 20s infinite ease-in-out, morph 8s infinite ease-in-out; background: linear-gradient(45deg, var(--primary-black), transparent); } @keyframes morph { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } } .shape-1 { width: 400px; height: 400px; background: var(--primary-black); top: -100px; right: -100px; animation-delay: 0s; } .shape-2 { width: 300px; height: 300px; background: var(--gray-800); bottom: -50px; left: -50px; animation-delay: 5s; } .shape-3 { width: 200px; height: 200px; background: var(--gray-600); top: 50%; left: 50%; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(30px, -30px) rotate(90deg); } 50% { transform: translate(-20px, 20px) rotate(180deg); } 75% { transform: translate(-30px, -20px) rotate(270deg); } } .hero-content { display: grid; grid-template-columns: 2fr 1fr; gap: 120px; align-items: center; position: relative; z-index: 2; }*/ /* Hero Intro Section - Pagină mare goală cu text centrat */ /*.hero-intro-section { min-height: 125vh !important; height: 125vh !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; position: relative !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 1 !important; background: transparent !important; box-sizing: border-box !important; } .hero-intro-text { font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 800 !important; color: var(--primary-black) !important; text-align: center !important; margin: 0 auto !important; padding: 0 20px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; max-width: 1200px !important; width: 100% !important; } .hero-badge { display: inline-block; padding: 8px 16px; background: var(--primary-black); color: var(--primary-white-s); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--border-radius); margin-bottom: 1rem; animation: slideInLeft 1s ease-out; } .hero-title { margin-bottom: 1.5rem; animation: slideInLeft 1s ease-out 0.2s backwards; }*/ .text-gradient { background: linear-gradient(135deg, var(--primary-black) 0%, var(--gray-600) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /*.hero-description { font-size: 1.2rem; color: var(--gray-600); margin-bottom: 2rem; animation: slideInLeft 1s ease-out 0.4s backwards; } .hero-buttons { display: flex; gap: 1rem; margin-bottom: 3rem; animation: slideInLeft 1s ease-out 0.6s backwards; } .hero-stats { display: flex; gap: 3rem; animation: slideInLeft 1s ease-out 0.8s backwards; } .stat { display: flex; flex-direction: column; margin-top:20px; } .stat-number { font-size: 2rem !important; font-weight: 800; color: var(--primary-black); } .stat-label { font-size: 0.9rem; color: var(--gray-600); } .hero-visual { position: relative; display: flex; justify-content: center; align-items: center; animation: slideInRight 1s ease-out; } .central-graphic { position: relative; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } .orbit { position: absolute; border: 2px solid var(--gray-300); border-radius: 50%; animation: rotate 20s linear infinite; } .orbit-1 { width: 100%; height: 100%; animation-duration: 20s; } .orbit-2 { width: 80%; height: 80%; animation-duration: 15s; animation-direction: reverse; } .orbit-3 { width: 60%; height: 60%; animation-duration: 10s; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .core { width: 150px; height: 150px; background: var(--primary-black); border-radius: var(--border-radius-lg); display: flex; justify-content: center; align-items: center; color: var(--primary-white-s); font-size: 3rem; box-shadow: var(--shadow-xl); z-index: 10; } .core-icon{ font-size:65px; } .floating-card { position: absolute; background: var(--primary-white-s); padding: 1rem 1.5rem; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 0.75rem; font-weight: 600; animation: floatCard 4s ease-in-out infinite; border: 1px solid var(--gray-200); backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .floating-card i { font-size: 1.5rem; color: var(--primary-black); } .card-1 { top: 10px; left: 0px; animation-delay: 0s; } .card-2 { top: 50%; right: -100px; animation-delay: 1.5s; } .card-3 { bottom: 0; left: 0; animation-delay: 3s; } @keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .scroll-indicator { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--gray-600); animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }*/ /* Services Section */ /*.services { padding: 80px 0; background: var(--primary-white-s); } .section-header { text-align: center; margin-bottom: 60px; } .section-badge { display: inline-block; padding: 8px 16px; background: var(--gray-100); color: var(--primary-black); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--border-radius); margin-bottom: 1rem; } .section-title { margin-bottom: 1rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: var(--primary-black); border-radius: 2px; } .section-description { font-size: 1.1rem; color: var(--gray-600); max-width: 600px; margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .service-card { background: var(--primary-white-s); padding: 40px; border-radius: var(--border-radius-lg); border: 1px solid var(--gray-200); transition: all var(--transition-normal); position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-black), var(--gray-600)); transform: translateX(-100%); transition: transform var(--transition-normal); } .service-card:hover::before { transform: translateX(0); } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--primary-black); } .service-card.featured { border-color: var(--primary-black); background: var(--gray-100); } .featured-badge { position: absolute; top: 20px; right: 20px; padding: 6px 12px; background: var(--primary-black); color: var(--primary-white-s); font-size: 12px; font-weight: 700; border-radius: var(--border-radius); } .service-icon { width: 60px; height: 60px; background: var(--primary-black); color: var(--primary-white-s); display: flex; justify-content: center; align-items: center; font-size: 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; transition: all var(--transition-normal); } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-card h3 { margin-bottom: 1rem; } .service-features { list-style: none; margin: 1.5rem 0; } .service-features li { padding: 0.5rem 0; color: var(--gray-600); display: flex; align-items: center; gap: 0.5rem; } .service-features i { color: var(--primary-black); font-size: 0.8rem; } .service-link { color: var(--primary-black); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap var(--transition-fast); } .service-link:hover { gap: 1rem; }*/ /* About Section */ /*.about { padding: 80px 0; background: var(--gray-100); } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-description { font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; } .about-features { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } .feature { display: flex; gap: 1rem; align-items: start; } .feature i { width: 40px; height: 40px; background: var(--primary-black); color: var(--primary-white-s); display: flex; justify-content: center; align-items: center; border-radius: var(--border-radius); flex-shrink: 0; } .feature h4 { margin-bottom: 0.25rem; } .feature p { color: var(--gray-600); margin: 0; } .about-visual { position: relative; } .about-image { position: relative; border-radius: var(--border-radius-lg); overflow: hidden; } .image-placeholder { width: 100%; height: 400px; background: linear-gradient(135deg, var(--primary-black) 0%, var(--gray-800) 100%); display: flex; justify-content: center; align-items: center; color: var(--primary-white-s); font-size: 5rem; border-radius: var(--border-radius-lg); } .floating-stat { position: absolute; background: var(--primary-white-s); padding: 1rem 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 1.5rem; font-weight: 800; color: var(--primary-black); } .stat-text { font-size: 0.8rem; color: var(--gray-600); } .stat-1 { top: 30px; right: -12px !important; } .stat-2 { bottom: 30px; left: -12px !important; }*/ /* Portfolio Section */ /*.portfolio { padding: 80px 0; background: var(--primary-white-s); } .portfolio-filters { display: flex; justify-content: center; gap: 1rem; margin-bottom: 40px; flex-wrap: wrap; } .filter-btn { padding: 10px 20px; background: transparent; border: 2px solid var(--gray-300); border-radius: var(--border-radius); cursor: pointer; font-weight: 600; transition: all var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--primary-black); color: var(--primary-white-s); border-color: var(--primary-black); } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .portfolio-item { position: relative; border-radius: var(--border-radius-lg); overflow: hidden; cursor: pointer; transition: all var(--transition-normal); background: var(--primary-white-s); border: 1px solid var(--gray-200); } .portfolio-item::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(0, 0, 0, 0.1); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .portfolio-item:hover::after { width: 600px; height: 600px; } .portfolio-item:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); } .portfolio-image { position: relative; width: 100%; height: 300px; overflow: hidden; } .portfolio-image .image-placeholder { height: 100%; transition: transform var(--transition-normal); } .portfolio-item:hover .image-placeholder { transform: scale(1.1); } .portfolio-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; opacity: 0; transition: opacity var(--transition-normal); text-align: center; } .portfolio-item:hover .portfolio-overlay { opacity: 1; } .portfolio-overlay h4 { color: var(--primary-white-s); margin-bottom: 0.5rem; } .portfolio-overlay p { color: var(--gray-400); margin-bottom: 1rem; } .portfolio-tags { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; justify-content: center; } .portfolio-tags span { padding: 4px 12px; background: rgba(255, 255, 255, 0.1); color: var(--primary-white-s); font-size: 12px; border-radius: var(--border-radius); }*/ /* Technologies Section */ /*.technologies { padding: 80px 0; background: var(--gray-100); } .tech-categories { display: grid; gap: 40px; } .tech-category h3 { text-align: center; margin-bottom: 2rem; } .tech-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; } .tech-item { background: var(--primary-white-s); padding: 20px; border-radius: var(--border-radius); display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 120px; transition: all var(--transition-normal); border: 2px solid transparent; } .tech-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary-black); } .tech-item i { font-size: 2rem; color: var(--primary-black); } .tech-item span { font-weight: 600; color: var(--gray-700); }*/ /* CTA Section */ /*.cta { padding: 80px 0; background: linear-gradient(135deg, var(--primary-black) 0%, var(--gray-800) 100%); color: var(--primary-white-s); text-align: center; } .cta-content h2 { color: var(--primary-white-s); margin-bottom: 1rem; } .cta-content p { color: var(--gray-300); font-size: 1.2rem; margin-bottom: 2rem; } .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }*/ /* Contact Section */ /*.contact { padding: 80px 0; background: var(--primary-white-s); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .contact-card { background: var(--gray-100); padding: 30px; border-radius: var(--border-radius-lg); text-align: center; transition: all var(--transition-normal); } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .contact-card i { width: 50px; height: 50px; background: var(--primary-black); color: var(--primary-white-s); display: flex; justify-content: center; align-items: center; font-size: 1.2rem; border-radius: var(--border-radius); margin: 0 auto 1rem; } .contact-card h4 { margin-bottom: 0.5rem; } .contact-card p { color: var(--gray-600); margin: 0; } .landing-page-scope .contact-form { background: var(--gray-100); padding: 40px; border-radius: var(--border-radius-lg); } .landing-page-scope .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .landing-page-scope .form-group input, .landing-page-scope .form-group select, .landing-page-scope .form-group textarea { width: 100%; padding: 12px; border: 2px solid var(--gray-300); border-radius: var(--border-radius); font-family: inherit; font-size: 16px; transition: all var(--transition-fast); background: var(--primary-white-s); } .landing-page-scope .form-group input:focus, .landing-page-scope .form-group select:focus, .landing-page-scope .form-group textarea:focus { outline: none; border-color: var(--primary-black); } .landing-page-scope .form-group textarea { resize: vertical; }*/ /* Footer */ /*.footer { background: var(--primary-black); color: var(--primary-white-s); padding: 60px 0 20px; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 40px; margin-bottom: 40px; } .footer-logo { font-size: 1.5rem; font-weight: 900; margin-bottom: 1rem; } .footer-section h4 { margin-bottom: 1rem; color: var(--primary-white-s); } .footer-section p { color: var(--gray-400); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section ul li a { color: var(--gray-400); text-decoration: none; transition: color var(--transition-fast); } .footer-section ul li a:hover { color: var(--primary-white-s); } .social-links { display: flex; gap: 1rem; margin-top: 1rem; } .social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); color: var(--primary-white-s); display: flex; justify-content: center; align-items: center; border-radius: var(--border-radius); transition: all var(--transition-fast); } .social-links a:hover { background: var(--primary-white-s); color: var(--primary-black); transform: translateY(-3px); } .newsletter-form { display: flex; gap: 10px; margin-top: 1rem; } .newsletter-form input { flex: 1; padding: 12px; border: none; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.1); color: var(--primary-white-s); } .newsletter-form input::placeholder { color: var(--gray-500); } .footer-bottom { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-bottom p { color: var(--gray-400); margin: 0; } .footer-links { display: flex; gap: 20px; } .footer-links a { color: var(--gray-400); text-decoration: none; transition: color var(--transition-fast); } .footer-links a:hover { color: var(--primary-white-s); }*/ /*Floating Database Version Indicator*/ .floating-db-indicator { position: fixed; bottom: 100px; right: 30px; background: var(--primary-black); color: var(--primary-white-s); padding: 12px 16px; border-radius: 50px; box-shadow: var(--shadow-xl); cursor: pointer; z-index: 998; transition: all var(--transition-normal); display: flex; align-items: center; gap: 0.5rem; } .floating-db-indicator:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .db-indicator-content { display: flex; align-items: center; gap: 0.5rem; } .db-indicator-content i { font-size: 1.2rem; } .db-version-text { font-size: 0.9rem; } .db-version-text strong { color: #4CAF50; } .db-indicator-tooltip { position: absolute; bottom: 60px; right: 0; background: var(--gray-800); color: var(--primary-white-s); padding: 8px 12px; border-radius: var(--border-radius); font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } .floating-db-indicator:hover .db-indicator-tooltip { opacity: 1; } .db-indicator-tooltip::after { content: ''; position: absolute; top: 100%; right: 20px; border: 5px solid transparent; border-top-color: var(--gray-800); } Back to Top Button .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--primary-black); color: var(--primary-white-s); border: none; border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all var(--transition-normal); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--gray-800); transform: translateY(-5px); } /* Animations */ /*@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }*/ /* Database Version Selector */ /*.database-selector { margin-top: 3rem; padding: 2rem; background: rgba(255, 255, 255, 0.95); border-radius: var(--border-radius-lg); border: 1px solid var(--gray-200); backdrop-filter: blur(10px); } .database-selector label { display: block; font-weight: 600; color: var(--gray-800); margin-bottom: 1rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .database-selector label i { margin-right: 0.5rem; color: var(--primary-black); } .version-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .version-btn { padding: 1rem; background: var(--primary-white-s); border: 2px solid var(--gray-300); border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-normal); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; position: relative; overflow: hidden; } .version-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--primary-black); transform: translateX(-100%); transition: transform var(--transition-normal); } .version-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--gray-600); } .version-btn:hover::before { transform: translateX(0); } .version-btn.active { background: var(--primary-black); color: var(--primary-white-s); border-color: var(--primary-black); transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .version-btn.loading { pointer-events: none; opacity: 0.6; animation: pulse 1s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .version-btn.active .version-year { color: var(--primary-white-s); } .version-btn.active .version-label { color: var(--gray-300); } .version-year { font-size: 1.2rem; font-weight: 700; color: var(--primary-black); } .version-label { font-size: 0.75rem; color: var(--gray-600); text-align: center; }*/ /* Database Version Bar in Services */ /*.database-version-bar { margin: 2rem 0 3rem; padding: 1.5rem; background: linear-gradient(135deg, var(--gray-100) 0%, var(--primary-white-s) 100%); border-radius: var(--border-radius-lg); border: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; box-shadow: var(--shadow-sm); } .version-info { display: flex; align-items: center; gap: 1rem; font-weight: 600; color: var(--gray-800); } .version-info i { font-size: 1.5rem; color: var(--primary-black); } .current-version { padding: 0.5rem 1rem; background: var(--primary-black); color: var(--primary-white-s); border-radius: var(--border-radius); font-size: 0.9rem; } .version-selector-compact { display: flex; gap: 1rem; align-items: center; } .version-dropdown { padding: 0.75rem 1rem; border: 2px solid var(--gray-300); border-radius: var(--border-radius); background: var(--primary-white-s); font-family: inherit; font-size: 0.95rem; cursor: pointer; transition: all var(--transition-fast); min-width: 250px; } .version-dropdown:hover, .version-dropdown:focus { border-color: var(--primary-black); outline: none; }*/ .btn-update-db { padding: 0.75rem 1.5rem; background: var(--primary-black); color: var(--primary-white-s); border: none; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: all var(--transition-normal); display: flex; align-items: center; gap: 0.5rem; } .btn-update-db:hover { background: var(--gray-800); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-update-db i { transition: transform var(--transition-normal); } .btn-update-db:hover i { transform: rotate(180deg); } /* Database Loading Overlay */ .db-loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 99999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.3s ease-out; } .db-loading-overlay.show { opacity: 1; visibility: visible; } .db-loading-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--primary-white-s); z-index: 100000; width: auto; max-width: 90%; } .db-loading-spinner { margin-bottom: 1.5rem; } .db-loading-spinner i { font-size: 4rem; color: var(--primary-white-s); animation: spin 1s linear infinite; } .db-loading-content h3 { color: var(--primary-white-s); margin-bottom: 0.5rem; font-size: 1.5rem; } .db-loading-content p { color: var(--gray-400); margin-bottom: 1.5rem; } .loading-bar { width: 200px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin: 0 auto; overflow: hidden; } .loading-progress { height: 100%; background: linear-gradient(90deg, var(--primary-white-s) 0%, var(--gray-400) 100%); width: 0; animation: loadingProgress 1.5s ease-out forwards; } @keyframes loadingProgress { to { width: 100%; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes countUp { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Database Version Notification */ .db-notification { position: fixed; top: 100px; right: 20px; padding: 1rem 1.5rem; background: var(--primary-black); color: var(--primary-white-s); border-radius: var(--border-radius); box-shadow: var(--shadow-xl); z-index: 10000; display: none; animation: slideInRight 0.3s ease-out; max-width: 350px; } .db-notification.show { display: flex; align-items: center; gap: 1rem; } .db-notification i { font-size: 1.5rem; color: #4CAF50; } .db-notification-content h4 { margin: 0 0 0.25rem; font-size: 1rem; } .db-notification-content p { margin: 0; font-size: 0.85rem; color: var(--gray-300); } /* Responsive Design */ @media (max-width: 1024px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-visual { margin-top: 40px; } .floating-card { display: none; } .about-content { grid-template-columns: 1fr; } .contact-content { grid-template-columns: 1fr; } } @media (max-width: 768px) { .database-selector { padding: 1.5rem; } .version-buttons { grid-template-columns: repeat(2, 1fr); } .database-version-bar { flex-direction: column; align-items: stretch; } .version-selector-compact { flex-direction: column; width: 100%; } .version-dropdown { width: 100%; } .btn-update-db { width: 100%; justify-content: center; } .nav-menu { display: none; position: fixed; top: 70px; left: 0; right: 0; background: var(--primary-white-s); flex-direction: column; padding: 2rem; box-shadow: var(--shadow-lg); } .nav-menu.active { display: flex; } .menu-toggle { display: flex; } .nav-actions .btn-primary { display: none; } .hero-buttons { flex-direction: column; width: 100%; } .hero-buttons button { width: 100%; } .services-grid { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; text-align: center; } .social-links { justify-content: center; } .footer-bottom { flex-direction: column; text-align: center; } .form-row { grid-template-columns: 1fr; } .contact-info { grid-template-columns: 1fr; } } @media (max-width: 480px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } .hero-stats { flex-direction: column; gap: 1rem; } .portfolio-grid { grid-template-columns: 1fr; } .tech-grid { grid-template-columns: repeat(2, 1fr); } } /* =================================================================== BOOTSTRAP OVERRIDE - IMPORTANT FIXES Stiluri care suprascriu Bootstrap pentru a păstra designul landing page =================================================================== */ /* ===== CONTAINER-ELE INTERNE PENTRU HOMEPAGE ===== */ /* Container-ele interne (.container-home) rămân 1400px pe ecrane mari */ .landing-page-scope .container, .landing-page-scope .container-home { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Responsive pentru container-ele interne din homepage */ @media (max-width: 768px) { .landing-page-scope .container, .landing-page-scope .container-home { max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 769px) and (max-width: 1399px) { .landing-page-scope .container, .landing-page-scope .container-home { max-width: 1140px !important; } } @media (min-width: 1400px) { .landing-page-scope .container, .landing-page-scope .container-home { max-width: 1400px !important; } } /* Typography overrides - DOAR PENTRU LANDING PAGE */ .landing-page-scope h1, .landing-page-scope h2, .landing-page-scope h3, .landing-page-scope h4, .landing-page-scope h5, .landing-page-scope h6 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } .landing-page-scope h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; } .landing-page-scope h2 { font-size: clamp(2rem, 4vw, 3rem) !important; } .landing-page-scope h3 { font-size: clamp(1.5rem, 3vw, 2rem) !important; } .landing-page-scope h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important; } .landing-page-scope h5 { font-size: 1.1rem !important; } .landing-page-scope h6 { font-size: 1rem !important; } /* Paragraph overrides - DOAR pentru landing page */ .landing-page-scope p { font-size: 1rem !important; line-height: 1.8 !important; margin-bottom: 1rem !important; } /* Span și text general - DOAR pentru landing page */ .landing-page-scope span, .landing-page-scope div, .landing-page-scope a, .landing-page-scope label { /*font-size: inherit !important;*/ } /* Link-uri generale - DOAR pentru landing page */ .landing-page-scope a { font-size: inherit !important; text-decoration: none !important; } /* Button overrides - doar pentru landing page sections */ .hero .btn-primary, .services .btn-primary, .about .btn-primary, .cta .btn-primary, .contact .btn-primary { padding: 12px 24px !important; font-size: 16px !important; font-weight: 600 !important; border-radius: var(--border-radius) !important; border: 2px solid var(--primary-black) !important; } .btn-large { padding: 16px 32px !important; font-size: 18px !important; } /* Container padding override - DOAR pentru landing page */ .landing-page-scope .hero .container, .landing-page-scope .services .container, .landing-page-scope .about .container, .landing-page-scope .portfolio .container, .landing-page-scope .technologies .container, .landing-page-scope .cta .container, .landing-page-scope .contact .container { padding-left: 0px !important; padding-right: 0px !important; } /* Form overrides pentru landing page */ .landing-page-scope .contact-form input, .landing-page-scope .contact-form select, .landing-page-scope .contact-form textarea, .landing-page-scope .newsletter-form input { font-family: 'Inter', sans-serif !important; font-size: 16px !important; } .landing-page-scope .contact-form input:focus, .landing-page-scope .contact-form select:focus, .landing-page-scope .contact-form textarea:focus { box-shadow: none !important; outline: none !important; border-color: var(--primary-black) !important; } /* Previne Bootstrap să modific spacing-ul în landing page */ .hero, .services, .about, .portfolio, .technologies, .cta, .contact { font-size: 16px; line-height: 1.6; } /* Fix pentru button hover în landing page */ .hero .btn-outline:hover, .services .btn-outline:hover, .cta .btn-outline-white:hover { color: inherit !important; } /* Remove Bootstrap margin-bottom din headings în landing sections */ .section-header h2 { margin-bottom: 1rem !important; } .service-card h3, .feature h4 { margin-bottom: 0.5rem !important; } /* Fix pentru lists în service cards */ .service-features { padding-left: 0 !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .service-features li { list-style: none !important; } /* Override Bootstrap grid pentru landing sections */ /* Comentat temporar - nu este necesar .services-grid, .portfolio-grid, .tech-grid { display: grid !important; } */ /* Fix row în contact și footer */ .form-row { display: grid !important; margin-left: 0 !important; margin-right: 0 !important; } .footer-content { display: grid !important; } /* ===== NAVBAR FONT SIZES - FOARTE IMPORTANT ===== */ .navbar-modern { font-size: 16px !important; } .navbar-logo .logo-text { font-size: 2rem !important; font-weight: 900 !important; } .navbar-logo .logo-tagline { font-size: 0.7rem !important; font-weight: 500 !important; } /* Nav links în navbar - SIZE MARE */ .nav-link { display: inline-block !important; padding: 0.5rem 0 !important; line-height: 1.6 !important; font-size: 0.95rem !important; font-weight: 500 !important; } .navbar-group .nav-link { font-size: 0.95rem !important; text-decoration: none; } /* Homepage nav links */ .homepage-nav-link { font-size: 0.95rem !important; font-weight: 500 !important; } /* Dropdown toggle în navbar */ .dropdown-toggle { font-size: 0.95rem !important; font-weight: 500 !important; } /* Fix pentru dropdown menu în navbar */ .dropdown-menu { font-family: 'Inter', sans-serif !important; font-size: 14px !important; } .dropdown-menu li a { font-size: 14px !important; line-height: 1.6 !important; padding: 8px 20px !important; } /* Environment indicator */ .environment-indicator { font-size: 0.75rem !important; font-weight: 700 !important; } /* User menu în navbar */ .user-menu-link .username { font-size: 0.95rem !important; font-weight: 600 !important; } .credits-badge { font-size: 0.85rem !important; font-weight: 600 !important; } /* Auth buttons în navbar */ .btn-outline-register, .btn-primary-login { font-size: 0.95rem !important; font-weight: 600 !important; padding: 0.5rem 1.5rem !important; } /* ===== LANDING PAGE SECTIONS ===== */ /* Hero section */ .hero-badge { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; } .hero-description { font-size: 1.2rem !important; line-height: 1.8 !important; } .stat-number { font-size: 3.5rem !important; font-weight: 800 !important; } .stat-label { font-size: 0.9rem !important; } /* Section badges */ .section-badge { font-size: 34px !important; font-weight: 700 !important; letter-spacing: 2px !important; } .section-description { font-size: 1.9375em !important; line-height: 1.25 !important; } /* Service cards */ .service-card h3 { font-size: clamp(1.5rem, 3vw, 2rem) !important; } .service-card p { font-size: 1.4rem !important; } .service-features li { font-size: 1rem !important; } /* About section */ .about-description { font-size: 1.1rem !important; line-height: 1.8 !important; } .feature h4 { font-size: 1.2rem !important; } .feature p { font-size: 1rem !important; } /* Contact form - SCOPED */ .landing-page-scope .contact-form input, .landing-page-scope .contact-form select, .landing-page-scope .contact-form textarea { font-size: 16px !important; } .landing-page-scope .contact-card h4 { font-size: 1.2rem !important; } .landing-page-scope .contact-card p { font-size: 1rem !important; } /* Footer */ .footer { font-size: 16px !important; } .footer-logo { font-size: 1.5rem !important; font-weight: 900 !important; } .footer-section h4 { font-size: 1.2rem !important; } .footer-section p, .footer-section li { font-size: 1rem !important; } /* Database version selector */ .database-selector label { font-size: 0.9rem !important; } .version-year { font-size: 1.2rem !important; font-weight: 700 !important; } .version-label { font-size: 0.75rem !important; } /* Asigură că stilurile de tranziție funcționează */ * { box-sizing: border-box !important; } /* =================================================================== LANDING PAGE SCOPE - TOATE STILURILE SE APLICĂ DOAR PE HOMEPAGE CSS-ul se aplică doar înăuntrul div-ului cu clasa .landing-page-scope =================================================================== */ /* =================================================================== FIX CRUCIAL: ROOT FONT-SIZE pentru REM corect PE TOATE PAGINILE Bootstrap setează html la 10px (62.5%), noi forțăm 16px GLOBAL =================================================================== */ /* OVERRIDE GLOBAL - aplicat pe TOATE paginile pentru REM consistent */ html { scroll-behavior: smooth !important; font-size: 16px !important; /* FORȚAT pe toate paginile */ } /* Double-check cu :root */ :root { font-size: 16px !important; } /* Asigură că Bootstrap nu resetează la 10px pe niciun breakpoint */ @media (min-width: 1px) { html, :root { font-size: 16px !important; } } @media (min-width: 768px) { html, :root { font-size: 16px !important; } } @media (min-width: 992px) { html, :root { font-size: 16px !important; } } @media (min-width: 1400px) { html, :root { font-size: 16px !important; } } /* ===== SCOPED OVERRIDES - DOAR PENTRU LANDING PAGE ===== */ /* Forțează toate elementele din landing page să respecte size-urile noastre */ /* IMPORTANT: Excludem Font Awesome pentru a păstra iconițele! */ .landing-page-scope, .landing-page-scope *:not([class*="fa-"]):not(.fa):not(.glyphicon):not([class*="icon-"]) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } /* Resetare Bootstrap font-size pentru toate elementele comune DOAR în landing page */ .landing-page-scope button, .landing-page-scope input, .landing-page-scope select, .landing-page-scope textarea, .landing-page-scope label, .landing-page-scope .btn, .landing-page-scope .form-control { font-size: 16px !important; font-family: 'Inter', sans-serif !important; } /* Forțează dimensiuni în navbar - EXCLUS iconițe */ .navbar-modern *:not([class*="fa-"]):not(.fa):not(.glyphicon), .navbar-content *:not([class*="fa-"]):not(.fa):not(.glyphicon) { font-family: 'Inter', sans-serif !important; } /* Forțează în toate secțiunile landing page - EXCLUS iconițe */ .hero *:not([class*="fa-"]):not(.fa):not(.glyphicon), .services *:not([class*="fa-"]):not(.fa):not(.glyphicon), .about *:not([class*="fa-"]):not(.fa):not(.glyphicon), .portfolio *:not([class*="fa-"]):not(.fa):not(.glyphicon), .technologies *:not([class*="fa-"]):not(.fa):not(.glyphicon), .cta *:not([class*="fa-"]):not(.fa):not(.glyphicon), .contact *:not([class*="fa-"]):not(.fa):not(.glyphicon), .footer *:not([class*="fa-"]):not(.fa):not(.glyphicon) { font-family: 'Inter', sans-serif !important; } /* Override Bootstrap .small, .text-muted, etc - DOAR pentru landing page */ .landing-page-scope .small, .landing-page-scope small { font-size: 0.875rem !important; } .landing-page-scope .lead { font-size: 1.25rem !important; } /* Bootstrap list overrides - DOAR pentru landing page */ .landing-page-scope ul, .landing-page-scope ol { font-size: inherit !important; } .landing-page-scope li { font-size: inherit !important; } /* Bootstrap table overrides - DOAR pentru landing page */ .landing-page-scope table { font-size: inherit !important; } .landing-page-scope td, .landing-page-scope th { font-size: inherit !important; } /* Forțează code și pre - DOAR pentru landing page */ .landing-page-scope code, .landing-page-scope pre { font-size: inherit !important; } /* Badge și label overrides - DOAR pentru landing page */ .landing-page-scope .badge, .landing-page-scope .label { font-size: 0.75rem !important; } /* ===== PROTECȚIE FONT AWESOME - FOARTE IMPORTANT ===== */ /* Asigură că Font Awesome folosește fontul corect pentru iconițe */ .fa, [class^="fa-"], [class*=" fa-"], .glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"], [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; line-height: 1 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* Glyphicons pentru Bootstrap (dacă există) */ .glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"] { font-family: 'Glyphicons Halflings' !important; } /* END BOOTSTRAP OVERRIDE */ /* =================================================================== CONTAINER OVERRIDE - CONTROLEAZĂ LĂȚIMEA #container DIN _LAYOUT.CSHTML =================================================================== */ /* ===== NAVBAR CONTAINER OVERRIDE ===== */ /* Navbar container să aibă aceeași lățime ca #container principal pentru aliniere perfectă */ .navbar .container, .navbar-modern .container { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Responsive pentru navbar container */ @media (max-width: 768px) { .navbar .container, .navbar-modern .container { max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 769px) and (max-width: 1399px) { .navbar .container, .navbar-modern .container { max-width: 1140px !important; } } @media (min-width: 1400px) { .navbar .container, .navbar-modern .container { max-width: 1400px !important; } } /* ===== MAIN CONTAINER OVERRIDE ===== */ /* OVERRIDE GLOBAL pentru #container - pe TOATE paginile (EXCEPT homepage) */ /* Forțăm max-width: 1400px în loc de valorile fixe Bootstrap */ #container { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; } /* Responsive adjustments pentru #container */ @media (max-width: 768px) { #container { max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 769px) and (max-width: 1399px) { #container { max-width: 1140px !important; } } @media (min-width: 1400px) and (max-width: 1639px) { #container { max-width: 1400px !important; } } @media (min-width: 1640px) { #container { max-width: 1400px !important; } } /* EXCEPȚIE pentru HOMEPAGE - #container devine full-width (100vw) */ /* Când există .landing-page-scope în #container, îl facem full-width */ #container:has(.landing-page-scope) { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; } /* Fallback pentru browsere fără :has() */ body:has(.landing-page-scope) #container { width: 100vw !important; max-width: 100vw !important; padding: 0 !important; margin: 0 !important; } /* Ascunde footer-ul și hr din _Layout.cshtml pe homepage */ #container:has(.landing-page-scope) > hr, #container:has(.landing-page-scope) > footer { display: none !important; } /* Fallback pentru browsere fără :has() */ body:has(.landing-page-scope) #container > hr, body:has(.landing-page-scope) #container > footer { display: none !important; } /* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /*--primary-color: #8b7bd8;*/ --primary-color: black; --primary-dark: #6b5bb8; --primary-light: #ab9be8; --secondary-color: #1a1a2e; --text-dark: #16213e; --text-light: #6b7280; --white: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-800: #1f2937; --gradient-start: #8b7bd8; --gradient-end: #d4a5f9; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: var(--text-dark); overflow-x: hidden; } .container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; } /* Navigation */ .navbar { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; box-shadow: var(--shadow-sm); transition: all 0.3s ease; } .navbar.scrolled { box-shadow: var(--shadow-md); } .nav-content { display: flex; justify-content: space-between; align-items: center; height: 80px; } .logo-text { font-size: 1.75rem; font-weight: 800; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-menu { display: flex; gap: 2rem; align-items: center; } .nav-link { text-decoration: none; color: var(--text-dark); font-weight: 500; transition: color 0.3s ease; font-size: 0.95rem; } .nav-link:hover { color: var(--primary-color); } .nav-link.btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--white); padding: 0.625rem 1.5rem; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .nav-link.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; } .hamburger span { width: 25px; height: 3px; background: var(--text-dark); border-radius: 3px; transition: all 0.3s ease; } /* Hero Section */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 80px; overflow: hidden; } .hero-background { position: absolute; top: 0; left: 0; right: 0; height: 90%; background: linear-gradient(135deg, black 0%, dimgray 100%); /*background-color:black;*/ z-index: -1; border-radius: 0 0 50% 50% / 0 0 5% 5%; } .hero-content { text-align: center; /* padding: 4rem 0; margin-top:3.5rem;*/ } .hero-title { font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; margin-top:3.5rem; color: white; } .gradient-text { /*background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));*/ background-color:white; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.9375em; /*color: var(--text-light);*/ color: black; max-width: 1200px; margin: 0 auto 2.5rem; margin-top: 3.5rem; line-height: 1.45; font-weight: 400; background-color:white; } .hero-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem; flex-wrap: wrap; } .btn-l { padding: 0.875rem 2rem; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block; font-size: 1rem; } .btn-primary-large { /*background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));*/ background-color: var(--white); color: black; box-shadow: var(--shadow-md); } .btn-primary-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); } .btn-secondary-large { background-color: var(--white); color: black; /*border: 2px solid var(--primary-color);*/ } .btn-secondary-large:hover { background: var(--primary-color); color: var(--white); } .hero-stats { display: flex; justify-content: center; gap: 4rem; margin-top: 3rem; flex-wrap: wrap; } .stat-item { text-align: center; } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--primary-color); margin-bottom: 0.5rem; } .stat-label { font-size: 0.95rem; color: var(--text-light); font-weight: 500; } /* Features Section */ .features { /*padding: 6rem 0;*/ background: var(--white); } .section-header { text-align: center; margin-bottom: 4rem; } .section-title { font-size: 3.7rem; font-weight: 800; color: var(--text-dark); margin-bottom: 1rem; } .section-subtitle { font-size: 1.9375em; color: var(--text-light); max-width: 600px; margin: 0 auto; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } .feature-card { background: var(--white); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--gray-200); transition: all 0.3s ease; cursor: pointer; } .feature-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--primary-light); } .feature-icon { width: 64px; height: 64px; background: linear-gradient(135deg, black 0%, dimgray 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.75rem; /*background-color:black;*/ color: var(--white); } .feature-card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-dark); } .feature-card p { color: var(--text-light); line-height: 1.7; font-size: 1rem; } /* Why Choose TPSoft Section */ .why-choose-section { margin: 4rem 0; padding: 3rem 0; } .section-title-bar { background: linear-gradient(135deg, black 0%, dimgray 100%); /*background-color:black;*/ color: white; border-radius: 12px; padding: 1.25rem 2rem; margin-bottom: 2.5rem; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .section-title-bar-text { font-size: 3.6rem; font-weight: 700; color: white; margin: 0; /*text-transform: uppercase;*/ letter-spacing: 0.5px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .why-choose-content { display: flex; gap: 3rem; align-items: flex-start; position: relative; } .why-choose-list { list-style: none; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; gap: 1.25rem; } .why-choose-list li { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.9375em; color: black; line-height: 1.6; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .arrow-icon { color: black; font-weight: 700; font-size: 1.3rem; flex-shrink: 0; margin-top: -0.2rem; } .why-choose-badge { flex-shrink: 0; position: relative; } .badge-outer { width: 180px; height: 180px; border-radius: 50%; /*background: #1e4d72;*/ background-color:black; display: flex; align-items: center; justify-content: center; padding: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .badge-inner { width: 100%; height: 100%; border-radius: 50%; /*background: #4a90c2;*/ background-color: dimgray; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; } .badge-text { font-size: 0.85rem; font-weight: 600; color: white; margin-bottom: 8px; line-height: 1.3; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .badge-check { font-size: 1.5rem; color: white; font-weight: 700; } /* About Stats Section */ .about-stats-section { margin: 4rem 0; padding: 3rem 0; } .stats-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; } .stat-card-green { background: white; border:1px solid black; border-radius: 12px; padding: 3rem 1.5rem; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .stat-card-green:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); background: white; border: 1px solid black; .stat-number, .stat-description { color:black; } } .stat-number { font-size: 3rem; font-weight: 700; color: black; margin-bottom: 2rem; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1; } .stat-description { font-size: 1.9375em; color: black; line-height: 1.5; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Responsive Design */ @media (max-width: 1024px) { .why-choose-content { flex-direction: column; gap: 2rem; } .why-choose-badge { align-self: center; } .stats-cards-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .section-title-bar-text { font-size: 1.25rem; } .why-choose-list li { font-size: 1rem; } .stats-cards-grid { grid-template-columns: 1fr; } .stat-number { font-size: 2.5rem; } } /* Credit Consumption Section */ .credit-consumption-section { margin: 4rem 0; padding: 3rem 0; } .credit-consumption-header { text-align: center; margin-bottom: 2rem; } .credit-consumption-title { font-size: 1.75rem; font-weight: 700; color: #2c3e50; font-style: italic; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; } .credit-consumption-intro { margin-bottom: 2.5rem; /*max-width: 900px; margin-left: auto; margin-right: auto;*/ } .credit-consumption-intro p { font-size: 1.9375em; color: #2c3e50; line-height: 1.6; text-align: left; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; } .credit-consumption-table-wrapper { margin-bottom: 2.5rem; /*max-width: 1000px; margin-left: auto; margin-right: auto;*/ } .credit-consumption-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .credit-consumption-table thead { background: white; } .credit-consumption-table th { padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #2c3e50; font-size: 1.6rem; border-bottom: 2px solid #e0e0e0; border-right: 1px solid #e0e0e0; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .credit-consumption-table th:last-child { border-right: none; } .credit-consumption-table tbody tr { border-bottom: 1px solid #e0e0e0; } .credit-consumption-table tbody tr:last-child { border-bottom: none; } .credit-consumption-table td { padding: 1rem 1.5rem; text-align: left; color: #2c3e50; font-size: 1.4rem; line-height: 1.5; border-right: 1px solid #e0e0e0; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .credit-consumption-table td:last-child { border-right: none; } .credit-consumption-table tbody tr:hover { background: #f5f5f5; } /* INFO Box */ .credit-info-box { position: relative; background: linear-gradient(135deg, black 0%, dimgray 100%); border-radius: 16px; padding: 2.5rem; /*max-width: 1000px;*/ margin: 0 auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .info-badge { position: absolute; top: -15px; left: 30px; background-color:white; color: black; padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 700; font-size: 2.0rem; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .info-badge-green { position: absolute; top: -15px; left: 30px; background-color: #abc612; color: white; padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 700; font-size: 2.0rem; text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .info-content { margin-top: 1rem; h3 { color: white; display: flex; text-align: center; justify-content: center; margin-top: 60px; font-size:2.5rem; } .resource-link { color: white; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; transition: gap 0.3s ease; display: flex; text-align: center; justify-content: center; margin:0 auto; } } .info-content p { margin: 0.75rem 0; color: white; font-size: 2.75rem; line-height: 1.0; text-align: center; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .info-content p strong { font-weight: 700; color: white; /*font-style:italic;*/ font-size:2.9rem; } .info-line-2 { font-size: 1.5rem !important; font-weight: 700 !important; margin: 1rem 0 !important; } .info-separator { border: none; border-top: 1px solid #b0bec5; margin: 1.5rem 0; } /* Responsive pentru Credit Consumption */ @media (max-width: 768px) { .credit-consumption-title { font-size: 1.5rem; } .credit-consumption-table { font-size: 0.85rem; } .credit-consumption-table th, .credit-consumption-table td { padding: 0.75rem 1rem; } .credit-info-box { padding: 2rem 1.5rem; } .info-badge { left: 20px; padding: 0.4rem 1rem; font-size: 0.8rem; } .info-line-2 { font-size: 1.25rem !important; } } /* Testimonials Carousel Section */ .testimonials-section { padding: 6rem 0; background: white; position: relative; } .testimonials-carousel-wrapper { position: relative; /* max-width: 900px; margin: 0 auto; padding: 0 60px;*/ } .testimonials-carousel { overflow: hidden; position: relative; border-radius: 16px; } .testimonials-track { display: flex; transition: transform 0.5s ease-in-out; will-change: transform; } .testimonial-card { width: 100%; flex-shrink: 0; background: linear-gradient(135deg, black 0%, dimgray 100%); border-radius: 16px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin-right: 0; } /* Container pentru title cu quote-mark - centrat pe orizontala */ .testimonial-card { display: flex; flex-direction: column; } .testimonial-title-wrapper { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; text-align: center; } .testimonial-title { font-size: 0.60em; color: white; font-weight: 600; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; display: inline-block; vertical-align:middle; margin-bottom:30px; } /* Când testimonial-title este direct în card (fără wrapper) */ .testimonial-card > .testimonial-title { text-align: center; margin-bottom: 1.5rem; display: block; } /* Când quote-mark este în afara speech bubble, alături de title */ .testimonial-card > .quote-mark { font-size: 3rem; line-height: 1; color: #ffd700; font-family: 'Georgia', serif; font-weight: 700; display: inline-block; vertical-align: middle; margin-right: 0.5rem; } /* Centrare pentru container cu quote-mark și title */ .testimonial-card { text-align: center; } .testimonial-card > .quote-mark + .testimonial-title, .testimonial-card > .quote-mark + span.testimonial-title { display: inline-block; vertical-align: middle; text-align: left; } .testimonial-speech-bubble { background: white; border-radius: 16px; padding: 2rem 2.5rem; position: relative; margin-bottom: 1.5rem; min-height: 200px; } /* Triunghiul care iese din speech bubble */ .testimonial-speech-bubble::after { content: ''; position: absolute; bottom: -15px; left: 60px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid white; } .quote-mark { position: absolute; top: -20px; left: 20px; font-size: 120px; font-weight: 700; color: #ffd700; font-family: 'Georgia', serif; line-height: 1; z-index: 1; opacity: 0.9; } /* Când quote-mark este în afara speech bubble */ .testimonial-card > .quote-mark { position: relative; top: 0; left: 0; display: inline-block; margin-right: 0.5rem; vertical-align: top; } .testimonial-text { position: relative; z-index: 2; color: black; font-size: 1.3rem; line-height: 1.7; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .testimonial-text p { margin-bottom: 1rem; color: black; text-align:left; } .testimonial-text p:last-child { margin-bottom: 0; } .testimonial-author { padding-left: 0.5rem; margin-top: 20px; } .author-name { font-size: 1.9375em; font-weight: 700; color: white; margin-bottom: 0.25rem; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .author-title { font-size: 1.25rem; color: white; font-weight: 500; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Butoane carusel */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: white; border: 2px solid black; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .carousel-btn:hover { background: black; color: white; transform: translateY(-50%) scale(1.1); } .carousel-btn i { font-size: 1.25rem; color: black; transition: color 0.3s ease; } .carousel-btn:hover i { color: white; } .carousel-btn-prev { left: -60px; } .carousel-btn-next { right: -60px; } /* Indicatori */ .carousel-indicators { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .indicator { width: 12px; height: 12px; border-radius: 50%; background: #d0d0d0; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; } .indicator:hover { background: black; transform: scale(1.2); } .indicator.active { background: black; width: 32px; border-radius: 6px; } /* Responsive pentru testimonials */ @media (max-width: 768px) { .testimonials-carousel-wrapper { padding: 0 50px; } .testimonial-card { padding: 2rem 1.5rem; } .testimonial-speech-bubble { padding: 1.5rem 2rem; } .quote-mark { font-size: 80px; top: -15px; left: 15px; } .testimonial-speech-bubble::after { left: 40px; border-left-width: 15px; border-right-width: 15px; border-top-width: 15px; } .carousel-btn { width: 40px; height: 40px; } .carousel-btn i { font-size: 1rem; } } /* Solutions Section */ .solutions { padding: 6rem 0; background: var(--gray-50); } .solutions-content { display: flex; flex-direction: column; gap: 5rem; } .solution-item { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .solution-item-reverse { direction: rtl; } .solution-item-reverse > * { direction: ltr; } .solution-visual { position: relative; } .solution-illustration { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, black 0%, dimgray 100%); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 8rem; color: rgba(255, 255, 255, 0.3); } .solution-text h3 { font-size: 2rem; font-weight: 800; margin-bottom: 1.25rem; color: var(--text-dark); } .solution-text p { font-size: 1.1rem; color: var(--text-light); margin-bottom: 2rem; line-height: 1.7; } .solution-features { list-style: none; display: grid; gap: 0.875rem; } .solution-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--text-dark); font-weight: 500; } .solution-features i { color: var(--primary-color); font-size: 1rem; } /* Stats Section */ .stats-section { padding: 5rem 0; background: linear-gradient(135deg, black 0%, dimgray 100%); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; } .stat-card { display: flex; align-items: center; gap: 1.5rem; background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .stat-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .stat-icon { width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--white); flex-shrink: 0; } .stat-info h4 { font-size: 1.5rem; font-weight: 700; color: var(--white); margin-bottom: 0.25rem; } .stat-info p { font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); line-height: 1.4; } /* Resources Section */ .resources { /*padding: 6rem 0;*/ background: var(--white); } .resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; } .resource-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid black; transition: all 0.3s ease; cursor: pointer; } .resource-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .resource-image { position: relative; height: 200px; background: linear-gradient(135deg, black 0%, dimgray 100%); } .resource-category { position: absolute; top: 1rem; left: 1rem; background: var(--white); color: var(--primary-color); padding: 0.5rem 1rem; border-radius: 6px; font-weight: 600; font-size: 0.85rem; } .resource-content { padding: 2rem; } .resource-content h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.875rem; color: var(--text-dark); line-height: 1.4; } .resource-content p { color: var(--text-light); margin-bottom: 1.25rem; line-height: 1.6; font-size:1.4rem; } .resource-link { color: var(--primary-color); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; font-size : 1.4rem; transition: gap 0.3s ease; } .resource-link:hover { gap: 0.75rem; } /* CTA Section */ .cta-section { margin-top: 6rem !important; background: linear-gradient(135deg, black 0%, dimgray 100%); } .cta-content { text-align: center; color: var(--white); } .cta-content h2 { font-size: 3.7rem; font-weight: 800; margin-bottom: 1.5rem; } .cta-content p { font-size: 1.9375em; margin-bottom: 2.5rem; opacity: 0.9; /*max-width: 700px;*/ margin-left: auto; margin-right: auto; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-white-large { background: var(--white); color: var(--text-dark); padding: 1rem 2.5rem; } .btn-white-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); } .btn-outline-large { background: transparent; color: var(--white); border: 2px solid var(--white); padding: 1rem 2.5rem; } .btn-outline-large:hover { background: var(--white); color: var(--text-dark); } /* Footer */ .footer { background: var(--gray-800); color: var(--white); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-section h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; } .footer-section ul { list-style: none; } .footer-section li { margin-bottom: 0.75rem; } .footer-section a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem; } .footer-section a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap; gap: 1rem; } .footer-bottom p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-social { display: flex; gap: 1rem; } .footer-social a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: all 0.3s ease; } .footer-social a:hover { background: var(--primary-color); transform: translateY(-3px); } /* Responsive Design */ @media (max-width: 1024px) { .hero-title { font-size: 3rem; } .solution-item { grid-template-columns: 1fr; gap: 2rem; } .solution-item-reverse { direction: ltr; } } @media (max-width: 768px) { .nav-menu { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--white); flex-direction: column; padding: 2rem; gap: 1.5rem; transition: left 0.3s ease; box-shadow: var(--shadow-lg); } .nav-menu.active { left: 0; } .hamburger { display: flex; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.1rem; } .hero-stats { gap: 2rem; } .section-title { font-size: 2rem; } .features-grid, .resources-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; gap: 1.5rem; } .cta-content h2 { font-size: 2rem; } .cta-content p { font-size: 1.1rem; } .footer-content { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .container { padding: 0 1rem; } .hero-title { font-size: 2rem; } .hero-buttons { flex-direction: column; width: 100%; } .btn { width: 100%; text-align: center; } .stat-number { font-size: 2rem; } .footer-content { grid-template-columns: 1fr; } } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-content, .feature-card, .resource-card, .stat-card { animation: fadeInUp 0.6s ease-out; } .contact { padding: 80px 0; background: var(--primary-white); } .contact-content { display: grid; grid-template-columns: 1fr; gap: 60px; } .contact-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .contact-card { background: var(--gray-100); padding: 30px; border-radius: var(--border-radius-lg); text-align: center; transition: all var(--transition-normal); } .contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .contact-card i { width: 50px; height: 50px; background: var(--primary-black); color: white; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; border-radius: var(--border-radius); margin: 0 auto 1rem; } .contact-card h4 { margin-bottom: 0.5rem; } .contact-card p { color: var(--gray-600); margin: 0; } /* Services Section */ .services { /*padding: 80px 0;*/ background: var(--primary-white); } .section-header { text-align: center; margin-bottom: 60px; } .section-badge { display: inline-block; padding: 8px 16px; background: var(--gray-100); color: var(--primary-black); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--border-radius); /*margin-bottom: 1rem;*/ } .section-title { margin-bottom: 1rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; /*background: var(--primary-black);*/ border-radius: 2px; } .section-description { font-size: 1.1rem; color: var(--gray-600); /*max-width: 600px;*/ margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .service-card { background: var(--primary-white); padding: 40px; border-radius: var(--border-radius-lg); border: 1px solid black; transition: all var(--transition-normal); position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-black), var(--gray-600)); transform: translateX(-100%); transition: transform var(--transition-normal); } .service-card:hover::before { transform: translateX(0); } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-xl); border-color: var(--primary-black); } .service-card.featured { border-color: var(--primary-black); background: var(--gray-100); } .featured-badge { position: absolute; top: 20px; right: 20px; padding: 6px 12px; background: var(--primary-black); color: white; font-size: 12px; font-weight: 700; border-radius: var(--border-radius); } .service-icon { width: 60px; height: 60px; background: var(--primary-black); color: white; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; border-radius: var(--border-radius); margin-bottom: 1.5rem; transition: all var(--transition-normal); } .service-card:hover .service-icon { transform: scale(1.1) rotate(5deg); } .service-card h3 { margin-bottom: 1rem; } .service-features { list-style: none; margin: 1.5rem 0; } .service-features li { padding: 0.5rem 0; color: var(--gray-600); display: flex; align-items: center; gap: 0.5rem; } .service-features i { color: var(--primary-black); font-size: 0.8rem; } .service-link { color: var(--primary-black); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; transition: gap var(--transition-fast); } .service-link:hover { gap: 1rem; }