body { min-height: 100vh; display: flex; align-items: center; background-color: #1a365d; /*background-color:#0055b3;*/ padding: 20px 0; /* background: linear-gradient(135deg, #22304e 0%, #0055b3 35%, #0055b3 70%, #22304e 100%);*/ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%2322304e'/%3E%3Cstop offset='1' stop-color='%230055b3'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%235c7cff'/%3E%3Cstop offset='1' stop-color='%230055b3'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-attachment:fixed; background-size:cover /* :root { --dark-blue: #22304e; --mid-blue: #5c7cff; --electric-blue: #0055b3; } */ } /* Efecte Vidre (Glassmorphism) */ .glass-panel { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); /*color: white;*/ color: #222; border-radius: 15px; padding: 1.5rem; height: 100%; transition: transform 0.3s ease; } .glass-panel:hover { transform: translateY(-5px); } /* Card de Login */ .login-card { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 15px 35px rgba(0,0,0,0.4); } .login-card h2 { color: #1e3a8a; font-weight: 800; letter-spacing: -1px; } /* Botons Socials */ .social-btn { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #eee; border-radius: 50%; margin: 0 8px; transition: all 0.3s ease; text-decoration: none; font-size: 1.4rem; } .social-btn:hover { background: #f8f9fa; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform: scale(1.1); } /* Enllaços de les caixes laterals */ .side-link { /*color: rgba(255,255,255,0.9); color: rgba(10,10,10,0.8);*/ color: #333; text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: 0.2s; font-weight: bold; } .side-link:hover { /*color: rgba(10,10,10,1) !important;*/ padding-left: 5px; } /* Ajust per a mòbils */ @media (max-width: 991px) { .side-panel-container { order: 2; /* Això fa que en mòbil les caixes d'enllaços vagin sota el login */ } } @media (max-width: 481px) { .social-btn { width: 50px; height: 50px; } .social-btn i.fa-2x{ font-size: 1.25em !important; } } .fa-google { background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .fa-microsoft { background: conic-gradient( from 0deg, #f25022 0deg 90deg, /* Vermell (quadrat superior esquerre) */ #7fba00 90deg 180deg, /* Verd (quadrat superior dret) */ #00a4ef 180deg 270deg, /* Blau (quadrat inferior esquerre) */ #ffb900 270deg 360deg /* Groc (quadrat inferior dret) */ ) 50% 50%/100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }