/* Minification failed. Returning unminified contents. (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 '-' (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 '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,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 '-' (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 '-' (34,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 '-' (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 '-' (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 '-' (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 '-' (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 '-' (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 '-' (81,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (84,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (85,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (97,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading' (100,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (104,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (106,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (110,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (129,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (129,72): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (139,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (140,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (163,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (164,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (164,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (165,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (170,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (171,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (175,46): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (175,70): run-time error CSS1039: Token not allowed after unary operator: '-primary' (176,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (189,45): run-time error CSS1039: Token not allowed after unary operator: '-primary' (189,64): run-time error CSS1039: Token not allowed after unary operator: '-accent' (191,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (223,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (242,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (246,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (250,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (254,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (264,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (269,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (271,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (275,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (276,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (284,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (291,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (295,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (296,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (315,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (324,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading' (327,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (333,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (363,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (364,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (365,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (380,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (395,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (396,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (397,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (399,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (417,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (422,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (423,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (428,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (451,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (466,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (502,26): run-time error CSS1039: Token not allowed after unary operator: '-white' (504,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (511,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (515,39): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (529,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (568,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (573,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (574,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (576,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl' (587,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (593,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (593,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (600,23): run-time error CSS1039: Token not allowed after unary operator: '-font-primary' (603,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (609,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (625,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (629,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (633,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (633,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (635,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (645,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (646,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (651,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (652,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (667,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading' (670,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (676,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (686,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (696,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (701,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (701,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (706,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (717,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (738,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (739,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (740,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (743,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (747,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (748,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (755,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (764,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (831,19): run-time error CSS1039: Token not allowed after unary operator: '-section-padding' (836,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (846,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (853,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (862,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (867,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (884,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (886,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (901,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (917,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (918,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (919,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (920,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (924,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (931,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (931,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (932,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (941,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (948,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (953,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (976,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (977,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (978,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (981,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (985,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (994,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1000,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1008,46): run-time error CSS1039: Token not allowed after unary operator: '-info' (1008,62): run-time error CSS1039: Token not allowed after unary operator: '-secondary-light' (1012,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1012,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (1017,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1024,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1034,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1035,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1047,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1048,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1049,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1054,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1058,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1059,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1060,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1076,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1087,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1091,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1092,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1095,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1097,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1101,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (1115,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1116,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1117,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1123,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1129,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1136,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1136,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1142,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1146,17): run-time error CSS1039: Token not allowed after unary operator: '-accent-light' (1181,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1182,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1184,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1190,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1199,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1209,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1219,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (1220,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1224,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1229,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1230,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1231,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1238,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1238,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (1239,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1248,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1254,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1274,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1274,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1299,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1320,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1321,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1323,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1328,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1332,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1333,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1339,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1341,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (1342,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1347,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1351,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (1352,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1369,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1370,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1392,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1397,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1403,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1421,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1435,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1439,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1441,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1445,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1453,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1466,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1481,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (1486,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1490,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1496,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1502,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1512,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1513,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1517,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1523,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1527,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1540,17): run-time error CSS1039: Token not allowed after unary operator: '-accent' (1549,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1578,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1587,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1592,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1607,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1608,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (1612,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1612,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1613,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1613,42): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1627,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1628,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1635,22): run-time error CSS1039: Token not allowed after unary operator: '-info' (1640,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1644,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1664,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1665,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1669,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (1686,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1691,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1697,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1697,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1702,46): run-time error CSS1039: Token not allowed after unary operator: '-success' (1707,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1712,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1716,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (1729,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1729,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (1770,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1783,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1793,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (1880,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1881,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1888,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (1894,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1902,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (1909,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (1921,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (1923,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1927,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1937,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (1960,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (1961,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1977,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1979,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-xl' (1984,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (1985,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (1994,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2001,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2001,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2008,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2034,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2045,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2046,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2047,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2049,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2053,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2074,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2075,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2076,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2080,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2082,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2167,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2174,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2175,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2320,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2320,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2344,23): run-time error CSS1039: Token not allowed after unary operator: '-font-heading' (2347,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2358,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-400' (2360,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2364,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2368,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2372,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2379,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2384,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2389,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2390,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2391,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2393,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2398,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2403,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2403,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2409,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2409,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2413,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2432,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2433,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2443,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (2449,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2455,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2456,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2459,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2460,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (2465,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2471,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2483,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2492,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2493,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2501,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2511,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2512,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2513,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2514,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2518,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2525,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2527,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (2528,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2537,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2538,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2540,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2544,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2548,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2560,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2561,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2571,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2571,65): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark' (2572,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2579,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2583,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2583,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2584,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2589,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2594,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2595,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2599,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2600,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2604,46): run-time error CSS1039: Token not allowed after unary operator: '-success' (2605,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2616,22): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2617,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2627,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2631,27): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2636,35): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2642,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2643,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2647,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2651,31): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2655,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2660,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2661,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2667,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2672,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-300' (2673,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2678,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2683,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2684,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2685,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2689,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2690,24): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2691,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-800' (2702,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2703,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2708,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (2709,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2710,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2714,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2715,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2722,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2722,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (2723,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2732,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2742,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2752,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (2758,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (2759,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2763,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2764,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2768,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2769,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2774,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2775,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2778,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2779,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2784,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2791,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2793,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2795,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2801,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2807,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2814,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2824,32): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2831,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2837,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2849,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2859,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2871,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2882,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2889,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2890,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2892,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2893,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (2897,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (2901,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2901,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (2902,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (2928,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2937,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (2947,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2954,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (2978,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (2979,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (2984,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (2985,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2987,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-md' (2992,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (2996,35): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3004,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3015,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3028,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3035,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3040,46): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (3040,67): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (3046,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3063,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3064,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3066,22): run-time error CSS1039: Token not allowed after unary operator: '-transition-normal' (3071,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3078,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3078,65): run-time error CSS1039: Token not allowed after unary operator: '-accent' (3079,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (3088,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (3094,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-dark' (3100,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-600' (3109,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-100' (3110,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (3117,24): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3124,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3129,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3142,22): run-time error CSS1039: Token not allowed after unary operator: '-gray-200' (3143,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-full' (3152,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' (3157,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-700' (3162,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-500' */ /** * TTAK - Table Tennis Association of Kerala * Modern Sports Federation Theme * Version: 2.0.0 */ /* ========================================================================== CSS Custom Properties (Variables) ========================================================================== */ :root { /* Primary Colors - Sporty Orange/Red */ --primary: #E63946; --primary-dark: #C1121F; --primary-light: #FF6B6B; /* Secondary Colors - Deep Blue */ --secondary: #1D3557; --secondary-dark: #0D1B2A; --secondary-light: #457B9D; /* Accent Colors */ --accent: #F77F00; --accent-light: #FCBF49; --success: #2D6A4F; --info: #0077B6; /* Neutral Colors */ --white: #FFFFFF; --gray-100: #F8F9FA; --gray-200: #E9ECEF; --gray-300: #DEE2E6; --gray-400: #CED4DA; --gray-500: #ADB5BD; --gray-600: #6C757D; --gray-700: #495057; --gray-800: #343A40; --gray-900: #212529; --black: #000000; /* Typography */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Oswald', 'Inter', sans-serif; /* Spacing */ --section-padding: 80px 0; --container-padding: 0 15px; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15); /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 50%; } /* ========================================================================== Base Styles ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--gray-800); background-color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--secondary-dark); } a { color: var(--primary); text-decoration: none; transition: var(--transition-normal); } a:hover { color: var(--primary-dark); text-decoration: none; } img { max-width: 100%; height: auto; } /* ========================================================================== Preloader ========================================================================== */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%); display: flex; align-items: center; justify-content: center; } #preloader:before { content: ""; width: 50px; height: 50px; border: 4px solid var(--gray-300); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Back to Top Button ========================================================================== */ .back-to-top { position: fixed; visibility: hidden; opacity: 0; right: 20px; bottom: 20px; z-index: 996; width: 50px; height: 50px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--shadow-lg); transition: var(--transition-normal); } .back-to-top:hover { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); color: var(--white); transform: translateY(-3px); } .back-to-top.active { visibility: visible; opacity: 1; } /* ========================================================================== Announcement Bar ========================================================================== */ #announcement-bar { background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); padding: 8px 0; color: var(--white); } #announcement-bar .announcement-content { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 500; } #announcement-bar .announcement-icon { animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ========================================================================== Top Bar ========================================================================== */ #topbar { background: var(--secondary-dark); padding: 10px 0; font-size: 14px; } #topbar .topbar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } #topbar .topbar-left { display: flex; align-items: center; } #topbar .topbar-contact { color: var(--gray-300); display: flex; align-items: center; gap: 8px; transition: var(--transition-normal); } #topbar .topbar-contact:hover { color: var(--white); } #topbar .topbar-contact i { color: var(--primary); } #topbar .topbar-right { display: flex; align-items: center; gap: 15px; } #topbar .login-btn { color: var(--white); display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); font-weight: 500; transition: var(--transition-normal); } #topbar .login-btn:hover { background: var(--primary); color: var(--white); } #topbar .login-btn i { font-size: 16px; } #topbar .divider { color: var(--gray-600); } /* ========================================================================== Header ========================================================================== */ #header { background: var(--white); position: sticky; top: 0; z-index: 997; box-shadow: var(--shadow-md); transition: var(--transition-normal); } #header .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; } #header .logo { display: flex; align-items: center; gap: 12px; } #header .logo img { height: 55px; width: auto; border-radius: var(--radius-sm); } #header .logo-text { display: flex; flex-direction: column; } #header .logo-main { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--secondary-dark); line-height: 1; } #header .logo-sub { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; } /* Navigation */ .navbar { padding: 0; } .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; gap: 5px; } .navbar>ul>li { position: relative; } .navbar a { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--gray-700); border-radius: var(--radius-sm); transition: var(--transition-normal); } .navbar a i:first-child { font-size: 16px; } .navbar a .toggle-icon { font-size: 10px; margin-left: 2px; } .navbar a:hover, .navbar .active, .navbar li:hover>a { color: var(--primary); background: rgba(230, 57, 70, 0.08); } /* Dropdown */ .navbar .dropdown ul { display: block; position: absolute; left: 0; top: calc(100% + 10px); margin: 0; padding: 12px 0; z-index: 99; opacity: 0; visibility: hidden; background: var(--white); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); min-width: 220px; transition: var(--transition-normal); transform: translateY(10px); } .navbar .dropdown:hover>ul { opacity: 1; visibility: visible; transform: translateY(0); } .navbar .dropdown ul li { position: relative; } .navbar .dropdown ul a { padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--gray-700); border-radius: 0; } .navbar .dropdown ul a:hover { background: var(--gray-100); color: var(--primary); } .navbar .dropdown ul a i { width: 20px; color: var(--primary); } /* Nested Dropdown */ .navbar .dropdown .dropdown ul { top: 0; left: 100%; max-height: 280px; overflow-y: auto; scrollbar-width: thin; } /* Align bottom items upward to prevent clipping */ .navbar .dropdown .mega-menu>li:nth-last-child(-n+3) ul { top: auto; bottom: 0; } .navbar .dropdown .dropdown ul::-webkit-scrollbar { width: 6px; } .navbar .dropdown .dropdown ul::-webkit-scrollbar-thumb { background-color: var(--gray-300); border-radius: 10px; } .navbar .dropdown .dropdown:hover>ul { opacity: 1; visibility: visible; } /* Mobile Navigation Toggle */ .mobile-nav-toggle { display: none; background: none; border: none; font-size: 32px; color: var(--secondary-dark); cursor: pointer; padding: 0; line-height: 0; transition: 0.5s; z-index: 9999; } @media (max-width: 991px) { .mobile-nav-toggle { display: block; } .navbar ul { display: none; } .navbar-mobile { position: fixed; overflow: hidden; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; } .navbar-mobile ul { display: block; position: absolute; top: 0; right: 0; width: 280px; height: 100%; padding: 60px 20px 20px; background: var(--white); overflow-y: auto; box-shadow: var(--shadow-xl); } .navbar-mobile .mobile-nav-toggle { position: absolute; top: 15px; right: 15px; color: var(--secondary-dark); } .navbar-mobile>ul>li { border-bottom: 1px solid var(--gray-200); } .navbar-mobile a { padding: 12px 0; } .navbar-mobile .dropdown ul { position: static; display: none; margin: 0; padding: 10px 0 10px 20px; opacity: 1; visibility: visible; background: var(--gray-100); box-shadow: none; transform: none; } .navbar-mobile .dropdown>.dropdown-active { display: block; } } /* ========================================================================== Hero Section ========================================================================== */ #hero { position: relative; width: 100%; min-height: 85vh; background: url("/Content/Image/bg4.jpg") center center; background-size: cover; display: flex; align-items: center; padding: 100px 0 60px; } #hero .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(29, 53, 87, 0.92) 0%, rgba(13, 27, 42, 0.85) 100%); } #hero .container { position: relative; z-index: 2; } #hero .hero-content { color: var(--white); } #hero .hero-badge { display: inline-block; background: var(--primary); color: var(--white); padding: 8px 20px; border-radius: var(--radius-xl); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; } #hero h1 { font-size: 56px; font-weight: 700; color: var(--white); margin-bottom: 10px; line-height: 1.1; } #hero h1 .text-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #hero h2 { font-family: var(--font-primary); font-size: 24px; font-weight: 400; color: var(--gray-300); margin-bottom: 20px; } #hero .hero-description { font-size: 18px; color: var(--gray-400); max-width: 500px; margin-bottom: 30px; } #hero .hero-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 40px; } #hero .btn-hero { padding: 14px 28px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); display: inline-flex; align-items: center; gap: 10px; transition: var(--transition-normal); } #hero .btn-hero.btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; color: var(--white); box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); } #hero .btn-hero.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5); } #hero .btn-hero.btn-outline-light { border: 2px solid var(--white); color: var(--white); background: transparent; } #hero .btn-hero.btn-outline-light:hover { background: var(--white); color: var(--secondary-dark); } /* Hero Stats */ #hero .hero-stats { display: flex; gap: 40px; } #hero .stat-item { text-align: center; } #hero .stat-number { display: block; font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--primary); line-height: 1; } #hero .stat-label { font-size: 14px; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1px; } /* Tournaments Widget */ .tournaments-widget { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); overflow: hidden; } .tournaments-widget.desk { display: block; } .tournaments-widget.mob { display: none; background: var(--secondary-dark); margin-top: -1px; } .tournaments-widget .widget-header { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); padding: 15px 20px; display: flex; align-items: center; gap: 10px; color: var(--white); } .tournaments-widget .widget-header i { font-size: 24px; } .tournaments-widget .widget-header h4 { font-size: 18px; font-weight: 600; margin: 0; color: var(--white); } .tournaments-widget .widget-body { padding: 15px 20px; max-height: 250px; overflow-y: auto; } .tournaments-widget .widget-footer { padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .tournaments-widget .btn-view-schedule { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; background: var(--primary); color: var(--white); border-radius: var(--radius-md); font-weight: 600; font-size: 14px; transition: var(--transition-normal); } .tournaments-widget .btn-view-schedule:hover { background: var(--primary-dark); color: var(--white); } /* Tournament items styling */ .tournaments_con { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: var(--white); } .tournaments_con:last-child { border-bottom: none; } .tournaments_l, .tournaments_r { color: var(--white); font-size: 13px; } @media (max-width: 991px) { #hero { min-height: auto; padding: 60px 0 40px; } #hero h1 { font-size: 36px; } #hero h2 { font-size: 18px; } #hero .hero-description { font-size: 15px; } #hero .hero-stats { gap: 25px; } #hero .stat-number { font-size: 32px; } .tournaments-widget.desk { display: none; } .tournaments-widget.mob { display: block; } } @media (max-width: 576px) { #hero h1 { font-size: 28px; } #hero .hero-buttons { flex-direction: column; } #hero .btn-hero { width: 100%; justify-content: center; } #hero .hero-stats { flex-wrap: wrap; gap: 20px; } #hero .stat-item { flex: 1 1 calc(50% - 10px); } } /* ========================================================================== Section Styles ========================================================================== */ section { padding: var(--section-padding); overflow: hidden; } .section-bg { background-color: var(--gray-100); } .section-header { text-align: center; margin-bottom: 50px; } .section-header.light .section-subtitle, .section-header.light .section-title { color: var(--white); } .section-subtitle { display: inline-block; font-size: 14px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .section-title { font-size: 40px; font-weight: 700; color: var(--secondary-dark); margin: 0; } .section-title span { color: var(--primary); } @media (max-width: 768px) { section { padding: 50px 0; } .section-title { font-size: 28px; } } /* ========================================================================== About Section ========================================================================== */ .about .about-carousel { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .about .carousel-inner img { width: 100%; height: 400px; object-fit: cover; } .about .about-content { padding-left: 30px; } .about .about-text { font-size: 16px; color: var(--gray-700); line-height: 1.8; margin-bottom: 30px; } .about .about-features { display: flex; flex-direction: column; gap: 20px; } .about .feature-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .about .feature-item:hover { box-shadow: var(--shadow-md); transform: translateX(5px); } .about .feature-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .about .feature-icon i { font-size: 24px; color: var(--white); } .about .feature-text h5 { font-size: 16px; font-weight: 600; margin: 0 0 3px; color: var(--secondary-dark); } .about .feature-text p { font-size: 13px; color: var(--gray-600); margin: 0; } @media (max-width: 991px) { .about .about-content { padding-left: 0; padding-top: 30px; } .about .carousel-inner img { height: 300px; } } /* ========================================================================== News & Tournaments Section ========================================================================== */ .news-tournaments { padding: 60px 0; } .info-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; height: 100%; transition: var(--transition-normal); } .info-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .info-card .card-header { display: flex; align-items: center; gap: 12px; padding: 20px 25px; border-bottom: 1px solid var(--gray-200); } .info-card .header-icon { width: 45px; height: 45px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .news-card .header-icon { background: linear-gradient(135deg, var(--info) 0%, var(--secondary-light) 100%); } .tournament-card .header-icon { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); } .info-card .header-icon i { font-size: 22px; color: var(--white); } .info-card .card-header h3 { font-size: 20px; font-weight: 600; margin: 0; color: var(--secondary-dark); } .info-card .card-body { padding: 20px 25px; min-height: 350px; } .info-card .card-footer { padding: 15px 25px; background: var(--gray-100); border-top: 1px solid var(--gray-200); } .ticker-controls { display: flex; justify-content: center; gap: 10px; } .ticker-btn { width: 35px; height: 35px; border: 1px solid var(--gray-300); background: var(--white); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-normal); } .ticker-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); } /* News Ticker Styling */ .nt-example1-container { height: 100%; } .nt-example1 { list-style: none; padding: 0; margin: 0; } .nt-example1 li { padding: 12px 0; border-bottom: 1px solid var(--gray-200); } .nt-example1 li:last-child { border-bottom: none; } /* ========================================================================== Achievers Section ========================================================================== */ .achievers-section { background: var(--gray-100); } .achievers-carousel .products_s { background: var(--white); border-radius: var(--radius-lg); padding: 25px; margin: 10px; box-shadow: var(--shadow-md); text-align: center; transition: var(--transition-normal); } .achievers-carousel .products_s:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .achievers-carousel .player_image { width: 120px; height: 120px; margin: 0 auto 15px; } .achievers-carousel .player_image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); border: 4px solid var(--primary); box-shadow: var(--shadow-md); } .achievers-carousel .player_name { font-size: 16px; font-weight: 600; color: var(--secondary-dark); margin-bottom: 5px; } .achievers-carousel .player_team { font-size: 13px; color: var(--gray-600); } /* ========================================================================== Birthday Section ========================================================================== */ .birthday-section { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); padding: 60px 0; } .birthday-section .section-title, .birthday-section .section-subtitle { color: var(--white); } .birthday-section .section-subtitle { color: var(--accent-light); } .birthday-carousel .bday-frame { aspect-ratio: 1 / 1; overflow: hidden; container-type: inline-size; } .birthday-carousel .bday-frame > img.w-100 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .birthday-carousel .bday-caption { position: absolute; top: auto; left: 15%; right: 15%; bottom: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: 6%; } .birthday-carousel .bdyImg { width: 25%; width: clamp(22px, 22cqw, 100px); aspect-ratio: 1 / 1; height: auto; border-radius: var(--radius-full); border: 3px solid var(--primary); object-fit: cover; box-shadow: var(--shadow-md); margin: 0 auto 4%; flex-shrink: 0; } .birthday-carousel .bdyName { color: var(--white); font-weight: 600; text-align: center; font-size: 16px; font-size: clamp(9px, 4.2cqw, 18px); margin-bottom: 2%; } .birthday-carousel .bdyDistrict { color: var(--gray-400); text-align: center; font-size: 13px; font-size: clamp(8px, 3.4cqw, 14px); } /* ========================================================================== Districts Section ========================================================================== */ .districts-section { background: var(--white); } .districts-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 15px; } .district-card { background: var(--gray-100); border-radius: var(--radius-md); padding: 20px 15px; text-align: center; cursor: pointer; transition: var(--transition-normal); border: 2px solid transparent; } .district-card:hover { background: var(--white); border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px); } .district-card .district-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .district-card .district-icon i { font-size: 18px; color: var(--white); } .district-card h4 { font-size: 13px; font-weight: 600; color: var(--secondary-dark); margin: 0; } @media (max-width: 991px) { .districts-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 576px) { .districts-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== CTA Section ========================================================================== */ .cta-section { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); padding: 80px 0; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3C/svg%3E") repeat; opacity: 0.5; } .cta-content { text-align: center; position: relative; z-index: 1; } .cta-content h2 { font-size: 36px; color: var(--white); margin-bottom: 15px; } .cta-content p { font-size: 18px; color: rgba(255, 255, 255, 0.85); margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-buttons { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; } .btn-cta-primary { background: var(--white); color: var(--primary); padding: 14px 30px; border-radius: var(--radius-md); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-normal); } .btn-cta-primary:hover { background: var(--secondary-dark); color: var(--white); transform: translateY(-2px); } .btn-cta-secondary { background: transparent; color: var(--white); padding: 14px 30px; border: 2px solid var(--white); border-radius: var(--radius-md); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-normal); } .btn-cta-secondary:hover { background: var(--white); color: var(--primary); } @media (max-width: 768px) { .cta-content h2 { font-size: 26px; } .cta-content p { font-size: 15px; } } /* ========================================================================== Footer ========================================================================== */ #footer { background: var(--secondary-dark); color: var(--gray-400); } /* Footer Main */ .footer-main { padding: 60px 0 40px; } .footer-widget { margin-bottom: 30px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .footer-logo img { width: 60px; height: 60px; border-radius: var(--radius-md); } .footer-logo .logo-text h3 { font-size: 24px; color: var(--white); margin: 0; } .footer-logo .logo-text span { font-size: 12px; color: var(--gray-500); } .footer-about-text { font-size: 14px; line-height: 1.7; margin-bottom: 20px; } .footer-contact-info .contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; } .footer-contact-info i { color: var(--primary); } /* Social Links */ .social-links { display: flex; gap: 10px; margin-top: 20px; } .social-links a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 18px; transition: var(--transition-normal); } .social-links a:hover { background: var(--primary); transform: translateY(-3px); } /* Footer Title */ .footer-title { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 20px; padding-bottom: 10px; position: relative; } .footer-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--primary); } /* Footer Links */ .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: var(--gray-400); font-size: 14px; display: flex; align-items: center; gap: 8px; transition: var(--transition-normal); } .footer-links a:hover { color: var(--primary); padding-left: 5px; } .footer-links i { font-size: 12px; color: var(--primary); } /* App Download */ .app-download .app-text { font-size: 13px; color: var(--gray-500); margin-bottom: 10px; } .app-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); padding: 10px 15px; border-radius: var(--radius-md); transition: var(--transition-normal); } .app-badge:hover { background: var(--primary); } .app-badge img { width: 40px; height: 40px; border-radius: var(--radius-sm); } .app-badge span { color: var(--white); font-size: 14px; font-weight: 500; } /* Footer Disclaimer */ .footer-disclaimer { background: rgba(0, 0, 0, 0.2); padding: 25px 0; } .disclaimer-content h5 { font-size: 14px; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .disclaimer-content p { font-size: 12px; color: var(--gray-500); line-height: 1.7; margin: 0; } /* Footer Bottom */ .footer-bottom { background: rgba(0, 0, 0, 0.3); padding: 20px 0; } .footer-bottom-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .footer-bottom .copyright p { margin: 0; font-size: 13px; } .footer-bottom .support-email { font-size: 13px; } .footer-bottom .support-email a { color: var(--primary); font-weight: 600; } .footer-bottom .credits { font-size: 13px; } .footer-bottom .credits a { color: var(--primary); } .footer-bottom .credits .separator { margin: 0 10px; color: var(--gray-600); } @media (max-width: 768px) { .footer-bottom-content { flex-direction: column; text-align: center; } } /* ========================================================================== Modal Styles ========================================================================== */ .modern-modal .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .modern-modal .modal-header { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 25px; border: none; } .modern-modal .modal-header-content { display: flex; align-items: center; gap: 15px; } .modern-modal .modal-icon { width: 50px; height: 50px; background: var(--primary); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .modern-modal .modal-icon.secretary { background: var(--info); } .modern-modal .modal-icon i { font-size: 24px; color: var(--white); } .modern-modal .modal-title { color: var(--white); font-size: 20px; font-weight: 600; margin: 0; } .modern-modal .btn-close { filter: brightness(0) invert(1); opacity: 0.8; } .modern-modal .modal-body { padding: 30px 25px; } .modern-modal .form-floating { margin-bottom: 20px; } .modern-modal .form-control { border-radius: var(--radius-md); border: 2px solid var(--gray-300); padding: 2.5rem 0.75rem 1.625rem !important; height: 3.5rem !important; /* Fixed height for consistency */ line-height: 1.25 !important; transition: var(--transition-normal); } .modern-modal .form-floating > label { padding: 1rem 0.75rem !important; z-index: 10 !important; } /* Ensure label scales correctly when input is focused or has content */ .modern-modal .form-floating > .form-control:focus ~ label, .modern-modal .form-floating > .form-control:not(:placeholder-shown) ~ label { transform: scale(.85) translateY(-0.5rem) translateX(.15rem) !important; opacity: .65; } .modern-modal .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15); } .modern-modal .btn { border-radius: var(--radius-md); font-weight: 600; padding: 12px 24px; } .modern-modal .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border: none; } .modern-modal .btn-success { background: linear-gradient(135deg, var(--success) 0%, #1B4332 100%); border: none; } .modern-modal .forgot-link { color: var(--gray-600); font-size: 14px; } .modern-modal .forgot-link:hover { color: var(--primary); } .modern-modal .modal-footer { border-top: 1px solid var(--gray-200); justify-content: center; padding: 15px 25px; } /* ========================================================================== Utilities ========================================================================== */ .hidden { display: none !important; } .text-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ========================================================================== Legacy Support - Existing Classes ========================================================================== */ .tournaments_sec { position: absolute; right: 0; z-index: 5000; width: 280px; background: rgba(0, 0, 0, 0.5); margin: -130px 0 0 0; padding: 5px 15px 15px; } .desk { display: block; } .mob { display: none; } @media only screen and (max-width: 767px) { .desk { display: none; } .mob { display: block; } } .tournaments_sec h4 { font-size: 16px !important; color: #fff !important; text-align: left; border-left: 2px solid var(--primary); padding: 5px 0 5px 10px !important; margin: 0 0 10px 0 !important; line-height: 18px !important; text-transform: uppercase; font-weight: normal !important; display: inline-block; width: 100%; } .view_shedule a { margin: 10px 0 0 0; padding: 6px 0; background: var(--primary); width: 100%; display: inline-block; text-align: center; color: #fff; font-size: 14px; text-transform: uppercase; } .view_shedule a:hover { background: var(--primary-dark); } .news_l { width: 60px; flex-shrink: 0; margin-right: 10px; } .news_r { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; transition: all 0.3s ease; } /* Hover and Touch Expansion */ .nt-example1 li { transition: background 0.2s ease, box-shadow 0.2s ease, height 0.3s ease; } .nt-example1 li:hover, .nt-example1 li:focus-within { height: auto !important; min-height: 95px; background: #fff; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; z-index: 100; position: relative; border-radius: 4px; } .nt-example1 li:hover .news_r, .nt-example1 li:focus-within .news_r { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; padding: 15px 0; } /* Ensure the ticker doesn't clip during hover/focus */ .info-card:hover .nt-example1, .info-card:focus-within .nt-example1 { overflow: visible !important; height: auto !important; } /* Specific fix for mobile view (max-width: 767px) */ @media (max-width: 767px) { .nt-example1 li:active { height: auto !important; background: #fff; } } .info-card { transition: all 0.3s ease; } .info-card:hover { z-index: 50; } .disrict_boxes { width: 14.2%; float: left; } @media only screen and (max-width: 767px) { .disrict_boxes { width: 50%; } } /* Members styling */ .members_sec, .members_sec1, .members_main { background: #fff; margin: 7px 0 5px; padding: 10px; border: 1px solid #fff; box-shadow: var(--shadow-md); border-radius: var(--radius-md); width: 100%; display: inline-block; } .members_sec:hover, .members_sec1:hover { box-shadow: var(--shadow-lg); } .members_photo img, .members_photo1 img, .members_photo2 img { border-radius: var(--radius-md); text-align: center; margin-bottom: 0; } .members_names, .members_names2 { font-size: 15px; color: var(--secondary-dark); font-weight: 700; } .members_designation, .members_designation2 { font-size: 13px; color: var(--gray-600); font-weight: 600; } /* Player cards */ .player_image { width: 150px; margin: 0 auto; } .player_image img { width: 100%; border-radius: var(--radius-full); border: 2px solid #fff; box-shadow: var(--shadow-md); } .player_name { color: var(--secondary) !important; font-size: 16px !important; font-weight: bold !important; text-transform: none; padding: 15px 0 0 0; margin: 0 0 10px 0; text-align: center; } .player_team { color: var(--gray-500) !important; font-size: 14px !important; font-weight: 500 !important; text-align: center; margin: 0 0 22px 0; } /* Birthday Section Classes */ .divBdy { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Products/Achievers list */ .prodict_list { position: relative; } .products_s { padding: 15px; background: #fff; box-shadow: var(--shadow-md); border-radius: var(--radius-md); margin: 10px; } /* Login Form Styles */ .login_bg { background: url(../img/login_bg.jpg) !important; background-repeat: no-repeat; background-position: center top; background-size: cover !important; } .login_forms { width: 425px; margin: 10px auto; background: #fff; border-radius: var(--radius-lg); padding: 40px 25px; box-shadow: var(--shadow-xl); } .login_forms .form-control { height: 45px; border-radius: var(--radius-md) !important; border: 1px solid var(--gray-300) !important; padding: 10px 15px !important; font-size: 14px; width: 100%; } .sig_but { margin: 20px 0 0 0 !important; padding: 9px 0 !important; border-radius: var(--radius-md) !important; font-size: 16px !important; color: #fff !important; font-weight: 600; width: 100% !important; text-transform: uppercase; height: 50px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important; border: none !important; } /* Breadcrumbs */ .breadcrumbs { padding: 20px 0; background-color: var(--gray-100); min-height: 40px; } .breadcrumbs h2 { font-size: 24px; font-weight: 600; margin: 0; } .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 14px; } .breadcrumbs ol li+li { padding-left: 10px; } .breadcrumbs ol li+li::before { display: inline-block; padding-right: 10px; color: var(--gray-600); content: "/"; } /* Owl Carousel Customization */ .owl-carousel .owl-nav button { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: var(--primary) !important; color: var(--white) !important; border-radius: var(--radius-full) !important; font-size: 18px !important; transition: var(--transition-normal); } .owl-carousel .owl-nav button:hover { background: var(--primary-dark) !important; } .owl-carousel .owl-nav .owl-prev { left: -20px; } .owl-carousel .owl-nav .owl-next { right: -20px; } .owl-carousel .owl-dots { text-align: center; margin-top: 20px; } .owl-carousel .owl-dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: var(--gray-300); border-radius: var(--radius-full); transition: var(--transition-normal); } .owl-carousel .owl-dot.active { background: var(--primary); width: 30px; border-radius: var(--radius-lg); } /* Responsive Adjustments */ @media (max-width: 768px) { #topbar .topbar-inner { flex-direction: column; gap: 8px; } #topbar .topbar-right { flex-wrap: wrap; justify-content: center; } #header .logo-text { /*display: none;*/ } #header .logo img { height: 45px; } #announcement-bar .announcement-text { font-size: 12px; } } @media (max-width: 576px) { .footer-main { padding: 40px 0 20px; } .footer-logo { flex-direction: column; text-align: center; } .social-links { justify-content: center; } } /* Print Styles */ @media print { #topbar, #announcement-bar, .back-to-top, #footer { display: none !important; } #header { position: relative; box-shadow: none; } body { font-size: 12pt; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* Focus Styles for Accessibility */ a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* High Contrast Mode Support */ @media (prefers-contrast: high) { :root { --primary: #D00000; --secondary: #000080; } } /* ========================================================================== Form Select / Dropdown Styles - Ensure Selected Values are Visible ========================================================================== */ /* Native Select Styling */ .form-select, select.form-control { color: #495057 !important; background-color: #fff !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 12px; padding-right: 40px !important; } /* Selected option styling */ .form-select option, select.form-control option { color: #495057 !important; background: #fff; padding: 10px; } .form-select option:disabled, select.form-control option:disabled, .form-select option[value=""], select.form-control option[value=""] { color: #adb5bd !important; } .form-select option:checked, select.form-control option:checked { background: linear-gradient(135deg, #E63946 0%, #c1121f 100%); /*color: #fff !important;*/ } /* Placeholder state - when no value selected */ .form-select:invalid, select.form-control:invalid { color: #adb5bd !important; } /* Selected state - ensure text is visible */ .form-select:valid, select.form-control:valid { color: #495057 !important; } /* Select2 Enhanced Styling - Ensure visibility */ .select2-container { width: 100% !important; } .select2-container--default .select2-selection--single { height: 44px !important; border: 1px solid #dee2e6 !important; border-radius: 8px !important; padding: 6px 12px !important; background-color: #fff !important; display: flex !important; align-items: center !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px !important; color: #495057 !important; padding-left: 0 !important; padding-right: 30px !important; font-size: 14px !important; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #adb5bd !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; right: 8px !important; top: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #6c757d transparent transparent transparent !important; border-width: 6px 5px 0 5px !important; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #6c757d transparent !important; border-width: 0 5px 6px 5px !important; } .select2-container--default.select2-container--focus .select2-selection--single { border-color: #E63946 !important; box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1) !important; } .select2-dropdown { border: 1px solid #dee2e6 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; margin-top: 4px !important; } .select2-container--default .select2-results__option { padding: 10px 15px !important; font-size: 14px !important; color: #495057 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #E63946 !important; color: #fff !important; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #f8f9fa !important; color: #1D3557 !important; font-weight: 600 !important; } .select2-search--dropdown .select2-search__field { border: 1px solid #dee2e6 !important; border-radius: 6px !important; padding: 8px 12px !important; } .select2-search--dropdown .select2-search__field:focus { border-color: #E63946 !important; outline: none !important; } /* ========================================================================== Web Pages Styles - Inner Pages ========================================================================== */ /* Page Header / Hero Banner for Inner Pages */ .page-header { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); padding: 60px 0 40px; margin-top: 0; position: relative; overflow: hidden; } .page-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3C/svg%3E") repeat; opacity: 0.5; } .page-header .container { position: relative; z-index: 1; } .page-header h1 { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--white); margin-bottom: 10px; } .page-header .breadcrumb-nav { display: flex; align-items: center; gap: 10px; } .page-header .breadcrumb-nav a { color: var(--gray-400); font-size: 14px; transition: var(--transition-normal); } .page-header .breadcrumb-nav a:hover { color: var(--primary); } .page-header .breadcrumb-nav span { color: var(--gray-500); } .page-header .breadcrumb-nav .current { color: var(--primary); font-weight: 600; } /* Inner Page Content Section */ .inner-page { padding: 60px 0; background: var(--gray-100); min-height: 60vh; } .inner-page.white-bg { background: var(--white); } /* Modern Card Component */ .ttak-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: var(--transition-normal); height: 100%; } .ttak-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); } .ttak-card .card-header { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); padding: 20px 25px; border-bottom: none; } .ttak-card .card-header.primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); } .ttak-card .card-header h3 { color: var(--white); font-size: 20px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; } .ttak-card .card-header h3 i { font-size: 24px; } .ttak-card .card-body { padding: 25px; } .ttak-card .card-footer { padding: 15px 25px; background: var(--gray-100); border-top: 1px solid var(--gray-200); } /* Form Styles */ .ttak-form .form-group { margin-bottom: 20px; } .ttak-form .form-label { font-weight: 600; color: var(--gray-700); margin-bottom: 8px; font-size: 14px; } .ttak-form .form-label .required { color: var(--primary); margin-left: 2px; } .ttak-form .form-control, .ttak-form .form-select { border: 2px solid var(--gray-300); border-radius: var(--radius-md); padding: 12px 15px; font-size: 14px; transition: var(--transition-normal); background-color: var(--white); } .ttak-form .form-control:focus, .ttak-form .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15); outline: none; } .ttak-form .form-control::placeholder { color: var(--gray-500); } .ttak-form .input-group { position: relative; } .ttak-form .input-group .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray-500); z-index: 5; } .ttak-form .input-group .form-control { padding-left: 45px; } .ttak-form fieldset { border: 2px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px; margin-top: 20px; } .ttak-form fieldset legend { font-size: 14px; font-weight: 600; color: var(--secondary); padding: 0 10px; width: auto; margin-bottom: 0; } /* Photo Upload */ .photo-upload-container { text-align: center; padding: 20px; border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); background: var(--gray-100); transition: var(--transition-normal); } .photo-upload-container:hover { border-color: var(--primary); background: rgba(230, 57, 70, 0.05); } .photo-upload-container .photo-preview { width: 150px; height: 180px; border-radius: var(--radius-md); object-fit: cover; border: 3px solid var(--white); box-shadow: var(--shadow-md); margin-bottom: 15px; } .photo-upload-container .upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--primary); color: var(--white); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; font-weight: 600; transition: var(--transition-normal); } .photo-upload-container .upload-btn:hover { background: var(--primary-dark); } .photo-upload-container input[type="file"] { display: none; } /* Buttons */ .btn-ttak { padding: 12px 30px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); transition: var(--transition-normal); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; } .btn-ttak-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3); } .btn-ttak-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4); color: var(--white); } .btn-ttak-secondary { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); color: var(--white); } .btn-ttak-secondary:hover { transform: translateY(-2px); color: var(--white); } .btn-ttak-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); } .btn-ttak-outline:hover { background: var(--primary); color: var(--white); } .btn-ttak-success { background: linear-gradient(135deg, var(--success) 0%, #1B4332 100%); color: var(--white); } /* Data Tables Styling */ .ttak-table { width: 100%; border-collapse: separate; border-spacing: 0; } .ttak-table thead th { background: var(--secondary); color: var(--white); padding: 15px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; border: none; } .ttak-table thead th:first-child { border-radius: var(--radius-md) 0 0 0; } .ttak-table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; } .ttak-table tbody td { padding: 15px; border-bottom: 1px solid var(--gray-200); font-size: 14px; vertical-align: middle; } .ttak-table tbody tr { background: var(--white); transition: var(--transition-normal); } .ttak-table tbody tr:hover { background: var(--gray-100); } .ttak-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-md); } .ttak-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius-md) 0; } /* DataTables Override */ .dataTables_wrapper .dataTables_filter input { border: 2px solid var(--gray-300); border-radius: var(--radius-md); padding: 8px 15px; margin-left: 10px; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary); outline: none; } .dataTables_wrapper .dataTables_length select { border: 2px solid var(--gray-300); border-radius: var(--radius-sm); padding: 5px 10px; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--radius-sm) !important; margin: 0 2px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--gray-200) !important; border-color: var(--gray-200) !important; color: var(--gray-800) !important; } /* Download Items */ .download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .download-item { background: var(--white); border-radius: var(--radius-md); padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: var(--shadow-sm); transition: var(--transition-normal); border: 1px solid var(--gray-200); } .download-item:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px); } .download-item .file-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .download-item .file-icon i { font-size: 24px; color: var(--white); } .download-item .file-info { flex: 1; min-width: 0; } .download-item .file-name { font-weight: 600; color: var(--secondary-dark); font-size: 14px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .download-item .file-meta { font-size: 12px; color: var(--gray-500); } .download-item .download-btn { width: 40px; height: 40px; background: var(--gray-100); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--primary); transition: var(--transition-normal); } .download-item .download-btn:hover { background: var(--primary); color: var(--white); } /* Officials/Contact Cards */ .official-card { background: var(--white); border-radius: var(--radius-lg); padding: 25px; text-align: center; box-shadow: var(--shadow-md); transition: var(--transition-normal); height: 100%; } .official-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .official-card .photo { width: 120px; height: 120px; border-radius: var(--radius-full); object-fit: cover; border: 4px solid var(--primary); margin: 0 auto 15px; box-shadow: var(--shadow-md); } .official-card .name { font-size: 18px; font-weight: 700; color: var(--secondary-dark); margin-bottom: 5px; } .official-card .designation { font-size: 14px; color: var(--primary); font-weight: 600; margin-bottom: 10px; } .official-card .district { font-size: 13px; color: var(--gray-600); display: flex; align-items: center; justify-content: center; gap: 5px; } .official-card .contact-info { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--gray-200); } .official-card .contact-info a { display: inline-flex; align-items: center; gap: 5px; color: var(--gray-600); font-size: 13px; margin: 0 10px; } .official-card .contact-info a:hover { color: var(--primary); } /* Gallery Grid */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-normal); } .gallery-item:hover img { transform: scale(1.1); } .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%); opacity: 0; transition: var(--transition-normal); display: flex; align-items: flex-end; padding: 20px; } .gallery-item:hover .overlay { opacity: 1; } .gallery-item .overlay .title { color: var(--white); font-weight: 600; font-size: 14px; } /* Tournament Schedule Cards */ .tournament-schedule-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-normal); } .tournament-schedule-card:hover { box-shadow: var(--shadow-lg); } .tournament-schedule-card .date-badge { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: var(--white); padding: 15px; text-align: center; min-width: 80px; } .tournament-schedule-card .date-badge .day { font-size: 28px; font-weight: 700; line-height: 1; } .tournament-schedule-card .date-badge .month { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .tournament-schedule-card .tournament-info { padding: 20px; flex: 1; } .tournament-schedule-card .tournament-name { font-size: 18px; font-weight: 700; color: var(--secondary-dark); margin-bottom: 8px; } .tournament-schedule-card .tournament-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; color: var(--gray-600); } .tournament-schedule-card .tournament-meta span { display: flex; align-items: center; gap: 5px; } .tournament-schedule-card .tournament-meta i { color: var(--primary); } /* Ranking Table Badge */ .rank-badge { width: 35px; height: 35px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .rank-badge.gold { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); color: #7A5C00; } .rank-badge.silver { background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%); color: #555; } .rank-badge.bronze { background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%); color: #5C3D1E; } .rank-badge.default { background: var(--gray-200); color: var(--gray-700); } /* Policy Pages */ .policy-content { background: var(--white); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); } .policy-content h2 { font-size: 24px; color: var(--secondary-dark); margin-top: 30px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); } .policy-content h2:first-child { margin-top: 0; } .policy-content p { color: var(--gray-700); line-height: 1.8; margin-bottom: 15px; } .policy-content ul { margin-bottom: 20px; padding-left: 20px; } .policy-content ul li { color: var(--gray-700); margin-bottom: 10px; position: relative; padding-left: 20px; } .policy-content ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--primary); border-radius: 50%; } /* Payment Modal */ .payment-modal .modal-content { border: none; border-radius: var(--radius-lg); overflow: hidden; } .payment-modal .modal-header { background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%); border: none; padding: 20px 25px; } .payment-modal .modal-title { color: var(--white); font-weight: 600; } .payment-modal .btn-close { filter: brightness(0) invert(1); } .payment-modal .modal-body { padding: 30px; } .payment-option { display: flex; flex-direction: column; align-items: center; padding: 25px; border: 2px solid var(--gray-200); border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-normal); text-align: center; } .payment-option:hover { border-color: var(--primary); background: rgba(230, 57, 70, 0.05); } .payment-option .icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .payment-option .icon i { font-size: 28px; color: var(--white); } .payment-option .title { font-size: 18px; font-weight: 700; color: var(--secondary-dark); margin-bottom: 5px; } .payment-option .desc { font-size: 13px; color: var(--gray-600); } /* Terms Checkbox */ .terms-checkbox { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: var(--gray-100); border-radius: var(--radius-md); margin-top: 20px; } .terms-checkbox input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; margin-top: 2px; } .terms-checkbox label { font-size: 14px; color: var(--gray-700); line-height: 1.5; } .terms-checkbox label a { color: var(--primary); font-weight: 600; } /* Empty State */ .empty-state { text-align: center; padding: 60px 20px; } .empty-state .icon { width: 80px; height: 80px; background: var(--gray-200); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .empty-state .icon i { font-size: 36px; color: var(--gray-500); } .empty-state h3 { font-size: 20px; color: var(--gray-700); margin-bottom: 10px; } .empty-state p { color: var(--gray-500); font-size: 14px; } /* Responsive Adjustments for Inner Pages */ @media (max-width: 991px) { .page-header { padding: 40px 0 30px; } .page-header h1 { font-size: 32px; } .inner-page { padding: 40px 0; } .ttak-card .card-body { padding: 20px; } .policy-content { padding: 25px; } } @media (max-width: 768px) { .page-header h1 { font-size: 26px; } .download-grid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .official-card { padding: 20px; } .official-card .photo { width: 100px; height: 100px; } .tournaments-widget { border-radius: 0; } } @media (max-width: 576px) { .gallery-grid { grid-template-columns: 1fr; } .ttak-form .form-control, .ttak-form .form-select { padding: 10px 12px; } .tournaments-widget { border-radius: 0; } } /* ========================================================================== Mobile Menu & Header Alignment Fixes -Anu 2026-03-16 ========================================================================== */ @media (max-width: 991px) { #header .header-inner { padding: 5px 0; } } @media (max-width: 576px) { #header .logo img { height: 40px; } #header .logo-main { font-size: 20px; } #topbar .topbar-inner { justify-content: center; text-align: center; } #topbar .topbar-left { display: none; /* Hide email on small mobile to save vertical space */ } #topbar .topbar-right { justify-content: center; width: 100%; gap: 8px; } } @media (max-width: 380px) { #topbar .divider { display: none; /* Stack login buttons on very small screens */ } #topbar .topbar-right { flex-direction: column; gap: 5px; } } /* Make carousel icons black */ .carousel-control-prev, .carousel-control-next { filter: invert(1) grayscale(100); }