/* Minification failed. Returning unminified contents. (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (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 '-' (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 '-' (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 '-' (88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (110,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family' (111,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-normal' (112,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (126,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4xl' (131,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (132,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (139,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-hero' (140,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (144,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-energy' (145,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (150,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-trust' (151,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (155,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-cta' (156,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (163,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated' (169,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (207,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (208,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (208,36): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (209,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (211,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (212,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (213,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (234,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (235,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (258,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (258,35): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (266,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (280,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (281,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (282,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (290,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (292,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (336,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (351,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (352,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (360,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (361,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (366,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (367,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (368,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (369,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (375,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (379,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (383,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (384,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-relaxed' (385,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (392,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (396,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (402,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (421,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (421,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (422,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl' (424,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (425,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (427,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (453,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (454,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (455,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (460,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary-hover' (461,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (470,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (471,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (479,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (480,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (488,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (495,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (502,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (503,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (504,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-secondary' (513,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-secondary-hover' (514,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (519,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (519,35): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (520,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (524,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (525,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (536,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (537,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (538,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (543,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-extra-bold' (544,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (549,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (550,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (551,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (552,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (555,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (559,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (560,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (565,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (575,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (576,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (577,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (577,35): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (578,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (579,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (580,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (584,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (585,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (587,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (588,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs' (589,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (604,19): run-time error CSS1039: Token not allowed after unary operator: '-z-base' (666,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated' (673,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (673,36): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (682,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-6xl' (683,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-extra-bold' (684,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (685,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight' (689,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (693,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-text' (700,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (701,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (702,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (703,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-normal' (710,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (719,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (724,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (725,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (729,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (738,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (742,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-5xl' (743,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (744,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (748,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl' (749,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (750,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (754,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (755,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (758,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-loose' (763,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (771,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (788,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow' (797,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (798,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-loose' (799,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (800,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (806,22): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (811,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (812,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (813,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (814,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (818,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (819,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (825,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (826,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (832,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (836,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (841,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (850,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (856,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (857,32): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (858,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (860,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (876,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (897,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (901,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (905,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (909,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal' (913,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (917,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (922,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (927,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (937,22): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (941,22): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (945,22): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (949,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (953,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (957,25): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (961,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (965,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (969,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (977,23): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (981,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (985,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (989,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (993,26): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (997,26): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1001,26): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1005,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1081,6): run-time error CSS1030: Expected identifier, found ' ' (1082,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1083,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1084,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1088,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1094,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1106,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1115,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1120,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1120,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1135,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1136,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1137,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1141,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1141,39): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1145,28): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1146,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (1150,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1151,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1156,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1160,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1160,39): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1172,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1172,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1183,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (1188,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (1225,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1229,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-text' (1236,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-energy' (1241,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-trust' (1246,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-energy' (1251,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1256,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-trust' (1261,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1266,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1271,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-cta' (1272,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1282,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1283,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (1284,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4xl' (1289,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-energy' (1290,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1291,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4xl' (1300,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-hero' (1305,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (1306,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1307,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1307,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1308,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl' (1310,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (1311,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1313,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (1314,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1321,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary-hover' (1322,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1328,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1329,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1329,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1330,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl' (1332,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1333,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1334,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1340,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1341,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1348,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1349,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1349,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1350,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl' (1352,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1355,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1362,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1368,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1368,35): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1369,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (1376,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1384,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1392,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1411,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1415,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (1422,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated' (1429,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1429,36): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1438,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-6xl' (1439,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-extra-bold' (1440,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1441,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight' (1445,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1449,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-text' (1456,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (1457,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1458,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (1459,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-normal' (1466,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1475,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (1480,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (1481,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (1485,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1492,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1509,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow' (1520,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1521,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (1522,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1526,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1527,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-loose' (1528,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1529,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (1535,22): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1540,21): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (1541,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1542,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (1546,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (1547,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (1553,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1554,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1560,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1564,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1569,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1575,25): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1580,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1586,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (1587,32): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1588,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1590,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1596,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1601,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1605,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1609,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1613,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1618,22): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (1619,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1621,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1622,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs' (1623,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1627,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (1628,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1629,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1630,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1631,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (1632,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1635,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1649,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1654,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1655,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1656,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (1664,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl' (1665,29): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1669,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (1702,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1716,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (1717,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (1718,19): run-time error CSS1039: Token not allowed after unary operator: '-space-4xl' (1718,38): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1725,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1726,25): run-time error CSS1039: Token not allowed after unary operator: '-space-4xl' (1732,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1736,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1737,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (1738,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1739,22): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1740,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1741,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (1751,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1755,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (1757,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (1758,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1759,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (1764,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1777,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1778,32): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1787,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1788,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1799,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1806,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1807,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (1809,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1809,35): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1810,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1811,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1817,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1820,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1826,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (1831,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (1832,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1874,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1879,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1880,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1881,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (1885,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (1886,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (1887,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-relaxed' (1892,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (1897,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1899,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (1900,28): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1904,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light' (1926,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1926,42): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1931,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (1932,29): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (1936,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1940,23): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1948,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (1955,23): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1955,42): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1960,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1961,29): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1966,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (1970,29): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1986,29): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (1987,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (1991,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (1996,23): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2002,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2006,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2010,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (2021,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2040,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2056,15): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2064,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (2072,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2073,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2073,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2075,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2078,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2106,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2108,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (2116,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2117,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-pale' (2119,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (2124,25): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2129,25): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-dark' (2138,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light' (2143,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2144,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-pale' (2145,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2150,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2155,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-dark' (2160,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2161,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2162,25): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (2166,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2166,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2176,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2187,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2187,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2191,39): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2194,30): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-pale' (2199,39): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2200,30): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-pale' (2213,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2234,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl' (2236,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2240,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2241,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (2242,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (2243,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2247,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (2248,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2249,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight' (2254,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2258,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2262,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs' (2268,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2269,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2269,35): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2275,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2276,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (2281,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2286,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-light' (2297,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2298,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2304,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2304,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2308,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2312,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2316,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs' (2335,23): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2335,39): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2339,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2343,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2359,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2360,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2360,35): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2362,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2364,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2390,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2395,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2396,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2397,19): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (2398,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (2399,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2400,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2424,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2427,36): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2432,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2433,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (2446,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2447,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (2448,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (2449,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2454,15): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2455,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight' (2460,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2468,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2469,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2470,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-relaxed' (2474,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2474,52): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2481,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2489,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2493,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2494,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (2509,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2518,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (2522,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2527,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2527,35): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2531,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2532,29): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2536,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2540,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2541,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2541,55): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2546,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3xl' (2546,36): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (2550,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2551,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2555,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl' (2559,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2560,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-3xl' (2560,56): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2597,22): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2598,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2599,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2600,25): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2602,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2606,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2610,28): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2611,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-trust' (2616,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2621,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2622,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (2623,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (2624,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2630,28): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2631,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2637,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2638,27): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-normal' (2639,21): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (2640,36): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2644,26): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-pale' (2655,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-slow' (2663,21): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2663,37): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2663,53): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2664,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2665,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2666,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-relaxed' (2667,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2667,47): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2667,69): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2677,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2677,39): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2678,29): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2682,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2683,29): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2687,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2691,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2692,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2692,55): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2696,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2697,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2701,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2701,41): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2701,57): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2702,33): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2702,51): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2702,73): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2709,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2713,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2713,39): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2717,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2718,29): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2719,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2723,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2727,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (2728,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2728,55): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2732,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2736,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2739,19): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2744,23): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2745,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2749,25): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2749,41): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2749,57): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2750,33): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (2750,51): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2750,73): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2760,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (2800,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (2810,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2818,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2819,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (2820,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2824,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2825,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-extra-bold' (2827,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-primary' (2829,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated' (2835,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2839,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xl' (2840,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-bold' (2841,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-primary' (2842,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (2843,25): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (2844,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-tight' (2848,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2849,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-secondary' (2850,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-relaxed' (2860,18): run-time error CSS1039: Token not allowed after unary operator: '-space-2xl' (2861,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2862,19): run-time error CSS1039: Token not allowed after unary operator: '-z-base' (2872,26): run-time error CSS1039: Token not allowed after unary operator: '-gradient-primary' (2879,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (2880,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-secondary' (2884,22): run-time error CSS1039: Token not allowed after unary operator: '-gradient-secondary' (2890,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2895,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2899,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text-light' (2912,15): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2918,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2924,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2928,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2932,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (2940,15): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2947,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2964,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-2xl' (2965,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2966,23): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated' (2976,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (2980,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (2986,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2995,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (2999,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (3005,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (3011,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (3022,19): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (3026,19): run-time error CSS1039: Token not allowed after unary operator: '-space-md' (3032,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (3038,22): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (3042,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (3043,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs' (3047,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-xs' (3056,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-light' (3089,15): run-time error CSS1039: Token not allowed after unary operator: '-space-sm' (3104,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (3105,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (3112,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-lg' (3113,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-medium' (3114,19): run-time error CSS1039: Token not allowed after unary operator: '-space-xl' (3115,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (3116,25): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (3121,32): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (3126,32): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (3131,26): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3196,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (3197,23): run-time error CSS1039: Token not allowed after unary operator: '-space-lg' (3204,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-sm' (3224,32): run-time error CSS1039: Token not allowed after unary operator: '-color-white' */ /* ============================================ PARTYLABZ CSS ARCHITECTURE Complete file with optimized color system ============================================ */ /* ============================================ 1. CSS CUSTOM PROPERTIES (VARIABLES) ============================================ */ :root { --font-family: "Nunito", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* PRIMARY BRAND COLORS - Orange (Energy & Fun) */ --color-primary: #F29A31; /* Your logo orange - main brand color */ --color-primary-dark: #CC5200; /* Your current button color - for hover states */ --color-primary-light: #FFB85C; /* Lighter orange for backgrounds */ --color-primary-pale: #FFF4E6; /* Very light orange for subtle backgrounds */ /* SECONDARY COLORS - Blue (Trust & Reliability) */ --color-secondary: #4A90E2; /* Professional blue for trust elements */ --color-secondary-dark: #357ABD; /* Darker blue for hover states */ --color-secondary-light: #7BB3F0; /* Lighter blue for accents */ --color-secondary-pale: #F0F7FF; /* Very light blue for backgrounds */ /* ACCENT COLORS */ --color-accent: #F093FB; /* Pink accent for highlights */ /* NEUTRAL COLORS */ --color-text-primary: #2C3E50; /* Dark blue-gray for main text */ --color-text-secondary: #7F8C8D; /* Medium gray for secondary text */ --color-text-light: rgba(255, 255, 255, 0.9); /* Light text for dark backgrounds */ --color-white: #FFFFFF; --color-light-gray: #F8F9FA; --color-border: #E9ECEF; --color-success: #28A745; /* Green for success states */ --color-warning: #FFC107; /* Yellow for warnings */ --color-danger: #DC3545; /* Red for errors */ /* GRADIENT COMBINATIONS */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); --gradient-warm: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-text: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); /* SECTION BACKGROUNDS */ --bg-hero: var(--color-white); --bg-trust: var(--color-secondary-pale); /* Testimonials, features */ --bg-energy: var(--gradient-warm); /* Event types, process */ --bg-cta: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); /* Spacing */ --space-xs: 5px; --space-sm: 10px; --space-md: 15px; --space-lg: 20px; --space-xl: 30px; --space-2xl: 40px; --space-3xl: 60px; --space-4xl: 80px; /* Typography */ --font-size-xs: 0.7em; --font-size-sm: 0.8em; --font-size-base: 1em; --font-size-lg: 1.1em; --font-size-xl: 1.2em; --font-size-2xl: 1.4em; --font-size-3xl: 1.8em; --font-size-4xl: 2.2em; --font-size-5xl: 2.5em; --font-size-6xl: 3em; --font-weight-normal: 400; --font-weight-medium: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --line-height-tight: 1.2; --line-height-normal: 1.4; --line-height-relaxed: 1.5; --line-height-loose: 1.6; /* Border radius */ --radius-sm: 10px; --radius-md: 15px; --radius-lg: 25px; --radius-xl: 50px; --radius-full: 50%; /* Shadows */ --shadow-sm: 0 5px 15px rgba(0,0,0,0.08); --shadow-md: 0 10px 30px rgba(0,0,0,0.1); --shadow-lg: 0 10px 30px rgba(242, 154, 49, 0.15); --shadow-trust: 0 10px 30px rgba(74, 144, 226, 0.15); --shadow-primary: 0 4px 15px rgba(242, 154, 49, 0.3); --shadow-primary-hover: 0 6px 20px rgba(242, 154, 49, 0.4); --shadow-secondary: 0 4px 15px rgba(74, 144, 226, 0.3); --shadow-secondary-hover: 0 6px 20px rgba(74, 144, 226, 0.4); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Z-index scale */ --z-base: 1; --z-elevated: 2; --z-dropdown: 10; --z-modal: 100; } /* ============================================ 2. BASE STYLES & RESET ============================================ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); line-height: var(--line-height-normal); color: var(--color-text-primary); margin: 0; padding: 0; } .text-left { text-align: left; } /* ============================================ 3. LAYOUT COMPONENTS ============================================ */ /* Section Layouts */ .section { padding: var(--space-4xl) 0; position: relative; } .section--white { background: var(--color-white); color: var(--color-text-primary); } .section--hero { min-height: 100vh; display: flex; align-items: center; background: var(--bg-hero); color: var(--color-text-primary); } .section--primary { background: var(--bg-energy); color: var(--color-white); overflow: hidden; } .section--trust { background: var(--bg-trust); color: var(--color-text-primary); } .section--cta { background: var(--bg-cta); color: var(--color-white); overflow: hidden; } /* Container */ .container { position: relative; z-index: var(--z-elevated); } /* Grid Systems */ .grid { display: grid; gap: var(--space-xl); margin: 0 auto; } .grid--2-cols { grid-template-columns: repeat(2, 1fr); max-width: 800px; } .grid--3-cols { grid-template-columns: repeat(3, 1fr); max-width: 1000px; } .grid--4-cols { grid-template-columns: repeat(4, 1fr); max-width: 1200px; } .grid--auto-fit { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .grid--auto-fit-w150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .grid--auto-fit-w250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* ============================================ 4. COMPONENT LIBRARY ============================================ */ /* Cards */ .card { background: var(--color-white); padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-sm); border: 2px solid var(--color-border); transition: all var(--transition-normal); position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(242, 154, 49, 0.2), transparent); transition: left 0.6s ease; } .card:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: var(--shadow-lg); } .card:hover::before { left: 100%; } .card--glass { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } .card--glass::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); } .card--glass:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); } .card--padding-sm { padding: var(--space-sm) var(--space-sm); } .card--padding-fw { width: 100%; } .card--featured { border-color: var(--color-primary); transform: scale(1.05); } .card--no-bg, .card--no-bg:hover { background: none !important; box-shadow: none !important; transform: unset !important; } .card--testimonial { height: auto; min-height: 250px; padding: var(--space-xl); border: 2px solid var(--color-secondary-light); background: var(--color-white); } .card--testimonial::before { background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.2), transparent); } .card--testimonial:hover { border-color: var(--color-secondary); transform: translateY(-3px); box-shadow: var(--shadow-trust); } /* Borderless card variant */ .card--borderless { border: none !important; box-shadow: none !important; background: transparent; } .card--borderless::before { display: none; } .card--borderless:hover { border: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transform: translateY(-3px); } /* Borderless glass variant */ .card--glass.card--borderless { background: rgba(255, 255, 255, 0.1); border: none !important; backdrop-filter: blur(10px); box-shadow: none !important; } .card--glass.card--borderless::before { display: none; } .card--glass.card--borderless:hover { background: rgba(255, 255, 255, 0.15); border: none !important; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); transform: translateY(-3px); } /* Borderless with subtle shadow on hover only */ .card--borderless-hover-shadow { border: none !important; box-shadow: none !important; background: transparent; transition: all var(--transition-normal); } .card--borderless-hover-shadow::before { display: none; } .card--borderless-hover-shadow:hover { border: none !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); transform: translateY(-5px); } /* Trust section cards */ .section--trust .card { border: 2px solid var(--color-secondary-light); background: var(--color-white); } .section--trust .card::before { background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.2), transparent); } .section--trust .card:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-trust); } /* Card Content */ .card__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-md); color: var(--color-text-primary); position: relative; z-index: 1; } .card--glass .card__title { color: var(--color-white); } .card--darkbg .card__title { color: var(--color-white); } .card__text { margin-bottom: var(--space-lg); line-height: var(--line-height-relaxed); color: var(--color-text-secondary); flex-grow: 1; position: relative; z-index: 1; } .card--glass .card__text { color: var(--color-text-light); } .card--darkbg .card__text { color: var(--color-text-light); } /* Icons */ .icon { font-size: 3.5em; margin-bottom: var(--space-lg); display: block; line-height: normal; } .icon--sm { font-size: 2em; } .icon--lg { font-size: 2.5em; } /* ============================================ 5. BUTTON SYSTEM WITH STRATEGIC COLOR USE ============================================ */ .btn { display: inline-block; padding: var(--space-md) var(--space-xl); border-radius: var(--radius-xl); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); border: none; transition: all var(--transition-normal); cursor: pointer; text-align: center; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s ease; } .btn:hover::before { left: 100%; } /* Primary buttons - Orange (Action & Energy) */ .btn--primary, .btn--primary:active, .btn--primary:focus { background: var(--gradient-primary); color: var(--color-white); box-shadow: var(--shadow-primary); } .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-hover); color: var(--color-white); text-decoration: none; } /* Secondary buttons - Blue (Trust & Reliability) */ .btn--secondary, .btn--secondary:active, .btn--secondary:focus { background: transparent; color: var(--color-secondary); border: 2px solid var(--color-secondary); } .btn--secondary::before { background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.3), transparent); } .btn--secondary:hover { background: var(--color-secondary); color: var(--color-white); transform: translateY(-2px); text-decoration: none; } /* Ghost buttons for primary sections */ .btn--ghost { background: rgba(255, 255, 255, 0.2); color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.3); color: var(--color-white); transform: translateY(-2px); text-decoration: none; } /* Trust-focused buttons */ .btn--trust { background: var(--gradient-secondary); color: var(--color-white); box-shadow: var(--shadow-secondary); } .btn--trust::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); } .btn--trust:hover { transform: translateY(-2px); box-shadow: var(--shadow-secondary-hover); color: var(--color-white); text-decoration: none; } .btn--large { padding: var(--space-lg) var(--space-2xl); font-size: var(--font-size-xl); } .btn--xl { padding: var(--space-xl) 60px; font-size: var(--font-size-2xl); } /* Step Cards */ .step-card { position: relative; } .step-card__number { width: 50px; height: 50px; border-radius: var(--radius-full); background: var(--color-white); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.5em; font-weight: var(--font-weight-extra-bold); margin: 0 auto var(--space-lg) auto; } /* Badges */ .badge { padding: 8px var(--space-lg); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 1px; display: inline-block; margin-bottom: var(--space-lg); } .badge--primary { background: var(--gradient-primary); color: var(--color-white); } .badge--glass { background: rgba(255, 255, 255, 0.2); color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .badge--featured { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-white); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); } .badge--new { background: var(--color-accent); color: var(--color-white); padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ============================================ 6. DECORATIVE ELEMENTS ============================================ */ /* Floating Elements */ .floating-elements { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: var(--z-base); } .float-element { position: absolute; font-size: 2em; opacity: 0.15; animation: float 6s ease-in-out infinite; } .float-element:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; } .float-element:nth-child(2) { top: 25%; right: 15%; animation-delay: 1s; } .float-element:nth-child(3) { top: 45%; left: 20%; animation-delay: 2s; } .float-element:nth-child(4) { top: 65%; right: 25%; animation-delay: 3s; } .float-element:nth-child(5) { top: 75%; left: 15%; animation-delay: 4s; } .float-element:nth-child(6) { top: 35%; right: 10%; animation-delay: 5s; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } /* ============================================ 7. HERO SECTION ============================================ */ .hero { width: 100%; position: relative; z-index: var(--z-elevated); } .hero__content { text-align: center; max-width: 900px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg); } .hero__image { height: 200px; margin-bottom: 0; } .hero__title { font-size: var(--font-size-6xl); font-weight: var(--font-weight-extra-bold); margin-bottom: var(--space-lg); line-height: var(--line-height-tight); } .hero__brand { color: var(--color-primary); } .hero__highlight { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__subtitle { font-size: var(--font-size-2xl); margin-bottom: var(--space-xl); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .hero__actions { margin-bottom: 50px; display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; } .hero__scroll { text-align: center; } .hero__scroll-link { color: var(--color-text-secondary); text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); } .hero__scroll-link:hover { color: var(--color-primary); text-decoration: none; } /* ============================================ 8. SECTION HEADERS ============================================ */ .section-header { text-align: center; margin-bottom: var(--space-3xl); } .section-header__title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-lg); } .section-header__subtitle { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-md); } .section-header__text { font-size: var(--font-size-xl); color: var(--color-text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--line-height-loose); } .section--primary .section-header__text, .section--cta .section-header__text { color: var(--color-text-light); } /* ============================================ 9. TESTIMONIALS ============================================ */ .testimonials { max-width: 800px; margin: 0 auto var(--space-3xl) auto; position: relative; } .testimonials__slider { position: relative; height: 420px; overflow: hidden; } .testimonials__slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateX(50px); transition: all var(--transition-slow); } .testimonials__slide--active { opacity: 1; transform: translateX(0); } .testimonials__content p { font-size: var(--font-size-lg); line-height: var(--line-height-loose); margin-bottom: var(--space-lg); color: var(--color-text-primary); font-style: italic; } .testimonials__author { text-align: center; margin-top: var(--space-lg); } .testimonials__author-name { display: block; color: var(--color-text-primary); font-size: var(--font-size-lg); margin-bottom: var(--space-xs); font-weight: var(--font-weight-bold); } .testimonials__source { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .testimonials__nav { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); } .testimonials__dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: #ddd; border: none; cursor: pointer; transition: all var(--transition-normal); } .testimonials__dot--active, .testimonials__dot:hover { background: var(--color-secondary); transform: scale(1.2); } /* ============================================ 10. EXAMPLES SECTION ============================================ */ .examples__loading { text-align: center; padding: var(--space-2xl) 0; } .examples__spinner { width: 30px; height: 30px; border: 3px solid var(--color-border); border-top: 3px solid var(--color-secondary); border-radius: var(--radius-full); animation: spin 1s linear infinite; margin: 0 auto var(--space-md) auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .examples__masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-lg); } /* ============================================ 11. UTILITY CLASSES ============================================ */ /* Text utilities */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-text-secondary); } .text-white { color: var(--color-white); } .font-weight-normal { font-weight: var(--font-weight-normal); } .font-weight-medium { font-weight: var(--font-weight-medium); } .font-weight-bold { font-weight: var(--font-weight-bold); } /* Link utilities */ .link-white { color: var(--color-text-light); text-decoration: underline; } .link-white:hover { color: var(--color-white); text-decoration: none; } /* Spacing utilities */ .margin-0 { margin: 0; } .margin-top-sm { margin-top: var(--space-sm); } .margin-top-md { margin-top: var(--space-md); } .margin-top-lg { margin-top: var(--space-lg); } .margin-top-xl { margin-top: var(--space-xl); } .margin-top-3xl { margin-top: var(--space-3xl); } .margin-bottom-sm { margin-bottom: var(--space-sm); } .margin-bottom-md { margin-bottom: var(--space-md); } .margin-bottom-lg { margin-bottom: var(--space-lg); } .margin-bottom-xl { margin-bottom: var(--space-xl); } .padding-0 { padding: 0; } .padding-top-sm { padding-top: var(--space-sm); } .padding-top-md { padding-top: var(--space-md); } .padding-top-lg { padding-top: var(--space-lg); } .padding-top-xl { padding-top: var(--space-xl); } .padding-bottom-sm { padding-bottom: var(--space-sm); } .padding-bottom-md { padding-bottom: var(--space-md); } .padding-bottom-lg { padding-bottom: var(--space-lg); } .padding-bottom-xl { padding-bottom: var(--space-xl); } /* Display utilities */ .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-block { display: block; } .d-inline-block { display: inline-block; } .d-none { display: none; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .align-items-center { align-items: center; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } /* Position utilities */ .position-relative { position: relative; } .position-absolute { position: absolute; } /* ============================================ 12. FEATURE LINKS ============================================ */ a.feature-link { text-decoration: none; color: inherit; } a.feature-link:hover { text-decoration: none; color: inherit; } .grid a.feature-link.aligned { display: flex; justify-content: space-between; } /* ============================================ 13. RESPONSIVE DESIGN ============================================ */ /* Tablet styles */ @media (max-width: 768px) { : root { --font-size-6xl: 2.2em; --font-size-5xl: 2em; --font-size-2xl: 1.2em; } .section { padding: var(--space-3xl) 0; } .hero__actions { flex-direction: column; align-items: center; gap: var(--space-md); } .btn--large { width: 100%; max-width: 300px; } .grid--2-cols, .grid--3-cols, .grid--4-cols { grid-template-columns: 1fr; gap: var(--space-lg); } .card--featured { transform: none; } .examples__masonry { grid-template-columns: 1fr; gap: var(--space-lg); } .card { min-height: auto; padding: var(--space-xl) var(--space-lg); } .float-element { font-size: 1.5em; } .testimonials__slider { height: 350px; } } /* Mobile styles */ @media (max-width: 480px) { :root { --font-size-6xl: 1.8em; --font-size-5xl: 1.6em; --font-size-2xl: 1em; } .hero__content { padding: var(--space-xl) var(--space-md); } .btn { padding: 12px var(--space-lg); font-size: var(--font-size-base); } .btn--large { padding: 18px var(--space-xl); font-size: var(--font-size-lg); } .btn--xl { padding: 18px 35px; font-size: var(--font-size-lg); } .card { padding: var(--space-lg) var(--space-md); } .float-element { font-size: 1.2em; } .testimonials__slider { height: 400px; } .card--testimonial { padding: var(--space-lg) var(--space-lg); } } /* ============================================ 14. ACCESSIBILITY & PERFORMANCE ============================================ */ /* Focus styles */ .btn:focus, .testimonials__dot:focus { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; } .card:focus { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, .float-element, .testimonials__slide { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .floating-elements { display: none; } } /* High contrast support */ @media (prefers-contrast: high) { .hero__title, .section-header__title { text-shadow: 2px 2px 4px rgba(0,0,0,0.8); } .card { border: 2px solid #333; } } /* ============================================ 15. SECTION-SPECIFIC IMPLEMENTATIONS ============================================ */ /* Hero Section - Professional with orange accent */ .section--hero .hero__brand { color: var(--color-primary); } .section--hero .hero__highlight { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Event Types Section - Energy and fun */ .section--event-types { background: var(--bg-energy); } /* Examples Section - Clean and trustworthy */ .section--examples { background: var(--bg-trust); } /* Process Section - Energy and excitement */ .section--process { background: var(--bg-energy); } /* Pricing Section - Trust and value */ .section--pricing { background: var(--color-white); } /* Features Section - Professional capability */ .section--features { background: var(--bg-trust); } /* Testimonials Section - Maximum trust */ .section--testimonials { background: var(--color-white); } /* Ambassador Section - Clean and professional */ .section--ambassador { background: var(--color-white); } /* Final CTA Section - Strong call to action */ .section--final-cta { background: var(--bg-cta); color: var(--color-white); overflow: hidden; } /* ============================================ 16. LEGACY CLASS COMPATIBILITY ============================================ */ /* Maintain compatibility with existing Bootstrap classes */ .section-white { background: var(--color-white); color: var(--color-text-primary); padding: var(--space-4xl) 0; position: relative; } .section-blue { background: var(--bg-energy); color: var(--color-white); padding: var(--space-4xl) 0; position: relative; overflow: hidden; } .hero-section { min-height: 100vh; display: flex; align-items: center; background: var(--bg-hero); } /* Legacy button classes */ .btn-rounded-primary { background: var(--gradient-primary); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-xl); text-decoration: none; font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); border: none; box-shadow: var(--shadow-primary); transition: all var(--transition-normal); display: inline-block; cursor: pointer; } .btn-rounded-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-hover); color: var(--color-white); text-decoration: none; } .btn-rounded-secondary { background: transparent; color: var(--color-secondary); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-xl); text-decoration: none; font-weight: var(--font-weight-medium); border: 2px solid var(--color-secondary); transition: all var(--transition-normal); display: inline-block; cursor: pointer; } .btn-rounded-secondary:hover { background: var(--color-secondary); color: var(--color-white); transform: translateY(-2px); text-decoration: none; } .btn-rounded-white { background: rgba(255, 255, 255, 0.2); color: var(--color-white); padding: var(--space-md) var(--space-xl); border-radius: var(--radius-xl); text-decoration: none; font-weight: var(--font-weight-medium); border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); transition: all var(--transition-normal); display: inline-block; cursor: pointer; } .btn-rounded-white:hover { background: rgba(255, 255, 255, 0.3); color: var(--color-white); transform: translateY(-2px); text-decoration: none; } .btn-large { padding: var(--space-lg) var(--space-2xl); font-size: var(--font-size-xl); } /* Legacy grid classes */ .grid-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 800px; margin: 0 auto; } .grid-2-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); max-width: 800px; margin: 0 auto; } .grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); max-width: 1000px; margin: 0 auto; } /* Legacy card classes */ .card-dark { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } .card-dark:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); } .card-dark h3, .card-dark h4 { color: var(--color-white); } .card-dark p { color: var(--color-text-light); } /* Legacy hero classes */ .hero-container { width: 100%; position: relative; z-index: var(--z-elevated); } .hero-content { text-align: center; max-width: 800px; margin: 0 auto; padding: var(--space-2xl) var(--space-lg); } .main-img { height: 200px; margin-bottom: 0; } .hero-title { font-size: var(--font-size-6xl); font-weight: var(--font-weight-extra-bold); margin-bottom: var(--space-lg); line-height: var(--line-height-tight); } .brand-name { color: var(--color-primary); } .text-highlight { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: var(--font-size-2xl); margin-bottom: var(--space-xl); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .hero-actions { margin-bottom: 50px; display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; } .scroll-prompt { text-align: center; } .scroll-link { color: var(--color-text-secondary); text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); } .scroll-link:hover { color: var(--color-primary); text-decoration: none; } /* Legacy testimonials classes */ .testimonials-container { max-width: 800px; margin: 0 auto var(--space-3xl) auto; position: relative; } .testimonials-slider { position: relative; height: 350px; overflow: hidden; } .testimonial-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateX(50px); transition: all var(--transition-slow); } .testimonial-slide.active { opacity: 1; transform: translateX(0); } .testimonial-card { height: auto; min-height: 250px; padding: var(--space-xl); border: 2px solid var(--color-secondary-light); background: var(--color-white); } .testimonial-content p { font-size: var(--font-size-lg); line-height: var(--line-height-loose); margin-bottom: var(--space-lg); color: var(--color-text-primary); font-style: italic; } .testimonial-author { text-align: center; margin-top: var(--space-lg); } .testimonial-author strong { display: block; color: var(--color-text-primary); font-size: var(--font-size-lg); margin-bottom: var(--space-xs); } .testimonial-source { color: var(--color-text-secondary); font-size: var(--font-size-sm); } .testimonials-nav { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xl); } .nav-dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: #ddd; border: none; cursor: pointer; transition: all var(--transition-normal); } .nav-dot.active, .nav-dot:hover { background: var(--color-secondary); transform: scale(1.2); } /* Legacy examples classes */ .examples-grid { margin-bottom: var(--space-2xl); } .examples-loading { text-align: center; padding: var(--space-2xl) 0; } .loading-spinner { width: 30px; height: 30px; border: 3px solid var(--color-border); border-top: 3px solid var(--color-secondary); border-radius: var(--radius-full); animation: spin 1s linear infinite; margin: 0 auto var(--space-md) auto; } .examples-masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-lg); } /* Legacy spacing classes */ .padding-top-20 { padding-top: var(--space-lg); } .margin-bottom-30 { margin-bottom: var(--space-xl); } .inter-row-lg { margin-top: var(--space-xl); } .feature-row { margin-top: var(--space-xl); } /* Legacy badge classes */ .label-new { background: var(--color-accent); color: var(--color-white); padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .badge-primary { background: var(--gradient-primary); color: var(--color-white); padding: 8px var(--space-lg); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 1px; display: inline-block; margin-bottom: var(--space-lg); } /* Legacy section classes */ .final-cta { max-width: 800px; margin: 0 auto; text-align: center; } .final-actions { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .feedback-section { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-border); } .feedback-section .section-header { margin-bottom: 0; } .feedback-section h3 { font-size: var(--font-size-3xl); margin-bottom: var(--space-md); } .feedback-section p { font-size: var(--font-size-base); } /* ============================================ 17. PERFORMANCE OPTIMIZATIONS ============================================ */ /* GPU acceleration for animations */ .card, .btn, .float-element { transform: translateZ(0); will-change: transform; } /* Optimize font loading */ .hero__title, .section-header__title { font-display: swap; } /* ============================================ 18. PRINT STYLES ============================================ */ @media print { .floating-elements, .btn, .hero__scroll { display: none !important; } .section { page-break-inside: avoid; padding: var(--space-lg) 0; } .card { border: 1px solid #000; box-shadow: none; } } /* ============================================ FOOTER STYLES ============================================ */ .footer { background: var(--color-text-primary); color: var(--color-text-light); padding: var(--space-4xl) 0 var(--space-xl) 0; } /* Main Footer Content */ .footer__main { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); margin-bottom: var(--space-4xl); } .footer__section { display: flex; flex-direction: column; gap: var(--space-lg); } .footer__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-white); margin: 0 0 var(--space-md) 0; border-bottom: 2px solid var(--color-primary); padding-bottom: var(--space-xs); display: inline-block; } .footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .footer__link { color: var(--color-text-light); text-decoration: none; font-size: var(--font-size-base); transition: all var(--transition-normal); padding: var(--space-xs) 0; position: relative; } .footer__link:hover { color: var(--color-primary); text-decoration: none; transform: translateX(5px); } .footer__link::before { content: ''; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--color-primary); transition: width var(--transition-normal); } .footer__link:hover::before { width: 10px; } /* Social Media Section */ .footer__social { margin-bottom: var(--space-3xl); padding: var(--space-xl) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer__social-links { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: var(--space-xl); flex-wrap: wrap; } .footer__social-link { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text-light); text-decoration: none; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); transition: all var(--transition-normal); border: 2px solid transparent; background: rgba(255, 255, 255, 0.05); } .footer__social-link:hover { color: var(--color-white); text-decoration: none; transform: translateY(-3px); border-color: var(--color-primary); background: rgba(242, 154, 49, 0.1); box-shadow: 0 5px 15px rgba(242, 154, 49, 0.2); } .footer__social-icon { font-size: var(--font-size-xl); display: block; } .footer__social-text { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } /* Specific social platform colors on hover */ .footer__social-link--twitter:hover { border-color: #1DA1F2; background: rgba(29, 161, 242, 0.1); box-shadow: 0 5px 15px rgba(29, 161, 242, 0.2); } .footer__social-link--facebook:hover { border-color: #1877F2; background: rgba(24, 119, 242, 0.1); box-shadow: 0 5px 15px rgba(24, 119, 242, 0.2); } .footer__social-link--instagram:hover { border-color: #E4405F; background: rgba(228, 64, 95, 0.1); box-shadow: 0 5px 15px rgba(228, 64, 95, 0.2); } .footer__social-link--pinterest:hover { border-color: #BD081C; background: rgba(189, 8, 28, 0.1); box-shadow: 0 5px 15px rgba(189, 8, 28, 0.2); } .footer__social-link--linkedin:hover { border-color: #0A66C2; background: rgba(10, 102, 194, 0.1); box-shadow: 0 5px 15px rgba(10, 102, 194, 0.2); } /* Copyright Section */ .footer__bottom { text-align: center; } .footer__copyright { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; } .footer__copyright-text { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-white); } .footer__made-with { font-size: var(--font-size-base); color: var(--color-text-light); line-height: var(--line-height-relaxed); } .footer__heart { color: #e74c3c; font-size: var(--font-size-lg); animation: heartbeat 2s ease-in-out infinite; } .footer__company-link { color: var(--color-primary); text-decoration: none; font-weight: var(--font-weight-medium); transition: color var(--transition-normal); } .footer__company-link:hover { color: var(--color-primary-light); text-decoration: none; } /* Heartbeat animation */ @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* Tablet styles */ @media (max-width: 768px) { .footer { padding: var(--space-3xl) 0 var(--space-lg) 0; } .footer__main { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); margin-bottom: var(--space-3xl); } .footer__social-links { gap: var(--space-md); } .footer__social-link { padding: var(--space-sm); } .footer__social-text { display: none; } .footer__social-icon { font-size: var(--font-size-2xl); } } /* Mobile styles */ @media (max-width: 480px) { .footer { padding: var(--space-2xl) 0 var(--space-lg) 0; } .footer__main { grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-2xl); } .footer__section { text-align: center; gap: var(--space-md); } .footer__title { margin: 0 auto var(--space-sm) auto; } .footer__links { align-items: center; } .footer__link::before { display: none; } .footer__link:hover { transform: none; } .footer__social { margin-bottom: var(--space-2xl); padding: var(--space-lg) 0; } .footer__social-links { gap: var(--space-sm); justify-content: center; } .footer__social-link { padding: var(--space-sm); min-width: 50px; justify-content: center; } .footer__copyright { gap: var(--space-xs); } .footer__copyright-text { font-size: var(--font-size-base); } .footer__made-with { font-size: var(--font-size-sm); } } /* ============================================ ACCESSIBILITY ============================================ */ .footer__link:focus, .footer__social-link:focus, .footer__company-link:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .footer__heart { animation: none; } .footer__link::before, .footer__social-link { transition: none; } } /* High contrast support */ @media (prefers-contrast: high) { .footer { border-top: 3px solid var(--color-primary); } .footer__link, .footer__social-link { border: 1px solid rgba(255, 255, 255, 0.3); } } /* ============================================ MODERN NAV PILLS COMPONENT ============================================ */ /* Container for the navigation pills */ .nav-pills-modern { display: flex; gap: var(--space-md); /*background: var(--color-white); padding: var(--space-md); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 2px solid var(--color-border);*/ flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-3xl); } /* Individual pill/tab button */ .nav-pill-modern { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg) var(--space-xl); border: 2px solid transparent; border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: all var(--transition-normal); text-align: center; min-width: 180px; position: relative; overflow: hidden; text-decoration: none; color: inherit; } /* Hover animation effect */ .nav-pill-modern::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent); transition: left 0.6s ease; } .nav-pill-modern:hover::before { left: 100%; } .nav-pill-modern:hover, .nav-pill-modern:focus, .nav-pill-modern:active { border-color: var(--color-secondary-light); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; } /* Active state */ .nav-pill-modern--active, .nav-pill-modern.active { border-color: var(--color-secondary); background: var(--color-secondary-pale); transform: translateY(-2px); box-shadow: var(--shadow-trust); } .nav-pill-modern--active .nav-pill-modern__text, .nav-pill-modern.active .nav-pill-modern__text { color: var(--color-secondary); } .nav-pill-modern--active .nav-pill-modern__subtitle, .nav-pill-modern.active .nav-pill-modern__subtitle { color: var(--color-secondary-dark); } /* Primary variant with orange colors */ .nav-pills-modern--primary .nav-pill-modern::before { background: linear-gradient(90deg, transparent, rgba(242, 154, 49, 0.1), transparent); } .nav-pills-modern--primary .nav-pill-modern:hover { border-color: var(--color-primary-light); } .nav-pills-modern--primary .nav-pill-modern--active, .nav-pills-modern--primary .nav-pill-modern.active { border-color: var(--color-primary); background: var(--color-primary-pale); box-shadow: var(--shadow-lg); } .nav-pills-modern--primary .nav-pill-modern--active .nav-pill-modern__text, .nav-pills-modern--primary .nav-pill-modern.active .nav-pill-modern__text { color: var(--color-primary); } .nav-pills-modern--primary .nav-pill-modern--active .nav-pill-modern__subtitle, .nav-pills-modern--primary .nav-pill-modern.active .nav-pill-modern__subtitle { color: var(--color-primary-dark); } /* Compact variant */ .nav-pills-modern--compact { gap: var(--space-sm); padding: var(--space-sm); margin-bottom: var(--space-2xl); } .nav-pills-modern--compact .nav-pill-modern { padding: var(--space-md) var(--space-lg); min-width: 120px; } /* Horizontal variant (minimal style) */ .nav-pills-modern--horizontal { background: transparent; padding: 0; box-shadow: none; border: none; border-bottom: 2px solid var(--color-border); border-radius: 0; gap: 0; } .nav-pills-modern--horizontal .nav-pill-modern { border-radius: 0; border: none; border-bottom: 3px solid transparent; background: transparent; min-width: auto; padding: var(--space-md) var(--space-lg); } .nav-pills-modern--horizontal .nav-pill-modern:hover { border-bottom-color: var(--color-secondary-light); transform: none; box-shadow: none; background: var(--color-secondary-pale); } .nav-pills-modern--horizontal .nav-pill-modern--active, .nav-pills-modern--horizontal .nav-pill-modern.active { border-bottom-color: var(--color-secondary); background: var(--color-secondary-pale); transform: none; box-shadow: none; } /* Glass variant for use on colored backgrounds */ .nav-pills-modern--glass { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); } .nav-pills-modern--glass .nav-pill-modern { color: var(--color-white); } .nav-pills-modern--glass .nav-pill-modern::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); } .nav-pills-modern--glass .nav-pill-modern:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); } .nav-pills-modern--glass .nav-pill-modern--active, .nav-pills-modern--glass .nav-pill-modern.active { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); } /* Content elements within pills */ .nav-pill-modern__icon { font-size: var(--font-size-3xl); display: block; margin-bottom: var(--space-xs); } .nav-pill-modern__text { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-xs); } .nav-pill-modern__subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-tight); } /* Compact variant content sizing */ .nav-pills-modern--compact .nav-pill-modern__icon { font-size: var(--font-size-2xl); } .nav-pills-modern--compact .nav-pill-modern__text { font-size: var(--font-size-base); } .nav-pills-modern--compact .nav-pill-modern__subtitle { font-size: var(--font-size-xs); } /* Simple variant - just text, no icons/subtitles */ .nav-pill-modern--simple { flex-direction: row; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); min-width: auto; } .nav-pill-modern--simple .nav-pill-modern__text { margin-bottom: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); } /* Focus styles for accessibility */ .nav-pill-modern:focus { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; } .nav-pills-modern--primary .nav-pill-modern:focus { outline-color: var(--color-primary-light); } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* Tablet styles */ @media (max-width: 768px) { .nav-pills-modern { flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); } .nav-pill-modern { min-width: auto; width: 100%; padding: var(--space-md) var(--space-lg); } .nav-pill-modern__icon { font-size: var(--font-size-2xl); } .nav-pill-modern__text { font-size: var(--font-size-base); } .nav-pill-modern__subtitle { font-size: var(--font-size-xs); } /* Keep horizontal variant horizontal on tablets */ .nav-pills-modern--horizontal { flex-direction: row; overflow-x: auto; padding: 0; } .nav-pills-modern--horizontal .nav-pill-modern { flex-shrink: 0; width: auto; } } /* Mobile styles */ @media (max-width: 480px) { .nav-pill-modern { padding: var(--space-sm) var(--space-md); } .nav-pill-modern__icon { font-size: var(--font-size-xl); } .nav-pills-modern--compact .nav-pill-modern__icon { font-size: var(--font-size-lg); } } /* ============================================ INTEGRATION WITH BOOTSTRAP TABS ============================================ */ /* Ensure compatibility with Bootstrap's tab functionality */ .nav-pills-modern [data-toggle="tab"], .nav-pills-modern [data-toggle="pill"] { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-lg) var(--space-xl); border: 2px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); text-align: center; min-width: 180px; position: relative; overflow: hidden; text-decoration: none; color: inherit; } .nav-pills-modern [data-toggle="tab"]:hover, .nav-pills-modern [data-toggle="pill"]:hover { text-decoration: none; color: inherit; } /* ============================================ UNIVERSAL FAQ CLASSES - Enhanced Design ============================================ */ /* FAQ Container */ .faq-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-lg); } /* FAQ Item - Enhanced Card Design */ .faq-item { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-2xl); box-shadow: var(--shadow-sm); border: 2px solid var(--color-border); transition: all var(--transition-normal); position: relative; overflow: hidden; cursor: pointer; } .faq-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08), transparent); transition: left 0.6s ease; } .faq-item::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--color-secondary); transform: scaleY(0); transform-origin: bottom; transition: transform var(--transition-normal); } .faq-item:hover { transform: translateY(-3px); border-color: var(--color-secondary-light); box-shadow: var(--shadow-trust); } .faq-item:hover::before { left: 100%; } .faq-item:hover::after { transform: scaleY(1); } /* FAQ Question */ .faq-question { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-lg); position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--space-md); line-height: var(--line-height-tight); } .faq-question::before { content: '❓'; font-size: var(--font-size-2xl); flex-shrink: 0; opacity: 0.8; margin-top: 2px; } /* FAQ Answer */ .faq-answer { font-size: var(--font-size-lg); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0; position: relative; z-index: 1; padding-left: calc(var(--font-size-2xl) + var(--space-md)); } /* FAQ Variants */ /* FAQ item for trust sections (blue theme) */ .section--trust .faq-item { border: 2px solid var(--color-secondary-light); } .section--trust .faq-item::before { background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.08), transparent); } .section--trust .faq-item::after { background: var(--color-secondary); } .section--trust .faq-item:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-trust); } /* FAQ item for primary sections (orange theme) */ .section--primary .faq-item { background: rgba(255, 255, 255, 0.95); border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); } .section--primary .faq-item::before { background: linear-gradient(90deg, transparent, rgba(242, 154, 49, 0.15), transparent); } .section--primary .faq-item::after { background: var(--color-primary); } .section--primary .faq-item:hover { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 10px 30px rgba(242, 154, 49, 0.2); } .section--primary .faq-question { color: var(--color-text-primary); } .section--primary .faq-answer { color: var(--color-text-secondary); } /* Compact FAQ variant */ .faq-item--compact { padding: var(--space-xl) var(--space-lg); } .faq-item--compact .faq-question { font-size: var(--font-size-lg); margin-bottom: var(--space-md); } .faq-item--compact .faq-question::before { font-size: var(--font-size-xl); } .faq-item--compact .faq-answer { font-size: var(--font-size-base); padding-left: calc(var(--font-size-xl) + var(--space-md)); } /* Large FAQ variant */ .faq-item--large { padding: var(--space-3xl) var(--space-2xl); } .faq-item--large .faq-question { font-size: var(--font-size-2xl); margin-bottom: var(--space-xl); } .faq-item--large .faq-question::before { font-size: var(--font-size-3xl); } .faq-item--large .faq-answer { font-size: var(--font-size-xl); padding-left: calc(var(--font-size-3xl) + var(--space-md)); } /* FAQ with custom icons */ .faq-item--custom-icon .faq-question::before { content: attr(data-icon); } /* Borderless FAQ variant */ .faq-item--borderless { border: none !important; box-shadow: none !important; background: transparent; } .faq-item--borderless::after { display: none; } .faq-item--borderless:hover { border: none !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.8); } /* ============================================ ACCORDION-STYLE FAQ (OPTIONAL) ============================================ */ /* Collapsible FAQ container */ .faq-accordion { max-width: 1000px; margin: 0 auto; } /* Accordion FAQ item */ .faq-accordion-item { background: var(--color-white); border: 2px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-sm); overflow: hidden; transition: all var(--transition-normal); } .faq-accordion-item:hover { border-color: var(--color-secondary-light); } .faq-accordion-item.active { border-color: var(--color-secondary); box-shadow: var(--shadow-trust); } /* Accordion question/header */ .faq-accordion-header { padding: var(--space-xl); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); transition: all var(--transition-normal); position: relative; } .faq-accordion-header::before { content: '❓'; margin-right: var(--space-md); font-size: var(--font-size-xl); opacity: 0.8; } .faq-accordion-header::after { content: '+'; font-size: var(--font-size-2xl); font-weight: var(--font-weight-normal); color: var(--color-secondary); transition: transform var(--transition-normal); } .faq-accordion-header:hover { background: var(--color-secondary-pale); } .faq-accordion-item.active .faq-accordion-header::after { transform: rotate(45deg); } /* Accordion content */ .faq-accordion-content { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .faq-accordion-item.active .faq-accordion-content { max-height: 500px; /* Adjust based on content */ } .faq-accordion-answer { padding: 0 var(--space-xl) var(--space-xl) var(--space-xl); font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); padding-left: calc(var(--space-xl) + var(--font-size-xl) + var(--space-md)); } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* Tablet styles */ @media (max-width: 768px) { .faq-item { padding: var(--space-xl) var(--space-lg); margin-bottom: var(--space-md); } .faq-question { font-size: var(--font-size-lg); margin-bottom: var(--space-md); } .faq-question::before { font-size: var(--font-size-xl); } .faq-answer { font-size: var(--font-size-base); padding-left: calc(var(--font-size-xl) + var(--space-md)); } .faq-accordion-header { padding: var(--space-lg); font-size: var(--font-size-base); } .faq-accordion-answer { padding: 0 var(--space-lg) var(--space-lg) var(--space-lg); padding-left: calc(var(--space-lg) + var(--font-size-xl) + var(--space-md)); } } /* Mobile styles */ @media (max-width: 480px) { .faq-container { gap: var(--space-md); } .faq-item { padding: var(--space-lg) var(--space-md); } .faq-question { font-size: var(--font-size-base); margin-bottom: var(--space-sm); gap: var(--space-sm); } .faq-question::before { font-size: var(--font-size-lg); } .faq-answer { font-size: var(--font-size-sm); padding-left: calc(var(--font-size-lg) + var(--space-sm)); } .faq-item--compact { padding: var(--space-md); } .faq-accordion-header { padding: var(--space-md); flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .faq-accordion-header::after { position: absolute; top: var(--space-md); right: var(--space-md); } .faq-accordion-answer { padding: 0 var(--space-md) var(--space-md) var(--space-md); padding-left: calc(var(--space-md) + var(--font-size-lg) + var(--space-sm)); } } /* ============================================ ACCESSIBILITY & FOCUS STATES ============================================ */ .faq-item:focus, .faq-accordion-header:focus { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; } /* High contrast support */ @media (prefers-contrast: high) { .faq-item, .faq-accordion-item { border: 2px solid #333; } .faq-question, .faq-accordion-header { color: #000; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .faq-item, .faq-accordion-item, .faq-accordion-content, .faq-accordion-header::after { transition: none !important; } .faq-item::before { display: none; } } /* ============================================ PROCESS TIMELINE COMPONENT ============================================ */ /* Main timeline container */ .process-timeline { display: flex; flex-direction: column; gap: var(--space-2xl); max-width: 800px; margin: 0 auto; position: relative; } /* Individual process step */ .process-step { display: flex; align-items: flex-start; gap: var(--space-xl); position: relative; } /* Step number circle */ .process-step__number { width: 60px; height: 60px; border-radius: var(--radius-full); background: var(--gradient-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); font-weight: var(--font-weight-extra-bold); flex-shrink: 0; box-shadow: var(--shadow-primary); position: relative; z-index: var(--z-elevated); } /* Step content */ .process-step__content { flex: 1; padding-top: var(--space-xs); } .process-step__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-top: var(--space-xs); margin-bottom: var(--space-sm); line-height: var(--line-height-tight); } .process-step__description { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0; } /* Connector line between steps */ .process-step__connector { position: absolute; left: 29px; /* Center of the number circle */ top: 60px; /* Bottom of current step number */ width: 2px; height: var(--space-2xl); background: var(--color-border); z-index: var(--z-base); } .process-step__connector::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: var(--gradient-primary); } /* Variants for different sections */ /* Trust section variant (blue theme) */ .section--trust .process-step__number { background: var(--gradient-secondary); box-shadow: var(--shadow-secondary); } .section--trust .process-step__connector::after { background: var(--gradient-secondary); } /* Primary section variant (for colored backgrounds) */ .section--primary .process-step__number { background: rgba(255, 255, 255, 0.9); color: var(--color-primary); border: 2px solid rgba(255, 255, 255, 0.3); } .section--primary .process-step__title { color: var(--color-white); } .section--primary .process-step__description { color: var(--color-text-light); } .section--primary .process-step__connector { background: rgba(255, 255, 255, 0.3); } .section--primary .process-step__connector::after { background: rgba(255, 255, 255, 0.6); } /* Compact variant */ .process-timeline--compact { gap: var(--space-xl); } .process-timeline--compact .process-step__number { width: 45px; height: 45px; font-size: var(--font-size-lg); } .process-timeline--compact .process-step__connector { left: 22px; top: 45px; height: var(--space-xl); } .process-timeline--compact .process-step__title { font-size: var(--font-size-lg); } .process-timeline--compact .process-step__description { font-size: var(--font-size-sm); } /* Horizontal variant for wider screens */ .process-timeline--horizontal { flex-direction: row; justify-content: space-between; max-width: 1200px; gap: var(--space-lg); } .process-timeline--horizontal .process-step { flex-direction: column; text-align: center; flex: 1; gap: var(--space-lg); } .process-timeline--horizontal .process-step__content { padding-top: 0; } .process-timeline--horizontal .process-step__connector { display: none; } /* Add connectors between horizontal steps */ .process-timeline--horizontal .process-step:not(:last-child)::after { content: '→'; position: absolute; top: 30px; right: -25px; font-size: var(--font-size-2xl); color: var(--color-primary); z-index: var(--z-elevated); } /* ============================================ RESPONSIVE DESIGN ============================================ */ /* Tablet styles */ @media (max-width: 768px) { .process-timeline { gap: var(--space-xl); } .process-step { gap: var(--space-lg); } .process-step__number { width: 50px; height: 50px; font-size: var(--font-size-lg); } .process-step__connector { left: 24px; top: 50px; } .process-step__title { font-size: var(--font-size-lg); } .process-step__description { font-size: var(--font-size-sm); } /* Force vertical layout on tablets */ .process-timeline--horizontal { flex-direction: column; gap: var(--space-xl); } .process-timeline--horizontal .process-step { flex-direction: row; text-align: left; gap: var(--space-lg); } .process-timeline--horizontal .process-step:not(:last-child)::after { display: none; } } /* Mobile styles */ @media (max-width: 480px) { .process-timeline { gap: var(--space-lg); } .process-step { gap: var(--space-md); } .process-step__number { width: 40px; height: 40px; font-size: var(--font-size-base); } .process-step__connector { left: 19px; top: 40px; height: var(--space-lg); } .process-step__title { font-size: var(--font-size-base); margin-bottom: var(--space-xs); } .process-step__description { font-size: var(--font-size-xs); } } /* ============================================ ACCESSIBILITY ============================================ */ .process-step:focus-within .process-step__number { outline: 3px solid var(--color-secondary-light); outline-offset: 2px; } /* High contrast support */ @media (prefers-contrast: high) { .process-step__connector { background: #333; } .process-step__number { border: 2px solid #333; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .process-step__number, .process-step__connector { transition: none !important; } } /* ============================================ LOADING AND ANIMATION CLASSES ============================================ */ /* Button with loader functionality */ .btn-with-loader { position: relative; display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 180px; justify-content: center; } .btn-loader { display: inline-flex; align-items: center; } /* Loading spinner */ .loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid var(--color-white); border-radius: var(--radius-full); animation: spin 1s linear infinite; display: inline-block; } /* Status message styling */ .status-message { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); padding: var(--space-xl); border-radius: var(--radius-md); margin-bottom: var(--space-lg); } .status-message.text-success { background: rgba(40, 167, 69, 0.1); border: 2px solid var(--color-success); } .status-message.text-danger { background: rgba(220, 53, 69, 0.1); border: 2px solid var(--color-danger); } /* Animation classes */ .animated-element { transition: all var(--transition-normal); } .slide-in { opacity: 1; transform: translateY(0); animation: slideInUp 0.3s ease-out forwards; } .slide-out { opacity: 0; transform: translateY(-20px); animation: slideOutUp 0.3s ease-in forwards; } /* Keyframe animations */ @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideOutUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Disabled button state enhancement */ .btn:disabled, .btn[disabled] { opacity: 0.7; cursor: not-allowed; pointer-events: none; } /* Responsive adjustments */ @media (max-width: 768px) { .btn-with-loader { min-width: 150px; } .status-message { font-size: var(--font-size-base); padding: var(--space-lg); } } @media (max-width: 480px) { .btn-with-loader { min-width: 120px; font-size: var(--font-size-sm); } .loading-spinner { width: 14px; height: 14px; } } /* Accessibility support */ @media (prefers-reduced-motion: reduce) { .animated-element, .slide-in, .slide-out { animation: none !important; transition: none !important; } .loading-spinner { animation: none !important; border: 2px solid var(--color-white); border-top: 2px solid transparent; } }