/* ===== G99 Performance — app.css ===== */ /* BLOK 1: glavni slogi */ * { box-sizing: border-box; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: #050a18; color: #ffffff; margin: 0; padding: 20px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; user-select: none; } .exporting * { animation: none !important; transition: none !important; } .exporting .rank-diamond::before, .exporting .rank-prime::before, .exporting .rank-elite::before, .exporting .rank-g99::before { display: none !important; } .exporting .fifa-kartica { box-shadow: none !important; transform: none !important;} .exporting .notranji-rob { box-shadow: none !important; border-color: rgba(255,255,255,0.4) !important;} .exporting .g99-pulsing-glow { display: none !important; } .exporting .znacka-wrap { filter: none !important; } .exporting .znacka-krog { box-shadow: none !important; } .exporting .stat-diff, .exporting .ovr-diff, .exporting .history-nav { display: none !important; } .prijava-kontejner { background: #0f172a; max-width: 400px; width: 100%; padding: 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); border: 1px solid #1e3a5f; text-align: center; } .prijava-kontejner h2 { color: #4facfe; margin-bottom: 20px; text-transform: uppercase; font-weight: 900; } .prijava-skupina { margin-bottom: 15px; text-align: left; } #g99-aplikacija { display: none; width: 100%; flex-direction: column; align-items: center; } .pogled-preklopnik { display: flex; background: #152238; padding: 5px; border-radius: 30px; margin-bottom: 15px; border: 1px solid #1e3a5f; z-index: 10; flex-wrap: wrap; justify-content: center; gap: 5px; align-items: center;} .preklop-gumb { padding: 8px 20px; border: none; background: transparent; color: #a0aec0; font-weight: bold; font-size: 13px; cursor: pointer; border-radius: 20px; transition: all 0.3s; text-transform: uppercase; } .preklop-gumb.aktivno { background: #4facfe; color: #0b1120; box-shadow: 0 0 10px rgba(79, 172, 254, 0.5); } .mode-switch-wrapper { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px; background: #111d35; padding: 8px 20px; border-radius: 30px; border: 1px solid #1e3a5f; box-shadow: 0 4px 15px rgba(0,0,0,0.5); } .mode-switch-label { font-weight: 900; font-size: 12px; color: #a0aec0; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; cursor: pointer;} .mode-switch-label.active { color: #4facfe; text-shadow: 0 0 10px rgba(79,172,254,0.5); } .switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0 5px;} .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #334155; transition: .4s; border-radius: 34px; border: 2px solid #1e3a5f; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: #4facfe; transition: .4s; border-radius: 50%; box-shadow: 0 0 5px rgba(79, 172, 254, 0.8); } input:checked + .slider { background-color: #334155; } input:disabled + .slider { cursor: not-allowed; } input:checked + .slider:before { transform: translateX(20px); background-color: #f1c40f; box-shadow: 0 0 5px rgba(241, 196, 15, 0.8);} .jezikovni-meni { position: absolute; top: 15px; right: 20px; display: flex; gap: 8px; font-size: 12px; font-weight: bold; z-index: 100; align-items: center; } .jezik-gumb { cursor: pointer; padding: 6px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); color: #888; transition: all 0.2s;} .jezik-gumb.aktivno { color: #fff; border-color: #4facfe; background: #4facfe; color: #050a18;} .gumb-odjava { position: absolute; top: 15px; left: 20px; background: #334155; color: #fff; padding: 6px 15px; font-size: 11px; border-radius: 20px; font-weight: bold; width: auto; border: 1px solid #475569; z-index: 100; cursor: pointer; text-transform: uppercase; transition: background 0.2s;} .gumb-odjava:hover { background: #d63031; } .glavni-kontejner { background: #0f172a; max-width: 1100px; width: 100%; padding: 30px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); border: 1px solid #1e3a5f; transition: max-width 0.4s ease; margin-top: 20px;} .glavni-kontejner.prikaz-nacin { max-width: 900px; padding: 30px; background: radial-gradient(circle at center, #111d35 0%, #050a18 100%); border:none;} .kontrole { flex: 1; min-width: 300px; background: #152238; padding: 20px; border-radius: 15px; border: 1px solid #1e3a5f; } .vnosna-vrstica { display: grid; gap: 10px; margin-bottom: 15px; align-items: end; } label { display: block; margin-bottom: 4px; font-size: 11px; color: #4facfe; font-weight: 700; text-transform: uppercase; cursor: default; } input, select { width: 100%; padding: 10px; background: #050a18; border: 1px solid #1e3a5f; border-radius: 8px; color: white; font-size: 14px; outline: none; font-weight: bold; } .gumb { padding: 12px; border: none; border-radius: 8px; color: #0b1120; font-size: 13px; font-weight: 900; cursor: pointer; text-transform: uppercase; transition: all 0.2s; width: 100%; } .gumb:hover { transform: translateY(-2px); } .gumb-shrani-sliko { background: linear-gradient(45deg, #f2994a 0%, #f2c94c 100%); box-shadow: 0 4px 10px rgba(242, 153, 74, 0.3); } .gumb-shrani-bazo { background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3); } .gumb-shrani-lastno { background: linear-gradient(45deg, #2ecc71 0%, #27ae60 100%); box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3); color: #fff;} .gumb-info { padding: 10px; background: transparent; border: 1px solid #4facfe; color: #4facfe; border-radius: 8px; font-size: 14px; cursor: pointer; height: 39px; min-width: 45px; display: flex; justify-content: center; align-items: center; width: auto;} .graf-predogled { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 10px; margin-top: 15px; border: 1px solid #1e3a5f; display: flex; justify-content: center; align-items: center; height: 250px;} .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 10, 24, 0.95); z-index: 999; backdrop-filter: blur(10px); cursor: pointer;} .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #152238; padding: 25px; border-radius: 15px; border: 1px solid #4facfe; z-index: 1000; width: 90%; max-width: 550px; max-height: 90vh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .modal::-webkit-scrollbar { display: none; } .modal-header { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;} .modal-header h2 { margin: 0; color: #4facfe; font-size: 18px; text-transform: uppercase; text-align: center; } .modal-tabela { width: 100%; border-collapse: collapse; color: #fff; text-align: center; } .modal-tabela th { padding: 10px; font-size: 12px; color: #4facfe; border-bottom: 1px solid #1e3a5f; } .modal-tabela td { padding: 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); } .metodologija-telo { text-align: left; color: #e2e8f0; font-size: 13.5px; line-height: 1.7; } .metodologija-telo h3 { color: #4facfe; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 8px 0; } .metodologija-telo h3:first-child { margin-top: 0; } .metodologija-telo p { margin: 0 0 10px 0; } .metodologija-telo b { color: #fff; } .metodologija-telo table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; } /* Rangi z barvnim pasom - iste barve kot kartice, da razlaga in kartica govorita enako. */ .met-rangi { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .met-rang { display: grid; grid-template-columns: 4px 74px 1fr; align-items: center; gap: 12px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; padding: 9px 12px; } .met-rang-pas { display: block; width: 4px; height: 22px; border-radius: 3px; background: var(--rb); box-shadow: 0 0 10px -2px var(--rb); } .met-rang-obseg { font-size: 12px; font-weight: 800; color: #a0aec0; } .met-rang-ime { font-size: 12.5px; font-weight: 900; letter-spacing: 1.5px; color: var(--rb); } .metodologija-telo th { text-align: left; padding: 6px 8px; color: #4facfe; border-bottom: 1px solid #1e3a5f; font-size: 11px; text-transform: uppercase; } .metodologija-telo td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); } .btn-zapri { margin-top: 25px; padding: 15px 40px; background: #d63031; color: #fff; font-weight: 900; border: 3px solid #fff; border-radius: 30px; cursor: pointer; text-transform: uppercase; font-size: 16px; box-shadow: 0 4px 15px rgba(214,48,49,0.8); transition: transform 0.2s; } .btn-zapri:hover { transform: scale(1.05); } .vsebina { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; align-items: center; width: 100%; } .prikaz-sekcija { display: flex; flex: 1.5; gap: 30px; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 100%; position: relative;} .history-nav { display: flex; width: 100%; justify-content: center; align-items: center; gap: 20px; margin-bottom: 15px; z-index: 50; } .history-nav button { background: rgba(0,0,0,0.5); color: #4facfe; border: 2px solid #4facfe; border-radius: 50%; width: 45px; height: 45px; cursor: pointer; transition: 0.3s; display: flex; justify-content: center; align-items: center; font-size: 18px;} .history-nav button:hover { background: #4facfe; color: #000; transform: scale(1.1); } .history-nav span { font-weight: 900; color: #4facfe; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; min-width: 150px; text-align: center; text-shadow: 0 0 10px rgba(79,172,254,0.5);} .fifa-kartica { width: 320px; height: 480px; position: relative; overflow: hidden; border-radius: 16px; display: block; background-color: #0b1120; border: 3px solid transparent; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: translateZ(0); backface-visibility: hidden; will-change: transform;} .notranji-rob { position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 12px; z-index: 5; pointer-events: none; border: 1px solid transparent; } .rank-iron { border-color: #596266; box-shadow: 0 4px 10px rgba(0,0,0,0.6); } .rank-bronze { border-color: #cd7f32; box-shadow: 0 4px 10px rgba(0,0,0,0.6); } .rank-bronze .notranji-rob { border: 1px solid rgba(205,127,50,0.3); } .rank-silver { border-color: #bdc3c7; box-shadow: 0 4px 10px rgba(255,255,255,0.1); } .rank-silver .notranji-rob { border: 1px solid rgba(189,195,199,0.3); } .rank-gold { border-color: #f1c40f; animation: breathe-gold 3s infinite alternate ease-in-out; } .rank-gold .notranji-rob { border-color: rgba(241,196,15,0.3); } .rank-platinum { border-color: #00cec9; animation: breathe-plat 3s infinite alternate ease-in-out; } .rank-platinum .notranji-rob { border-color: rgba(255,255,255,0.3); border-style: dashed; } .rank-diamond { border-color: #0984e3; animation: breathe-dia 3s infinite alternate ease-in-out; } .rank-diamond .notranji-rob { border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.5); border-left-color: rgba(9,132,227,0.3); border-right-color: rgba(9,132,227,0.3); } .rank-prime { border-color: #a29bfe; animation: breathe-pri 3s infinite alternate ease-in-out; } .rank-prime .notranji-rob { border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 0 10px rgba(162,155,254,0.3); } .rank-elite { border-color: #ff7675; animation: breathe-eli 3s infinite alternate ease-in-out; } .rank-elite .notranji-rob { border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 0 15px rgba(214,48,49,0.5); } .rank-g99 { border-color: #00f2fe; animation: breathe-g99 3s infinite alternate ease-in-out; } .rank-g99 .notranji-rob { border: 1px solid rgba(255,255,255,0.9); box-shadow: inset 0 0 20px rgba(0,242,254,0.6); } @keyframes breathe-gold { 0% { box-shadow: 0 0 5px rgba(241,196,15,0.1); } 100% { box-shadow: 0 0 10px rgba(241,196,15,0.4); } } @keyframes breathe-plat { 0% { box-shadow: 0 0 5px rgba(0,206,201,0.1); } 100% { box-shadow: 0 0 10px rgba(0,206,201,0.4); } } @keyframes breathe-dia { 0% { box-shadow: 0 0 5px rgba(9,132,227,0.2); } 100% { box-shadow: 0 0 15px rgba(9,132,227,0.5); } } @keyframes breathe-pri { 0% { box-shadow: 0 0 5px rgba(162,155,254,0.2); } 100% { box-shadow: 0 0 15px rgba(162,155,254,0.5); } } @keyframes breathe-eli { 0% { box-shadow: 0 0 5px rgba(214,48,49,0.3); } 100% { box-shadow: 0 0 20px rgba(214,48,49,0.6); } } @keyframes breathe-g99 { 0% { box-shadow: 0 0 8px rgba(0,242,254,0.4); } 100% { box-shadow: 0 0 25px rgba(0,242,254,0.7); } } .g99-pulsing-glow { position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 25px rgba(0,242,254,0.4); animation: breathe-op 3s infinite alternate ease-in-out; pointer-events: none; opacity: 0; z-index: 4; } @keyframes breathe-op { 100% { opacity: 0.5; } } .slika-atleta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 264px; background-size: cover; background-position: top center; background-repeat: no-repeat; z-index: 1; border-bottom: 2px solid rgba(255,255,255,0.1); } .kartica-ovr-wrapper { position: absolute; top: 10px; left: 10px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; } .kartica-ovr-label { background: #000; border: 2px solid #fff; border-radius: 8px; padding: 4px 10px 6px 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;} .ovr-stevilka { font-size: 50px; font-weight: 900; font-style: italic; line-height: 0.8; letter-spacing: -2px; color: var(--rang-barva, #fff); text-shadow: 0 0 18px color-mix(in srgb, var(--rang-barva, #fff) 55%, transparent); } .kartica-mode-text { font-size: 10px; font-weight: 900; color: #a0aec0; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin-top: 2px;} /* PUŠČICE ZGORAJ DESNO */ .ovr-diff { position: absolute; top: -12px; right: -20px; font-size: 13px; font-weight: 900; padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,0.85); border: 1px solid; animation: popIn 0.4s ease-out forwards; display: none; z-index: 15;} .stat-diff { position: absolute; top: -10px; right: -25px; font-size: 10px; font-weight: 900; padding: 1px 4px; border-radius: 6px; background: rgba(0,0,0,0.8); border: 1px solid; animation: popIn 0.4s ease-out forwards; display: none; z-index: 15;} .stat-diff.positive, .ovr-diff.positive { color: #2ecc71; border-color: rgba(46,204,113,0.5); } .stat-diff.negative, .ovr-diff.negative { color: #ff7675; border-color: rgba(255,118,117,0.5); } /* QR koda stoji ZUNAJ kartice, v nogi izvožene slike, skupaj z oznako profila. Prej je bila v kotu fotografije, kjer je zakrivala športnika - kartica je svetinja in nanjo ne sodi nič, kar ni del kartice. Bela podlaga in temni moduli so namerni: barvne QR kode se pogosto ne skenirajo, kontrast je edino, kar telefonu šteje. */ .izvoz-noga { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; } .qr-noga { width: 58px; height: 58px; background: #fff; border-radius: 8px; padding: 4px; box-sizing: border-box; flex-shrink: 0; } .qr-noga img { width: 100%; height: 100%; display: block; image-rendering: pixelated; } .izvoz-noga-tekst { text-align: left; } .izvoz-noga-tekst b { display: block; color: #a0aec0; font-size: 18px; font-weight: 700; letter-spacing: 3px; } .izvoz-noga-tekst span { display: block; color: #4a5568; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 4px; } .znacke-kontejner { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 5px; z-index: 20; align-items: center; } .znacka-wrap { cursor: help; transition: transform 0.2s; } .znacka-wrap:hover { transform: scale(1.2); z-index: 30;} .znacka-wrap.tier-5 { color: #ff9f43; filter: drop-shadow(0 0 6px currentColor); } .znacka-wrap.tier-4 { color: #00f2fe; filter: drop-shadow(0 0 5px currentColor); } .znacka-wrap.tier-3 { color: #a29bfe; filter: drop-shadow(0 0 4px currentColor); } .znacka-wrap.tier-2 { color: #ff7675; filter: drop-shadow(0 0 3px currentColor); } .znacka-wrap.tier-1 { color: #f1c40f; filter: drop-shadow(0 0 3px currentColor); } .znacka-wrap.tier-0 { color: #2ecc71; filter: drop-shadow(0 0 3px currentColor); } .znacka-krog { width: 34px; height: 34px; border-radius: 50%; background: #000; border: 1.5px solid currentColor; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px currentColor; } .kartica-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 216px; background: #0b1120; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 20px; backface-visibility: hidden; } .kartica-bottom-ime { font-size: 25px; font-weight: 900; text-transform: uppercase; color: #fff; width: 100%; margin: 0 auto 6px auto; text-align: center; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 4px; white-space: normal; word-wrap: break-word; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; backface-visibility: hidden;} .kartica-bottom-rank { font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 2px 0; flex-shrink: 0; backface-visibility: hidden;} .kartica-bottom-detajli { font-size: 11px; font-weight: 700; color: #a0aec0; letter-spacing: 1px; width: 100%; text-align: center; margin: 0 0 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; flex-shrink: 0; backface-visibility: hidden;} .stat-panel-ikone { display: flex; justify-content: center; gap: 15px; width: 100%; padding-top: 0; flex-shrink: 0; backface-visibility: hidden;} .ikona-box { display: flex; flex-direction: column; align-items: center; cursor: help; position: relative; width: 45px;} .ikona-img { font-size: 20px; margin-bottom: 4px; color: #4facfe; } .ikona-val { font-size: 22px; font-weight: 900; color: #fff; position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; } .roll-in { animation: flipIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes flipIn { 0% { opacity: 0; transform: rotateX(-90deg) translateY(10px); } 100% { opacity: 1; transform: rotateX(0deg) translateY(0); } } @keyframes popIn { 0% { opacity: 0; transform: scale(0.5) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .desna-kolona { display: flex; flex-direction: column; gap: 20px; align-items: center; width: 360px; } /* ===== PRENOVLJENA "MOJA KARTICA" ===== */ .mk-panel { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .akcijska-vrstica { display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 460px; margin: 0 auto; } .akcijska-vrstica .btn-akcija-primarna { flex: 1; } .akcije-delitev { display: flex; gap: 8px; } .btn-ikona { width: 46px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid #1e3a5f; color: #cfd8e6; font-size: 17px; cursor: pointer; transition: all 0.2s; } .btn-ikona:hover { background: rgba(79,172,254,0.12); border-color: #4facfe; transform: translateY(-1px); } /* Pomožne akcije so tiho ločene - so referenca, ne dnevna opravila */ .akcije-pomoc { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } .btn-pomoc { padding: 7px 13px; border-radius: 20px; background: transparent; border: 1px solid transparent; color: #6b7c94; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: all 0.2s; } .btn-pomoc:hover { color: #cfd8e6; border-color: #1e3a5f; background: rgba(255,255,255,0.03); } /* ===== MOJA KARTICA: levi stolpec + prefinjeni gumbi ===== */ .leva-kolona-prikaz { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 320px; } #prikazAkcije { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 710px; margin-top: 26px; } .akcije-sekundarne { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; } .akcije-primarne { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; } .btn-akcija-sekundarna { flex: 1 1 150px; padding: 9px 14px; background: rgba(255,255,255,0.03); color: #a0aec0; border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; font-family: 'Montserrat', sans-serif; } .btn-akcija-sekundarna:hover { background: rgba(79,172,254,0.09); border-color: rgba(79,172,254,0.45); color: #fff; } .btn-akcija-primarna { flex: 1 1 170px; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.2s ease; font-family: 'Montserrat', sans-serif; } .btn-akcija-primarna:hover { transform: translateY(-1px); } .btn-akcija-porocilo { background: rgba(108,92,231,0.14); border-color: rgba(108,92,231,0.5); color: #b8b0ff; } .btn-akcija-porocilo:hover { background: rgba(108,92,231,0.24); color: #fff; } .btn-akcija-prenos { background: rgba(79,172,254,0.12); border-color: rgba(79,172,254,0.45); color: #8ecdff; } .btn-akcija-prenos:hover { background: rgba(79,172,254,0.22); color: #fff; } .btn-akcija-ig { background: rgba(220,39,67,0.12); border-color: rgba(220,39,67,0.45); color: #ff9fb0; } .btn-akcija-ig:hover { background: rgba(220,39,67,0.22); color: #fff; } .btn-akcija-shrani-sliko { flex: none; width: 100%; background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.45); color: #7ee2a8; } .btn-akcija-shrani-sliko:hover { background: rgba(46,204,113,0.22); color: #fff; } @media (max-width: 850px) { .leva-kolona-prikaz { width: 100%; } } .graf-sekcija { width: 100%; height: 360px; background: rgba(0,0,0,0.4); border-radius: 50%; border: 2px solid #1e3a5f; display: flex; justify-content: center; align-items: center; padding: 20px; } canvas { max-width: 100%; } .legenda-sekcija { width: 100%; background: rgba(0,0,0,0.4); border-radius: 15px; border: 1px solid #1e3a5f; padding: 15px; display: none; flex-direction: column; gap: 8px;} .legenda-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 8px; border-left: 3px solid;} .legenda-ikona-box { width: 34px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;} .legenda-teksti { display: flex; flex-direction: column; justify-content: center; text-align: left; } .legenda-naslov { font-size: 13px; font-weight: 900; color: #fff; text-transform: uppercase; margin-bottom: 2px;} .legenda-opis { font-size: 11px; color: #a0aec0; font-weight: bold;} /* BAZA IN MALE KARTICE (OSNOVNA VELIKOST: 260x400) */ .galerija-filtri { display: flex; gap: 10px; margin-bottom: 20px; width: 100%; justify-content: center; flex-wrap: wrap; align-items: center;} .galerija-filtri select, .galerija-filtri input { width: auto; min-width: 130px; padding: 8px; border-radius: 8px; border: 1px solid #1e3a5f; background: #050a18; color: #fff;} /* ===== LESTVICA ===== */ .lestvica-sekcija { width: 100%; margin-bottom: 46px; } .lestvica-glava { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .lestvica-ikona { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--lb-mehko); border: 1px solid var(--lb-rob); color: var(--lb); font-size: 17px; } .lestvica-naslov { flex: 1; font-size: 17px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-align: left; } .lestvica-stevec { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: var(--lb); background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 5px 12px; } .lestvica-crta { height: 2px; border-radius: 2px; margin: 12px 0 26px; background: linear-gradient(90deg, var(--lb), transparent 65%); } /* Stopničke: prva tri mesta rahlo dvignemo, da se podij vidi brez branja številk. */ .lestvica-mesto { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .lestvica-mesto.stopnicke.m1 { transform: translateY(-14px); } .lestvica-mesto.stopnicke.m2 { transform: translateY(-8px); } .lestvica-mesto.stopnicke.m3 { transform: translateY(-4px); } @media (max-width: 620px) { .lestvica-mesto.stopnicke { transform: none; } } .galerija-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 25px; width: 100%; } .atlet-vrstica-container { perspective: 1200px; width: 100%; height: 400px; background: transparent; cursor: pointer; position: relative; } .atlet-vrstica-flipper { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); transform-style: preserve-3d;} /* Obrat na hover ima smisel SAMO pri miški. Na zaslonu na dotik se :hover sproži ob dotiku in nato "obtiči", zato so se kartice ob drsenju obračale naključno, namerno pa se jih ni dalo obrniti. Zato je pravilo omejeno na fin kazalec, na dotik pa obrat prevzame razred .obrnjena (dotik = obrat). */ @media (hover: hover) and (pointer: fine) { body:not(.compare-mode) .atlet-vrstica-container:hover .atlet-vrstica-flipper { transform: rotateY(180deg); } } body:not(.compare-mode) .atlet-vrstica-flipper.obrnjena { transform: rotateY(180deg); } /* Namig se pokaže samo na napravah brez miške. */ .namig-dotik { display: none; width: 100%; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #4a5568; margin-bottom: 14px; } @media (hover: none) { .namig-dotik { display: block; } } .atlet-vrstica-front, .atlet-vrstica-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background-color: #0b1120; border: 3px solid transparent; transition: border-width 0.2s;} .atlet-vrstica-front { z-index: 2; transform: rotateY(0deg); } .atlet-vrstica-back { transform: rotateY(180deg); background: radial-gradient(circle at center, #111d35 0%, #050a18 100%); padding: 15px; justify-content: space-between; align-items: center; z-index: 1; border-color: #1e3a5f !important; border-width: 3px !important; } .atlet-mini-slika { position: absolute; top: 0; left: 0; width: 100%; height: 215px; background-size: cover; background-position: top center; border-bottom: 2px solid rgba(255,255,255,0.1);} /* Dokler slika ni naložena, kartica nežno utripa (skeleton) - uporabnik vidi, da se nekaj dogaja, namesto praznega okvirja, ki deluje kot napaka. */ .atlet-mini-slika:not(.slika-nalozena) { animation: skeletonUtrip 1.5s ease-in-out infinite; } @keyframes skeletonUtrip { 0%, 100% { background-color: #101a2e; } 50% { background-color: #17253d; } } .atlet-mini-slika.slika-nalozena { animation: slikaVstop 0.5s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes slikaVstop { from { opacity: 0.15; filter: blur(8px); } to { opacity: 1; filter: none; } } /* STAROSTNI PRESKOK: športnik, čigar rezultati bi zdržali med starejšo generacijo. Znak stoji POD škatlico z OVR, kjer je prostor že tako prazen - ne posega ne v fotografijo ne v značke. */ .starost-znak { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; background: rgba(6, 24, 14, 0.72); border: 1px solid rgba(46, 204, 113, 0.45); border-radius: 20px; padding: 2px 7px; cursor: help; box-shadow: 0 1px 9px -5px #2ecc71; } .starost-znak i { font-size: 8px; color: #2ecc71; } .starost-znak span { font-size: 8px; font-weight: 900; letter-spacing: 0.7px; text-transform: uppercase; color: #2ecc71; white-space: nowrap; } .starost-znak-mini { padding: 1px 5px; margin-top: 3px; } .starost-znak-mini i, .starost-znak-mini span { font-size: 7px; letter-spacing: 0.4px; } @keyframes starostUtrip { 0%, 100% { box-shadow: 0 1px 9px -5px #2ecc71; } 50% { box-shadow: 0 1px 16px -3px #2ecc71; } } .starost-znak { animation: starostUtrip 2.6s ease-in-out infinite; } body.exporting .starost-znak { animation: none !important; } .mini-ovr-ovoj { position: absolute; top: 8px; left: 8px; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; } .mini-ovr-box { position: relative; background: #000; color: #fff; border: 1.5px solid #fff; border-radius: 6px; padding: 2px 8px 4px 8px; z-index: 10; display:flex; flex-direction:column; align-items:center; line-height: 1;} .mini-ovr-val { font-weight: 900; font-size: 20px; font-style: italic; color: var(--rang-barva, #fff); text-shadow: 0 0 12px color-mix(in srgb, var(--rang-barva, #fff) 55%, transparent); } .mini-mode-text { font-size: 7px; color: #a0aec0; margin-top: 1px; font-weight: 900; text-transform: uppercase;} .mini-znacke-kontejner { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 10;} .mini-znacka-krog { width: 22px; height: 22px; border-radius: 50%; background: #000; border: 1.5px solid currentColor; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 3px currentColor; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mini-znacka-krog:hover { transform: scale(1.35); z-index: 30; } .mini-znacka-krog i { font-size: 10px; color: currentColor; } .atlet-vrstica-info { position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; padding: 12px 15px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center; background: #0b1120; backface-visibility: hidden;} .atlet-vrstica-ime { font-weight: 900; font-size: 18px; color: #fff; text-transform: uppercase; width: 95%; margin: 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-wrap: break-word; line-height: 1.1; border-bottom: 1.5px solid rgba(255,255,255,0.1); padding-bottom: 4px;} .atlet-vrstica-rank { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; margin: 0;} .atlet-vrstica-detajli { color: #a0aec0; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; width: 100%; margin: 0 auto; display: block;} .mini-stat-panel { display: flex; justify-content: center; gap: 14px; width: 100%; padding-top: 2px;} .mini-ikona-box { display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.2s; backface-visibility: hidden;} .mini-ikona-box:hover { transform: scale(1.15); } .mini-ikona-img { font-size: 15px; margin-bottom: 3px;} .mini-ikona-val { font-size: 17px; font-weight: 900; color: #fff;} .mini-chart-container { width: 100%; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 8px;} .atlet-vrstica-akcije { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; position: relative; z-index: 6;} .btn-mali { flex: 1; padding: 10px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 11px; transition: all 0.2s;} .btn-poglej { background: #4facfe; color: #000; } .btn-uredi { background: #f1c40f; color: #000; } .btn-brisi { background: #d63031; color: #fff; } .btn-toggle-compare { background: transparent; border: 2px solid #f1c40f; color: #f1c40f; font-weight: 900; padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s;} .btn-toggle-compare.active { background: #f1c40f; color: #000; box-shadow: 0 0 15px rgba(241,196,15,0.5); } .btn-run-compare { background: linear-gradient(45deg, #00f2fe, #4facfe); border: none; color: #000; font-weight: 900; padding: 8px 15px; border-radius: 8px; cursor: pointer; display: none; box-shadow: 0 0 15px rgba(0,242,254,0.6);} .btn-toggle-delete { background: transparent; border: 2px solid #d63031; color: #d63031; font-weight: 900; padding: 8px 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s;} .btn-toggle-delete.active { background: #d63031; color: #fff; box-shadow: 0 0 15px rgba(214,48,49,0.5); } .btn-run-delete { background: #d63031; border: none; color: #fff; font-weight: 900; padding: 8px 15px; border-radius: 8px; cursor: pointer; box-shadow: 0 0 15px rgba(214,48,49,0.6); opacity: 0.5; } body.delete-mode #panelBaza .atlet-vrstica-container::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); border-radius: 12px; z-index: 20; pointer-events: none; transition: 0.3s; } body.delete-mode #panelBaza .atlet-vrstica-container:hover::after { background: rgba(214,48,49,0.2); } body.delete-mode #panelBaza .kartica-za-brisanje::after { content: '🗑️'; display:flex; justify-content:center; align-items:center; font-size: 56px; position: absolute; inset: 0; background: rgba(214,48,49,0.18); border-radius: 12px; border: 3px solid #d63031; z-index: 30; pointer-events: none; text-shadow: 0 0 20px rgba(0,0,0,0.9);} body.compare-mode #panelBaza .atlet-vrstica-container::after, body.compare-mode #panelLestvica .atlet-vrstica-container::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); border-radius: 12px; z-index: 20; pointer-events: none; transition: 0.3s; } body.compare-mode #panelBaza .atlet-vrstica-container:hover::after, body.compare-mode #panelLestvica .atlet-vrstica-container:hover::after { background: rgba(0,0,0,0.2); } body.compare-mode #panelBaza .kartica-izbrana::after, body.compare-mode #panelLestvica .kartica-izbrana::after { content: '✅'; display:flex; justify-content:center; align-items:center; font-size: 60px; color:#00f2fe; position: absolute; inset: 0; background: rgba(0, 242, 254, 0.1); border-radius: 12px; border: 3px solid #00f2fe; z-index: 30; pointer-events: none; text-shadow: 0 0 20px rgba(0,0,0,0.9);} .compare-modal-content { display: flex; justify-content: center; align-items: center; width: 100%; gap: 30px; flex-wrap: wrap;} .compare-modal-card { width: 260px; height: 400px; display: block; flex-shrink: 0;} /* RAW STATS HUD */ /* Enoten podatkovni panel (meritve + telesna sestava) - prej so bili to trije ločeni plavajoči bloki, kar je delovalo razmetano. Zdaj so v enem okviru. */ /* ===== "POGLEJ" POP-UP: urejeni zavihki ===== */ .modal-tabs-bar { display: inline-flex; gap: 4px; background: rgba(0,0,0,0.45); border: 1px solid #1e3a5f; border-radius: 30px; padding: 4px; position: relative; z-index: 3005; } .modal-tab-btn { padding: 9px 22px; border-radius: 25px; background: transparent; color: #a0aec0; border: none; font-weight: 900; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; font-family: 'Montserrat', sans-serif; } .modal-tab-btn:hover { color: #fff; } .modal-tab-btn.active { background: #4facfe; color: #0b1120; box-shadow: 0 0 12px rgba(79,172,254,0.45); } .modal-utility-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; z-index: 3005; } .modal-chip { padding: 8px 16px; border-radius: 25px; background: transparent; font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.25s; font-family: 'Montserrat', sans-serif; } .modal-chip-porocilo { background: rgba(108,92,231,0.15); border: 1px solid rgba(108,92,231,0.5); color: #b8b0ff; } .modal-chip-porocilo:hover { background: rgba(108,92,231,0.28); color: #fff; } /* ===== "POGLEJ" POP-UP: urejeni zavihki (konec) ===== */ .podatki-panel { width: 100%; max-width: 320px; background: rgba(0,0,0,0.35); border: 1px solid #1e3a5f; border-radius: 14px; padding: 14px; } .podatki-panel-naslov { font-size: 10px; font-weight: 900; color: #4facfe; text-transform: uppercase; letter-spacing: 1.5px; text-align: center; margin-bottom: 12px; } .podatki-panel-locnica { height: 1px; background: rgba(255,255,255,0.07); margin: 12px 0; } /* Enakomerna mreža 3 stolpcev: prej je flex:1 1 30% raztegnil zadnji dve škatli v neenako širino (3+2 vzorec z različnimi širinami), kar je izgledalo neurejeno. */ .raw-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .raw-stat-box { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s, border-color 0.2s;} .raw-stat-box:hover { transform: translateY(-2px); border-color: rgba(79,172,254,0.4); } .raw-stat-top { display: flex; align-items: center; gap: 4px; color: #a0aec0; font-size: 8.5px; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; text-align: center; } .raw-stat-val { font-size: 15px; font-weight: 900; color: #fff; margin-bottom: 6px; display: flex; align-items: baseline; gap: 2px;} .raw-stat-val span { font-size: 9px; color: #4facfe; } .raw-bar-bg { width: 100%; height: 3px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; } .raw-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease-out, background 0.5s ease-out; } /* ============ FAZA A: NAPREDEK / IN-FORM / LEVEL UP ============ */ .napredek-rang { width: 100%; max-width: 320px; background: rgba(0,0,0,0.35); border: 1px solid #1e3a5f; border-radius: 12px; padding: 10px 14px; } .napredek-rang-txt { font-size: 10.5px; font-weight: 800; color: #a0aec0; text-align: center; margin-bottom: 7px; letter-spacing: 0.3px; } .napredek-rang-txt b { color: #fff; } .napredek-rang-bg { width: 100%; height: 7px; background: rgba(255,255,255,0.08); border-radius: 5px; overflow: hidden; } .napredek-rang-fill { height: 100%; border-radius: 5px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .napredek-rang-max { font-size: 10.5px; font-weight: 900; color: #ff9f43; text-align: center; letter-spacing: 0.5px; } .napredek-opomba-local { font-size: 9px; color: #5a6a85; text-align: center; margin-top: 6px; font-weight: 600; } /* IN-FORM: športnik z največjim skokom OVR - ognjen, utripajoč okvir */ /* ===== PRELEVITEV RANGA (rank up) ===== Namesto konfetov: kartica se "prelevi" - vsrka se, blisne v barvi novega ranga, iz nje se razširi obroč, rob zažari. Vse v barvi ranga (--rang-barva). */ @keyframes prelevitevKartica { 0% { transform: scale(1); } 18% { transform: scale(0.955); filter: brightness(0.75) saturate(0.6); } 34% { transform: scale(1.075); filter: brightness(2.3) saturate(1.5); } 52% { transform: scale(0.99); filter: brightness(1.15); } 70% { transform: scale(1.02); filter: brightness(1.35); } 100% { transform: scale(1); filter: brightness(1); } } .prelevitev { animation: prelevitevKartica 1.5s cubic-bezier(0.34, 1.4, 0.5, 1) both; } /* Sij v barvi ranga, ki naraste in zbledi */ @keyframes prelevitevSij { 0% { opacity: 0; } 30% { opacity: 0; } 42% { opacity: 1; box-shadow: 0 0 45px 12px var(--rang-barva, #4facfe), inset 0 0 40px var(--rang-barva, #4facfe); } 100% { opacity: 0; box-shadow: 0 0 0 0 var(--rang-barva, #4facfe); } } .prelevitev-sij { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 60; opacity: 0; animation: prelevitevSij 1.6s ease-out both; } /* Udarni obroč, ki se razširi iz kartice */ @keyframes prelevitevObroc { 0% { transform: scale(0.85); opacity: 0; border-width: 3px; } 36% { opacity: 0.9; } 100% { transform: scale(1.55); opacity: 0; border-width: 1px; } } .prelevitev-obroc { position: absolute; inset: -6px; border-radius: 16px; border: 3px solid var(--rang-barva, #4facfe); pointer-events: none; z-index: 59; opacity: 0; animation: prelevitevObroc 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .prelevitev-obroc.zamik { animation-delay: 0.22s; } /* Naziv novega ranga poskoči in zažari */ @keyframes prelevitevRang { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(0.8); opacity: 0.25; } 48% { transform: scale(1.35); opacity: 1; text-shadow: 0 0 22px var(--rang-barva, #4facfe); letter-spacing: 5px; } 100% { transform: scale(1); opacity: 1; text-shadow: none; } } .prelevitev-rang { animation: prelevitevRang 1.5s cubic-bezier(0.34, 1.3, 0.5, 1) both; display: inline-block; } /* Napis "NOV RANG" */ @keyframes prelevitevNapis { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); } 35% { opacity: 1; transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -14px) scale(1); } } .prelevitev-napis { position: absolute; top: -16px; left: 50%; z-index: 61; padding: 4px 16px; border-radius: 20px; font-size: 9.5px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; pointer-events: none; color: #050a18; background: var(--rang-barva, #4facfe); box-shadow: 0 3px 16px var(--rang-barva, #4facfe); animation: prelevitevNapis 2.1s ease-out both; } /* Manjši napredek BREZ spremembe ranga - samo nežen utrip v barvi ranga */ @keyframes napredekUtrip { 0%, 100% { transform: scale(1); filter: brightness(1); } 45% { transform: scale(1.07); filter: brightness(1.55) drop-shadow(0 0 12px var(--rang-barva, #4facfe)); } } .napredek-utrip { animation: napredekUtrip 1s ease-out; } /* ===== "POGLEJ": klik za obrat kartice (fizični občutek prave kartice) ===== Nagib (tilt) je na ZUNANJEM ovoju, obračanje na NOTRANJEM - če bi bila oba na istem elementu, bi se transformaciji pobili. */ .poglej-flip { width: 320px; height: 480px; position: relative; transform-style: preserve-3d; cursor: pointer; transition: transform 0.75s cubic-bezier(0.22, 1, 0.3, 1); } .poglej-flip.obrnjena { transform: rotateY(180deg); } .poglej-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; } /* HRBTNA STRAN kartice - namenoma PRAZNA in umirjena, kot pri pravih zbirateljskih karticah: monogram, znamka, identifikacija. Nobenih grafov ali podvojenih podatkov (meritve so že v panelu pod kartico). Barve se v celoti ravnajo po rangu. */ .poglej-back { transform: rotateY(180deg); background: #0b1120; border: 3px solid; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 18px 14px; } /* Svetloba kartice: mehak žarek v barvi ranga, ki prihaja iz kota - skozenj "sveti" monogram. Brez koncentričnih krogov (delovali so nalepljeno). */ .kb-vzorec { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 78% 34%, var(--rang-barva, #4facfe) 0%, transparent 58%), radial-gradient(ellipse 90% 70% at 12% 88%, var(--rang-barva, #4facfe) 0%, transparent 62%), repeating-linear-gradient(112deg, rgba(255,255,255,0.028) 0px, rgba(255,255,255,0.028) 1px, transparent 1px, transparent 11px); opacity: 0.42; mix-blend-mode: screen; } .kb-glava { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 9px; } .kb-rang { font-family: 'Chakra Petch', 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } .kb-ovr { font-family: 'Chakra Petch', 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; font-style: italic; line-height: 1; } /* Monogram: OB STRANI, velik, prosojen - svetloba kartice proseva skozenj. Pisava Chakra Petch: kotna, s prisekanimi vogali - športna in ostra, ne zaobljena. */ .kb-monogram-ovoj { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; pointer-events: none; overflow: hidden; } .kb-monogram { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-style: italic; font-size: 128px; line-height: 0.9; letter-spacing: -3px; margin-left: -12px; color: transparent; /* Obris dobi rahel pridih barve ranga - napis se s kartico poveže, a ostane umirjen */ -webkit-text-stroke: 1.5px color-mix(in srgb, var(--rang-barva, #4facfe) 42%, rgba(255,255,255,0.22)); /* Notranjost je prosojna in rahlo obarvana z rangom, zato skoznjo proseva svetloba kartice */ background: linear-gradient(155deg, color-mix(in srgb, var(--rang-barva, #4facfe) 26%, transparent) 0%, rgba(255,255,255,0.07) 45%, color-mix(in srgb, var(--rang-barva, #4facfe) 10%, transparent) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rang-barva, #4facfe) 45%, transparent)); transform: rotate(-90deg) translateX(-6px); transform-origin: center; white-space: nowrap; } /* Pokončni napis ob desnem robu - dopolni monogram, doda "tehnični" značaj */ .kb-navpicni { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; z-index: 1; font-family: 'Chakra Petch', sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: 7px; text-transform: uppercase; color: rgba(255,255,255,0.13); white-space: nowrap; pointer-events: none; } .kb-noga { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; } .kb-znamka { font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 2px; color: #fff; font-style: italic; } .kb-znamka span { color: var(--rang-barva, #4facfe); } .kb-datum { font-family: 'Chakra Petch', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 2px; color: #5a6a85; } .poglej-namig { font-size: 9.5px; font-weight: 800; color: #5a6a85; letter-spacing: 1px; text-transform: uppercase; text-align: center; } .poglej-namig { margin-top: 12px; } /* ===== PRELEVITEV RANGA: samostojno pop-up okno (kot v igrah) ===== */ #rankUpOverlay { position: fixed; inset: 0; background: rgba(2,5,14,0.92); z-index: 8000; display: none; } #rankUpModal { position: fixed; inset: 0; z-index: 8001; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px; pointer-events: none; } #rankUpModal .ru-vsebina { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .ru-naslov { font-size: 13px; font-weight: 900; letter-spacing: 5px; text-transform: uppercase; color: #a0aec0; opacity: 0; animation: ruNaslov 0.8s ease-out 0.15s both; } @keyframes ruNaslov { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .ru-oder { position: relative; width: 320px; height: 480px; perspective: 1200px; } /* Perspektiva mora biti na NEPOSREDNEM staršu obračajočega elementa, sicer je obrat ploščat. */ .ru-kartica { position: absolute; inset: 0; perspective: 1200px; } .ru-nova .poglej-flip { cursor: pointer; } /* Stara kartica: obledi in se vsrka */ @keyframes ruStara { 0% { opacity: 1; transform: scale(1) rotateY(0deg); filter: saturate(1); } 45% { opacity: 1; transform: scale(0.93) rotateY(-8deg); filter: saturate(0.25) brightness(0.55); } 70% { opacity: 0; transform: scale(0.86) rotateY(-16deg); filter: saturate(0) brightness(0.3); } 100% { opacity: 0; transform: scale(0.86); } } .ru-stara { animation: ruStara 2.4s cubic-bezier(0.4, 0, 0.2, 1) both; z-index: 2; } /* Nova kartica: eksplodira iz svetlobe */ @keyframes ruNova { 0% { opacity: 0; transform: scale(0.7); filter: brightness(6) blur(14px); } 55% { opacity: 0; transform: scale(0.7); filter: brightness(6) blur(14px); } 68% { opacity: 1; transform: scale(1.14); filter: brightness(3) blur(3px); } 80% { transform: scale(0.98); filter: brightness(1.4) blur(0); } 90% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); } } .ru-nova { animation: ruNova 2.6s cubic-bezier(0.25, 1, 0.3, 1) both; z-index: 3; } /* Svetlobni izbruh v barvi novega ranga */ @keyframes ruBlisk { 0%, 52% { opacity: 0; transform: scale(0.5); } 64% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.6); } } .ru-blisk { position: absolute; inset: -60px; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, var(--rang-barva, #4facfe) 0%, transparent 62%); animation: ruBlisk 2.6s ease-out both; } /* Udarni obroči */ @keyframes ruObroc { 0%, 55% { opacity: 0; transform: scale(0.8); } 66% { opacity: 0.95; } 100% { opacity: 0; transform: scale(2.1); } } .ru-obroc { position: absolute; inset: -10px; border-radius: 22px; border: 3px solid var(--rang-barva, #4facfe); z-index: 4; pointer-events: none; opacity: 0; animation: ruObroc 2.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; } .ru-obroc.z2 { animation-delay: 0.16s; } .ru-obroc.z3 { animation-delay: 0.32s; } /* Naziv novega ranga */ @keyframes ruRangIme { 0%, 62% { opacity: 0; transform: scale(1.5); letter-spacing: 22px; filter: blur(8px); } 78% { opacity: 1; transform: scale(1); letter-spacing: 7px; filter: blur(0); } 100% { opacity: 1; transform: scale(1); letter-spacing: 6px; } } .ru-rang-ime { font-size: 30px; font-weight: 900; text-transform: uppercase; color: var(--rang-barva, #4facfe); text-shadow: 0 0 28px var(--rang-barva, #4facfe); animation: ruRangIme 2.7s cubic-bezier(0.2, 0.9, 0.3, 1) both; text-align: center; } .ru-podnapis { font-size: 11px; font-weight: 800; color: #a0aec0; letter-spacing: 2px; text-transform: uppercase; opacity: 0; animation: ruNaslov 0.7s ease-out 2.1s both; text-align: center; } .ru-gumb-ovoj { opacity: 0; animation: ruNaslov 0.6s ease-out 2.4s both; } body.exporting #rankUpOverlay, body.exporting #rankUpModal { display: none !important; } /* ============ FAZA B: HOLOGRAFSKI FOIL + 3D TILT ============ */ /* Foil (holografski lesk) je STOPNJEVAN po rangu - vsaka kartica ga ima, a redkejši rang pomeni močnejši in bolj mavričen lesk. Nižji rangi dobijo le nežen srebrn odsev. Jakost in način mešanja vodita spremenljivki --foil-op in --foil-blend. */ .foil-plast { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; z-index: 25; opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: var(--foil-blend, soft-light); background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0) 62%), linear-gradient(115deg, transparent 24%, rgba(255,120,190, var(--foil-barva, 0.10)) 36%, rgba(255,225,150, var(--foil-barva, 0.10)) 45%, rgba(150,255,225, var(--foil-barva, 0.10)) 55%, rgba(140,190,255, var(--foil-barva, 0.10)) 64%, transparent 78%); background-size: 100% 100%, 240% 240%; background-position: 0 0, calc(var(--mx, 50%) * -0.6 + 100%) calc(var(--my, 50%) * -0.6 + 100%); } .ima-foil:hover .foil-plast { opacity: var(--foil-op, 0.3); } /* HRBTNI FOIL (Poglej / napredovanje): stalno viden in "živ" - subtilno se premika sam, da mavrica utripa tudi brez miške (kot pri napredovanju). Ob premiku miške sledi kurzorju prek --mx/--my. */ .poglej-back .foil-plast-back { opacity: var(--foil-op, 0.4) !important; animation: foilZiv 5s ease-in-out infinite; } @keyframes foilZiv { 0% { filter: brightness(0.9) saturate(1); } 50% { filter: brightness(1.3) saturate(1.4); } 100% { filter: brightness(0.9) saturate(1); } } /* Ko je kartica obrnjena, foil ostane viden (klik-obrat v Poglej). */ .poglej-flip.obrnjena .foil-plast-back { opacity: var(--foil-op, 0.45) !important; } /* Stopnje foila (višji rang = močnejši, bolj mavričen lesk) */ .foil-t1 { --foil-op: 0.30; --foil-barva: 0.05; --foil-blend: soft-light; } /* Iron-Silver */ .foil-t2 { --foil-op: 0.45; --foil-barva: 0.09; --foil-blend: soft-light; } /* Gold-Platinum */ .foil-t3 { --foil-op: 0.62; --foil-barva: 0.19; --foil-blend: color-dodge; } /* Diamond-Prime */ .foil-t4 { --foil-op: 0.80; --foil-barva: 0.30; --foil-blend: color-dodge; } /* Elite / G99 */ /* Ovoj, ki posluša miško (uporabljen za foil in/ali tilt) */ .efekt-ovoj { position: relative; } /* 3D tilt uporabljamo SAMO na velikih karticah, ki se NE obračajo (Moja Kartica, "Poglej" okno). Kartice v Bazi imajo na hover že rotateY(180deg) za obračanje - dodaten nagib bi to transformacijo pobil in obračanje bi se pokvarilo. */ .tilt-ovoj { perspective: 1100px; position: relative; } .tilt-tarca { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; will-change: transform; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); } .tilt-ovoj:hover .tilt-tarca { transition: transform 0.07s linear; } /* Med izvozom v PNG te efekte izklopimo - html2canvas ne zna izrisati 3D transformacij, mix-blend-mode in animacij, zato bi se slika popačila ali izrisala napačno. Uporabljamo obstoječi razred 'exporting', ki ga izvozne funkcije že nastavljajo. */ body.exporting .foil-plast { display: none !important; } body.exporting .tilt-tarca { --tilt-x: 0deg; --tilt-y: 0deg; transition: none !important; } body.exporting .prelevitev, body.exporting .prelevitev-rang, body.exporting .napredek-utrip { animation: none !important; } body.exporting .prelevitev-sij, body.exporting .prelevitev-obroc, body.exporting .prelevitev-napis { display: none !important; } /* ============ ZNAKI ČASTI (posebni dosežki) ============ OBLIKOVALSKO PRAVILO: rob in sij kartice pripadata IZKLJUČNO rangu. Prej je čast prevzela rob (zlat okvir čez G99 kartico) - dve močni barvi sta si konkurirali in kartica je izgubila svojo identiteto. Zdaj ima čast SVOJ kanal: majhen emblem, pripet na vrh kartice, kot medalja. Kartica ostane kartica svojega ranga. */ /* ZNAK ČASTI: prosojen stekleni okvirček TIK POD OVR, ob zgornjem levem robu. Sedi v prostoru, ki na kartici tako ali tako pripada oznakam (OVR), zato fotografije ne trga in ne tekmuje z rangom. Brez ikon - te so pridržane značkam, sicer bi se pomena mešala. Rob in sij kartice ostajata izključno RANGU. */ /* Znak časti je na VRHU KARTICE, po SREDINI - simetrično in uravnoteženo. Ne posega v OVR (levo) ne v značke (desno), fotografije pa skorajda ne zakriva, ker je prosojen in leži tik ob zgornjem robu. */ /* Manjši, čistejši znak - bere se kot tanka oznaka, ne kot škatla. Manj polnila, subtilnejši rob, drobnejši napis, da zavzame čim manj prostora na vrhu kartice. */ .cast-okvircek { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); z-index: 20; display: inline-flex; align-items: center; justify-content: center; max-width: 150px; overflow: hidden; padding: 2px 9px; border-radius: 20px; background: rgba(10, 16, 30, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid color-mix(in srgb, var(--cast-barva) 40%, transparent); box-shadow: 0 1px 9px -5px var(--cast-barva); cursor: help; transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .cast-okvircek span { font-size: 8px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--cast-barva); text-shadow: 0 0 7px color-mix(in srgb, var(--cast-barva) 45%, transparent); white-space: nowrap; transition: letter-spacing 0.25s; } .cast-okvircek:hover { border-color: color-mix(in srgb, var(--cast-barva) 75%, transparent); box-shadow: 0 1px 15px -4px var(--cast-barva); transform: translateX(-50%) translateY(0.5px); } .cast-okvircek:hover span { letter-spacing: 1.1px; } .cast-velik { top: 9px; padding: 3px 12px; max-width: 200px; } .cast-velik span { font-size: 9.5px; letter-spacing: 0.9px; } /* Samo najredkejši znak (V formi - eden v celotni bazi) nežno diha. */ @keyframes castUtrip { 0%, 100% { box-shadow: 0 1px 9px -5px var(--cast-barva); } 50% { box-shadow: 0 1px 16px -3px var(--cast-barva); } } .cast-glasen { animation: castUtrip 2.4s ease-in-out infinite; } body.exporting .cast-glasen { animation: none !important; } /* Med izvozom se spletna pisava v klonu pogosto ne naloži in nadomestna je širša, zato je napis ob max-width + overflow:hidden ostal odrezan (npr. "...ANTA"). Med izvozom zato omejitev širine odpravimo - raje širša oznaka kot odrezan napis. */ body.exporting .cast-okvircek { backdrop-filter: none; max-width: none !important; overflow: visible !important; } /* ===== IN-FORM: plast čez okvir, NE zamenjava ranga ===== Rang (barva okvirja) meri absolutno raven, In-Form pa trenutni zagon. Zato In-Form ne spremeni barve okvirja - doda ognjen sij, tlečo črto ob robu in trak. BRONZE In-Form ostane bronast; G99 TIER + In-Form je najredkejša kombinacija. POZOR: kartice imajo overflow:hidden, zato mora biti vse ZNOTRAJ kartice. Sij zato ni psevdo-element (ta bi bil odrezan), ampak box-shadow. */ /* POZOR: 'position: relative' je bil tu odstranjen. Ta razred pade tudi na .atlet-vrstica-front in .poglej-front, ki sta 'position: absolute'. Ker ima .je-in-form enako specifičnost, a stoji NIŽE v datoteki, je prepisal absolutno postavitev in ploskev je padla iz 3D sklada -> kartica je ob obratu izginila. */ .je-in-form { box-shadow: 0 0 26px 1px rgba(255, 122, 0, 0.5), 0 0 60px -12px rgba(255, 94, 0, 0.55); animation: inFormDih 2.8s ease-in-out infinite; } /* V BAZI se kartica fizično obrača (transform-style: preserve-3d + backface-visibility: hidden). Če ima obračalna ploskev lastno animacijo, jo brskalnik promovira v svojo kompozitno plast in ob obratu ostane skrita. Zato sij v bazi nosi OVOJ (.atlet-vrstica-container), ki se NE obrača - tako je viden na obeh straneh in ničesar ne podre. */ .atlet-vrstica-container.in-form-ovoj { border-radius: 12px; box-shadow: 0 0 26px 1px rgba(255, 122, 0, 0.5), 0 0 60px -12px rgba(255, 94, 0, 0.55); animation: inFormDih 2.8s ease-in-out infinite; } @keyframes inFormDih { 0%, 100% { box-shadow: 0 0 20px 0px rgba(255, 122, 0, 0.38), 0 0 52px -14px rgba(255, 94, 0, 0.45); } 50% { box-shadow: 0 0 32px 2px rgba(255, 122, 0, 0.62), 0 0 68px -8px rgba(255, 94, 0, 0.6); } } /* Tleča ognjena črta tik ob notranjem robu - vidi se poleg barve ranga, je ne skrije. */ .je-in-form::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; border: 2px solid transparent; background: linear-gradient(115deg, rgba(255,94,0,0) 22%, rgba(255,140,0,0.85) 42%, rgba(255,214,102,0.95) 50%, rgba(255,140,0,0.85) 58%, rgba(255,94,0,0) 78%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background-size: 260% 100%; animation: inFormPotuje 3.4s linear infinite; } @keyframes inFormPotuje { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } } /* OPOMBA: ločene oznake "IN FORM" na kartici NI. In-Form nosita samo ognjen OKVIR (sij) in obstoječi znak časti "V FORMI" nad kartico. Dvojni napis je kartico preveč natrpal. */ /* Med izvozom v PNG animacije zamrznemo (html2canvas jih ne zna izrisati). */ body.exporting .je-in-form, body.exporting .in-form-ovoj { animation: none; } body.exporting .je-in-form::before { animation: none; background-position: 50% 0; } /* ===== IZZIVI ===== */ .izzivi-ovoj { width: 100%; max-width: 720px; margin: 0 auto; padding-bottom: 40px; } /* ===== SKENER ZAPESTNIC ===== */ .skener-ozadje { position: fixed; inset: 0; z-index: 4000; background: rgba(3,6,15,0.92); display: none; align-items: center; justify-content: center; padding: 20px; } .skener-ozadje.viden { display: flex; } .skener-okno { width: 100%; max-width: 420px; background: #0b1120; border: 1px solid #1e3a5f; border-radius: 18px; padding: 18px; } .skener-naslov { font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #fff; text-align: center; margin-bottom: 4px; } .skener-podnaslov { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #5a6a85; text-align: center; margin-bottom: 14px; } .skener-slika { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #050a18; } .skener-slika video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Okvir pomaga uporabniku nastaviti razdaljo - brez njega ljudje kodo držijo predaleč. */ .skener-okvir { position: absolute; inset: 18%; border: 2px solid rgba(79,172,254,0.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(3,6,15,0.45); pointer-events: none; } .skener-stanje { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #a0aec0; text-align: center; margin-top: 12px; min-height: 34px; } .skener-stanje b { color: #4facfe; } .skener-gumbi { display: flex; gap: 8px; margin-top: 12px; } .skener-gumbi button { flex: 1; } .skener-povezi { display: none; margin-top: 12px; } .skener-povezi.viden { display: block; } .skener-povezi input { width: 100%; background: #050a18; color: #cfd8e6; border: 1px solid #1e3a5f; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 8px; } /* ===== ZASEBNE SOBE ===== */ .sobe-naslov { font-size: 22px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-align: center; } .sobe-podnaslov { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #5a6a85; text-align: center; margin: 6px 0 18px; } .sobe-orodja { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; } .sobe-polje { display: flex; gap: 8px; } .sobe-polje input { background: #050a18; color: #cfd8e6; border: 1px solid #1e3a5f; border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 700; width: 165px; } .btn-soba { background: linear-gradient(90deg, #4facfe, #00f2fe); color: #03060f; border: none; border-radius: 10px; padding: 9px 16px; cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; } .btn-soba-drugotni { background: rgba(255,255,255,0.07); color: #a0aec0; border: 1px solid #1e3a5f; } .btn-soba-odhod { background: rgba(255,118,117,0.12); color: #ff7675; border: 1px solid rgba(255,118,117,0.4); } .soba-zavihki { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; } .soba-zavihek { background: rgba(255,255,255,0.05); border: 1px solid #1e3a5f; border-radius: 20px; padding: 7px 14px; cursor: pointer; color: #a0aec0; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; } .soba-zavihek.aktiven { background: rgba(79,172,254,0.16); border-color: #4facfe; color: #fff; } .soba-zavihek span { color: #4facfe; font-weight: 900; margin-left: 6px; } .soba-glava { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(0,0,0,0.35); border: 1px solid #1e3a5f; border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; } .soba-naslov-ime { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: 1px; } .soba-koda { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #4facfe; margin-top: 4px; } .soba-glava-gumbi { display: flex; gap: 8px; } .soba-lestvica { display: flex; flex-direction: column; gap: 6px; } .soba-vrstica { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 12px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 11px 14px; cursor: pointer; } .soba-vrstica:hover { border-color: #4facfe; } .soba-vrstica.jaz { border-color: rgba(79,172,254,0.55); background: rgba(79,172,254,0.08); } .soba-vrstica.brez { cursor: default; opacity: 0.65; } .soba-vrstica.brez:hover { border-color: rgba(255,255,255,0.08); } .soba-mesto { font-size: 15px; font-weight: 900; color: #5a6a85; text-align: center; } .soba-ime { font-size: 13px; font-weight: 800; color: #e8eef8; } .soba-ime b { color: #4facfe; font-size: 11px; } .soba-gen { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #5a6a85; } .soba-ovr { font-size: 20px; font-weight: 900; min-width: 38px; text-align: right; } .soba-rek-naslov { font-size: 11px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #4facfe; text-align: center; margin: 22px 0 10px; } .soba-rek-pas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .soba-rek { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 135px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 10px; } .soba-rek-ime { display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: #a0aec0; } .soba-rek-val { font-size: 20px; font-weight: 900; color: #fff; line-height: 1; } .soba-rek-val span { font-size: 0.42em; font-weight: 800; color: #4facfe; margin-left: 3px; } .soba-rek-kdo { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #4facfe; text-align: center; } .izzivi-naslov { text-align: center; font-size: clamp(24px, 5vw, 38px); font-weight: 900; letter-spacing: 6px; background: linear-gradient(180deg, #fff 10%, #9ad9ff 50%, #2a7fb8 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } .izzivi-podnaslov { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 4px; color: #5c7a94; text-transform: uppercase; margin: 5px 0 22px; } .izzivi-ustvari { background: rgba(255,255,255,0.03); border: 1px solid rgba(79,172,254,0.25); border-radius: 16px; padding: 16px; margin-bottom: 22px; } .izzivi-ustvari-naslov { font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #4facfe; text-transform: uppercase; margin-bottom: 12px; } .izzivi-ustvari-vrstica { display: flex; gap: 8px; flex-wrap: wrap; } .izzivi-select { flex: 1 1 150px; padding: 10px 12px; border-radius: 10px; font-weight: 700; font-size: 12px; background: #0d1526; color: #e2e8f0; border: 1px solid #1e3a5f; cursor: pointer; } .izzivi-gumb { flex: 0 0 auto; padding: 10px 20px; border-radius: 10px; cursor: pointer; border: none; background: linear-gradient(90deg, #4facfe, #00f2fe); color: #04121f; font-weight: 900; font-size: 12px; letter-spacing: 0.5px; } .izzivi-gumb:hover { filter: brightness(1.12); } .izzivi-namig { font-size: 10px; color: #5c6b82; font-weight: 600; margin-top: 9px; } .izzivi-opozorilo { background: rgba(253,203,110,0.08); border: 1px solid rgba(253,203,110,0.3); color: #fdcb6e; border-radius: 12px; padding: 14px; font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 20px; } .izzivi-seznam { display: flex; flex-direction: column; gap: 12px; } .izzivi-prazno { text-align: center; color: #5c6b82; font-weight: 700; padding: 34px 0; font-size: 13px; } .izz-kartica { background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(8,14,26,0.9)); border: 1px solid rgba(255,255,255,0.07); border-radius: 15px; padding: 14px; animation: slavaVstop 0.45s ease both; } .izz-kartica.razsojen { border-color: rgba(46,204,113,0.3); } .izz-glava { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } .izz-kategorija { font-size: 9.5px; font-weight: 900; letter-spacing: 2px; color: #7d8ca3; text-transform: uppercase; } .izz-brisi { background: transparent; border: none; color: #4a5568; cursor: pointer; font-size: 13px; padding: 2px 6px; } .izz-brisi:hover { color: #ff7675; } .izz-telo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .izz-stran { text-align: center; padding: 9px 5px; border-radius: 11px; transition: all 0.25s; } .izz-stran.vodi { background: rgba(46,204,113,0.1); box-shadow: inset 0 0 0 1px rgba(46,204,113,0.35); } .izz-ime { font-size: 12px; font-weight: 800; color: #e2e8f0; } .izz-ime b { color: #4facfe; font-weight: 900; } .izz-vrednost { font-size: 23px; font-weight: 900; font-style: italic; color: #fff; line-height: 1.15; } .izz-stran.vodi .izz-vrednost { color: #2ecc71; } .izz-izhodisce { font-size: 9px; font-weight: 700; color: #5c6b82; margin-top: 2px; } .izz-napredek { font-weight: 900; margin-left: 3px; } .izz-napredek.boljse { color: #2ecc71; } .izz-napredek.slabse { color: #ff7675; } .izz-proti { font-size: 11px; font-weight: 900; color: #3d4a61; letter-spacing: 1px; } .izz-stanje { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #5c6b82; text-transform: uppercase; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); } /* ===== IZZOVI KOLEGA: razsodba dvoboja ===== */ .izziv-ovoj { max-width: 620px; margin: 26px auto 0; animation: slavaVstop 0.5s ease both; } .izziv-glava { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; } .izziv-igralec { text-align: center; } .izziv-ime { font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 0.3px; } .izziv-ovr { font-size: 30px; font-weight: 900; font-style: italic; line-height: 1.1; color: var(--iz-barva, #4facfe); text-shadow: 0 0 14px var(--iz-barva, #4facfe); } .izziv-izid { text-align: center; padding: 0 6px; } .izziv-izid-stevilke { font-size: 26px; font-weight: 900; color: #e2e8f0; letter-spacing: 1px; } .izziv-izid-stevilke span { color: #4a5568; margin: 0 2px; } .izziv-izid-oznaka { font-size: 8px; font-weight: 800; letter-spacing: 2px; color: #5c6b82; text-transform: uppercase; } .izziv-tabela { display: flex; flex-direction: column; gap: 7px; } .izziv-vrstica { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 8px; background: rgba(255,255,255,0.03); border-radius: 11px; padding: 9px 8px; border: 1px solid rgba(255,255,255,0.05); } .izziv-stran { text-align: center; border-radius: 8px; padding: 5px 3px; transition: all 0.25s; } .izziv-stran.zmaga { background: rgba(46,204,113,0.1); box-shadow: inset 0 0 0 1px rgba(46,204,113,0.35); } .izziv-ocena { font-size: 20px; font-weight: 900; color: #cfd8e6; line-height: 1; } .izziv-stran.zmaga .izziv-ocena { color: #2ecc71; } .izziv-surovo { font-size: 9.5px; font-weight: 700; color: #5c6b82; margin-top: 2px; } .izziv-sredina { text-align: center; } .izziv-kategorija { font-size: 9px; font-weight: 900; letter-spacing: 1.2px; color: #8a9bb4; text-transform: uppercase; } .izziv-razlika { font-size: 10px; font-weight: 800; color: #4a5568; margin-top: 2px; } .izziv-zmagovalec { margin-top: 18px; text-align: center; padding: 16px; border-radius: 14px; border: 1px solid var(--zm-barva, #4facfe); background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), rgba(10,17,32,0.85)); box-shadow: 0 0 30px -12px var(--zm-barva, #4facfe); } .izziv-zmagovalec-oznaka { font-size: 9px; font-weight: 900; letter-spacing: 3px; color: #8a9bb4; text-transform: uppercase; } .izziv-zmagovalec-ime { font-size: 22px; font-weight: 900; color: var(--zm-barva, #4facfe); margin-top: 5px; text-shadow: 0 0 18px var(--zm-barva, #4facfe); } @media (max-width: 520px) { .izziv-ovr { font-size: 24px; } .izziv-ocena { font-size: 17px; } .izziv-kategorija { font-size: 8px; letter-spacing: 0.8px; } } /* ===== HALL OF FAME: muzej rekordov ===== */ .slava-ovoj { width: 100%; max-width: 940px; margin: 0 auto; padding: 6px 0 40px; } .slava-glava { text-align: center; margin-bottom: 28px; animation: slavaVstop 0.7s ease both; } .slava-naslov { font-size: clamp(26px, 6vw, 46px); font-weight: 900; letter-spacing: 6px; background: linear-gradient(180deg, #fff 10%, #ffe08a 45%, #c9962f 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 14px rgba(255, 200, 80, 0.3)); } .slava-podnaslov { font-size: 10px; font-weight: 800; letter-spacing: 5px; color: #8a7a52; text-transform: uppercase; margin-top: 6px; } .slava-crta { height: 1px; margin: 18px auto 0; max-width: 260px; background: linear-gradient(90deg, transparent, #c9962f, transparent); } /* Kralj: najvišji OVR vseh časov - osrednji eksponat */ .slava-kralj { position: relative; text-align: center; margin: 0 auto 34px; max-width: 380px; padding: 26px 20px 22px; border-radius: 20px; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), rgba(10,17,32,0.9)); border: 1px solid var(--kralj-barva, #4facfe); box-shadow: 0 0 46px -12px var(--kralj-barva, #4facfe), inset 0 1px 0 rgba(255,255,255,0.06); animation: slavaVstop 0.8s 0.1s ease both; } .slava-kralj-oznaka { font-size: 9px; font-weight: 900; letter-spacing: 3px; color: #8a9bb4; text-transform: uppercase; } /* Kraljeva kartica: fotografija v okvirju barve ranga, OVR spodaj levo */ .slava-kralj-kartica { position: relative; width: 178px; aspect-ratio: 1/1.18; margin: 14px auto 12px; border-radius: 14px; overflow: hidden; border: 2px solid var(--kralj-barva, #4facfe); box-shadow: 0 0 34px -10px var(--kralj-barva, #4facfe); background: linear-gradient(160deg, #12203a, #070d1c); } .slava-kralj-slika { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: opacity 0.5s; opacity: 0; } .slava-kralj-slika.ima-sliko { opacity: 1; } .slava-kralj-ovr { position: absolute; left: 9px; bottom: 8px; z-index: 2; font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: var(--kralj-barva, #4facfe); text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px var(--kralj-barva, #4facfe); } .slava-kralj-kartica::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(5,10,24,0.85) 100%); } /* Mini kartica na ploščici rekorda */ .slava-mini-kartica { position: relative; width: 100%; max-width: 120px; aspect-ratio: 1/1.18; margin: 10px auto; border-radius: 11px; overflow: hidden; border: 1.5px solid var(--mk-barva, #4facfe); box-shadow: 0 0 20px -8px var(--mk-barva, #4facfe); background: linear-gradient(160deg, #12203a, #070d1c); } .slava-mini-slika { position: absolute; inset: 0; background-size: cover; background-position: center top; transition: opacity 0.5s; opacity: 0; } .slava-mini-slika.ima-sliko { opacity: 1; } .slava-mini-kartica::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(5,10,24,0.85) 100%); } .slava-mini-ovr { position: absolute; left: 7px; bottom: 5px; z-index: 2; font-size: 25px; font-weight: 900; font-style: italic; line-height: 1; color: var(--mk-barva, #4facfe); text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 14px var(--mk-barva, #4facfe); } .slava-plosca:hover .slava-mini-kartica { box-shadow: 0 0 26px -6px var(--mk-barva, #4facfe); } .slava-kralj-ime { font-size: 21px; font-weight: 900; letter-spacing: 0.5px; color: #fff; } .slava-kralj-detajl { font-size: 11px; font-weight: 700; color: #6b7c94; margin-top: 4px; } .slava-kralj-gumb { margin-top: 16px; padding: 10px 22px; border-radius: 22px; cursor: pointer; background: transparent; border: 1px solid var(--kralj-barva, #4facfe); color: var(--kralj-barva, #4facfe); font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.25s; } .slava-kralj-gumb:hover { background: var(--kralj-barva, #4facfe); color: #04121f; } /* Ploščice rekordov po kategorijah */ .slava-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; } .slava-plosca { position: relative; overflow: hidden; cursor: pointer; text-align: center; padding: 18px 12px 16px; border-radius: 16px; background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(8,14,26,0.9)); border: 1px solid rgba(255,255,255,0.07); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s, border-color 0.28s; animation: slavaVstop 0.6s ease both; } .slava-plosca:hover { transform: translateY(-5px); border-color: var(--slava-barva, #4facfe); box-shadow: 0 12px 30px -10px var(--slava-barva, #4facfe); } .slava-plosca-ikona { font-size: 19px; color: var(--slava-barva, #4facfe); margin-bottom: 8px; } .slava-plosca-naslov { font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #7d8ca3; text-transform: uppercase; } .slava-plosca-naslov i { color: var(--slava-barva, #4facfe); margin-right: 3px; } .slava-plosca-vrednost { font-size: 25px; font-weight: 900; font-style: italic; color: #fff; margin: 2px 0 4px; line-height: 1; } .slava-plosca-vrednost span { font-size: 11px; font-style: normal; color: var(--slava-barva, #4facfe); margin-left: 3px; } .slava-plosca-locnica { height: 1px; margin: 11px 16%; background: rgba(255,255,255,0.08); } .slava-plosca-ime { font-size: 13px; font-weight: 800; color: #e2e8f0; } .slava-plosca-sezona { font-size: 9.5px; font-weight: 700; color: #5c6b82; margin-top: 3px; } .slava-noga { text-align: center; font-size: 10px; font-weight: 700; color: #445470; letter-spacing: 1px; margin-top: 26px; } .slava-prazno { text-align: center; color: #6b7c94; font-weight: 700; padding: 50px 0; } @keyframes slavaVstop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ===== JAVNI PROFIL: razkritje "kartica se odpre pred tabo" ===== Kartica se zavrti iz roba (kot da jo nekdo obrne proti tebi), ob koncu kratek blisk in obroč v barvi ranga. Drugačen občutek kot pri napredovanju. */ body.profil-vstop #viewCardContent { perspective: 1400px; position: relative; z-index: 2; } body.profil-vstop #viewCardContent { position: relative; } /* Animiramo SAMO kartico (njen ovoj), ne celotnega bloka s podatki - sicer bi lebdele in se svetile tudi meritve pod kartico. Ovoj uporabimo zato, ker ima .poglej-flip svoj transform za obračanje in bi ga animacija prepisala. */ body.profil-razkrij #viewCardModal .tilt-ovoj { display: block; animation: profilRazkritje 2.05s cubic-bezier(0.16, 0.84, 0.24, 1) 0.35s both, profilLebdenje 7s ease-in-out 2.5s infinite; transform-origin: center center; will-change: transform, filter, opacity; } /* Razkritje: SAMO transform + opacity (strojno pospešeno). Blur/brightness sta za brskalnik draga in povzročata zatikanje, zato ju v animaciji ne uporabljamo. */ @keyframes profilRazkritje { 0% { opacity: 0; transform: perspective(1400px) rotateY(-58deg) scale(0.9); } 22% { opacity: 0.85; transform: perspective(1400px) rotateY(-40deg) scale(0.925); } 48% { opacity: 1; transform: perspective(1400px) rotateY(-18deg) scale(0.975); } 70% { transform: perspective(1400px) rotateY(-4deg) scale(1.008); } 85% { transform: perspective(1400px) rotateY(2.5deg) scale(1.004); } 94% { transform: perspective(1400px) rotateY(-0.8deg) scale(0.999); } 100% { opacity: 1; transform: perspective(1400px) rotateY(0) scale(1); } } /* Hook: kartica po razkritju rahlo "diha" in se komaj zaznavno ziba - oko ostane na njej, a gibanje je tako mehko, da ne moti branja. */ @keyframes profilLebdenje { 0%, 100% { transform: perspective(1400px) rotateY(0deg) translateY(0) scale(1); } 25% { transform: perspective(1400px) rotateY(1.6deg) translateY(-5px) scale(1.004); } 50% { transform: perspective(1400px) rotateY(0deg) translateY(-7px) scale(1.006); } 75% { transform: perspective(1400px) rotateY(-1.6deg) translateY(-5px) scale(1.004); } } /* Počasen odsev, ki potuje čez KARTICO (ne čez podatke) - nevsiljiv "hook". */ body.profil-razkrij #viewCardModal .tilt-ovoj::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 40; border-radius: 18px; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.13) 47%, rgba(255,255,255,0.05) 52%, transparent 62%); background-size: 260% 100%; animation: profilOdsev 6s ease-in-out 3s infinite; } @keyframes profilOdsev { 0% { background-position: 190% 0; opacity: 0; } 12% { opacity: 1; } 48% { opacity: 1; } 60% { background-position: -60% 0; opacity: 0; } 100% { background-position: -60% 0; opacity: 0; } } /* Blisk in obroč v barvi ranga - sprožita se, ko se kartica poravna. */ .profil-blisk { position: fixed; top: 46%; left: 50%; width: 460px; height: 460px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, var(--profil-barva, #4facfe) 0%, transparent 62%); animation: profilBlisk 2.3s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s both; } @keyframes profilBlisk { 0%, 30% { opacity: 0; transform: translate(-50%,-50%) scale(0.6); } 52% { opacity: 0.42; transform: translate(-50%,-50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.0); } } .profil-obroc { position: fixed; top: 46%; left: 50%; width: 330px; height: 470px; transform: translate(-50%, -50%); border-radius: 24px; z-index: 1; pointer-events: none; border: 2px solid var(--profil-barva, #4facfe); animation: profilObroc 2.3s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s both; } @keyframes profilObroc { 0%, 36% { opacity: 0; transform: translate(-50%,-50%) scale(0.88); } 54% { opacity: 0.7; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } } /* Živo ozadje: dve mehki plasti v barvi ranga, ki počasi plavata - doda globino, da stran ni monotona, brez mlečnega učinka. */ body.profil-vstop .profil-ozadje { position: fixed; inset: -25%; z-index: 0; pointer-events: none; overflow: hidden; } .profil-ozadje span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.26; background: var(--profil-barva, #4facfe); /* Promocija v svojo plast: blur se izračuna enkrat, animacija le premika plast. */ will-change: transform; transform: translateZ(0); } .profil-ozadje span:nth-child(1) { width: 46vw; height: 46vw; top: 4%; left: 8%; animation: plavaj1 19s ease-in-out infinite; } .profil-ozadje span:nth-child(2) { width: 38vw; height: 38vw; bottom: 6%; right: 6%; animation: plavaj2 23s ease-in-out infinite; opacity: 0.18; } .profil-ozadje span:nth-child(3) { width: 28vw; height: 28vw; top: 46%; left: 58%; animation: plavaj1 27s ease-in-out infinite reverse; opacity: 0.14; } @keyframes plavaj1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vw, 5vh) scale(1.14); } } @keyframes plavaj2 { 0%,100% { transform: translate(0,0) scale(1.06); } 50% { transform: translate(-7vw, -4vh) scale(0.92); } } /* V profil načinu skrijemo ozadja aplikacijskih ovojev. */ body.profil-vstop .vsebina, body.profil-vstop #g99-aplikacija, body.profil-vstop #zajem-slike, body.profil-vstop .modal-overlay, body.profil-vstop #viewCardModal { background: transparent !important; box-shadow: none !important; border: none !important; } /* html2canvas 1.4.1 ne zna razčleniti color-mix() in ob izvozu pade. Zato med izvozom (.exporting) te lastnosti nadomestimo s preprostimi barvami/sijem, ki jih html2canvas razume. Vizualno je izvožena kartica skoraj enaka. */ body.exporting .ovr-stevilka, body.exporting .mini-ovr-val { text-shadow: 0 0 14px var(--rang-barva, #4facfe) !important; } /* POPRAVEK: ta obvod je meril na .kartica-ovr-label, a naštete lastnosti (-webkit-text-stroke, gradientno ozadje, drop-shadow) pripadajo .kb-monogram. Zato monogram med izvozom ni bil počiščen in je html2canvas padel na color-mix(), ki ga Chrome serializira kot color(srgb ...). */ body.exporting .kb-monogram { -webkit-text-stroke: 1.5px var(--rang-barva, #4facfe) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: rgba(255,255,255,0.07) !important; filter: none !important; } body.exporting .cast-okvircek { border: 1px solid var(--cast-barva, #4facfe) !important; text-shadow: 0 0 7px var(--cast-barva, #4facfe) !important; } /* FIFA-pack razkritje OVR: pulz + blisk ob dosegu ciljne vrednosti */ @keyframes ovrPulz { 0% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.35); filter: brightness(1.8) drop-shadow(0 0 18px var(--rang-barva, #4facfe)); } 60% { transform: scale(0.96); } 100% { transform: scale(1); filter: brightness(1); } } .ovr-pulz { animation: ovrPulz 0.55s cubic-bezier(0.22, 1, 0.36, 1); display: inline-block; } .app-oznaka { text-align: center; font-size: 13px; font-weight: 800; color: #cfd8e6; letter-spacing: 0.5px; margin-bottom: 14px; padding: 8px; background: linear-gradient(90deg, rgba(0,242,254,0.06), rgba(0,242,254,0.14), rgba(0,242,254,0.06)); border: 1px solid rgba(0,242,254,0.3); border-radius: 12px; } .app-oznaka b { color: #00f2fe; } .app-oznaka span { display: block; font-size: 9px; font-weight: 700; color: #6b7c94; text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; } /* ===== NADZORNA PLOŠČA ===== */ .nadzor-filtri { display: flex; justify-content: center; width: 100%; } .nadzor-filtri select { max-width: 320px; padding: 10px 14px; border-radius: 10px; background: #0f1a2e; border: 1px solid #1e3a5f; color: #cfd8e6; font-family: 'Montserrat', sans-serif; font-weight: 700; cursor: pointer; } .nadzor-prazno, .nadzor-prazno-mini { text-align: center; color: #6b7c94; font-weight: 600; padding: 20px; } .nadzor-prazno-mini { padding: 8px; font-size: 11px; } .nadzor-kpi-vrsta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 100%; } .nadzor-kpi { background: linear-gradient(160deg, rgba(30,58,95,0.25), rgba(10,15,28,0.5)); border: 1px solid #1e3a5f; border-radius: 14px; padding: 16px 14px; text-align: center; } .nadzor-kpi-naslov { font-size: 10px; font-weight: 800; color: #6b7c94; text-transform: uppercase; letter-spacing: 0.6px; } .nadzor-kpi-vrednost { font-size: 30px; font-weight: 900; font-style: italic; line-height: 1.1; margin: 4px 0; } .nadzor-kpi-pod { font-size: 10px; color: #a0aec0; font-weight: 600; } .nadzor-blok { background: rgba(0,0,0,0.3); border: 1px solid #1e3a5f; border-radius: 14px; padding: 16px; width: 100%; } .nadzor-blok-naslov { font-size: 12px; font-weight: 900; color: #4facfe; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } .nadzor-kat-mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .nadzor-kat-glava { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 800; color: #cfd8e6; } .nadzor-kat-glava b { font-size: 18px; font-style: italic; } .nadzor-kat-crta { height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin: 6px 0 2px; } .nadzor-kat-crta div { height: 100%; border-radius: 4px; transition: width 0.5s; } .nadzor-kat-oznaka { font-size: 9.5px; color: #6b7c94; font-weight: 700; font-style: italic; min-height: 12px; } .nadzor-dvojni { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; width: 100%; } .nadzor-mover { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,0.03); margin-bottom: 6px; } .nadzor-mover-ime { font-size: 12px; font-weight: 800; color: #e2e8f0; } .nadzor-mover-ovr { font-size: 11px; font-weight: 700; color: #6b7c94; } .nadzor-mover-delta { font-size: 14px; font-weight: 900; font-style: italic; min-width: 34px; text-align: right; } .nadzor-opozorilo { border-color: rgba(253,203,110,0.4); background: rgba(253,203,110,0.06); } .nadzor-netestirani { font-size: 12px; color: #cfd8e6; font-weight: 600; line-height: 1.6; } /* Klubski filter (samo trener) */ .btn-klub-filter { padding: 8px 14px; border-radius: 10px; background: rgba(79,172,254,0.08); border: 1px solid #1e3a5f; color: #cfd8e6; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .btn-klub-filter:hover { border-color: #4facfe; } /* Gumb za projektorski zaslon - odpre ?tv=1 v novem zavihku, da ni treba tipkati naslova. */ .btn-tv-zaslon { width: 100%; margin-top: 10px; background: linear-gradient(90deg, #4facfe, #00f2fe); color: #03060f; border: none; border-radius: 10px; padding: 12px 18px; cursor: pointer; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 8px 24px -12px rgba(79,172,254,0.9); } .btn-tv-zaslon:hover { filter: brightness(1.08); } .btn-klub-filter.aktivno { background: rgba(79,172,254,0.22); border-color: #4facfe; color: #fff; box-shadow: 0 0 12px -3px #4facfe; } /* ===== MODAL ZA BRISANJE (cel športnik / posamezne sezone) ===== */ #brisiOverlay { position: fixed; inset: 0; background: rgba(2,5,14,0.9); z-index: 9000; display: none; } #brisiModal { position: fixed; inset: 0; z-index: 9001; display: none; align-items: center; justify-content: center; padding: 20px; } .brisi-vsebina { background: linear-gradient(160deg, #1a1020, #0a0f1c); border: 1px solid #5a2a3a; border-radius: 18px; padding: 22px; max-width: 400px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .brisi-naslov { font-size: 15px; font-weight: 900; color: #ff7675; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; } .brisi-podnaslov { font-size: 11px; color: #a0aec0; font-weight: 600; text-align: center; margin: 6px 0 16px; line-height: 1.5; } .brisi-seznam { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; } .brisi-vrstica { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,0.03); border: 1px solid transparent; cursor: pointer; transition: all 0.15s; } .brisi-vrstica:hover { background: rgba(255,255,255,0.06); } .brisi-vrstica input { width: 16px; height: 16px; accent-color: #ff7675; cursor: pointer; } .brisi-vse { background: rgba(255,118,117,0.08); border-color: rgba(255,118,117,0.3); } .brisi-sezona { flex: 1; font-size: 12px; font-weight: 800; color: #e2e8f0; } .brisi-ovr { font-size: 11px; font-weight: 700; color: #6b7c94; } .brisi-locnica { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; } .brisi-gumbi { display: flex; gap: 10px; margin-top: 16px; } .brisi-gumbi button { flex: 1; padding: 11px; border-radius: 11px; font-size: 12px; font-weight: 900; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; } .brisi-preklici { background: transparent; border: 1px solid #34486b; color: #a0aec0; } .brisi-preklici:hover { color: #fff; border-color: #4facfe; } .brisi-potrdi { background: rgba(255,118,117,0.16); border: 1px solid rgba(255,118,117,0.5); color: #ff9f9e; } .brisi-potrdi:hover { background: rgba(255,118,117,0.3); color: #fff; } /* ===== ORODJE ZA IZREZ SLIKE ===== */ #izrezOverlay { position: fixed; inset: 0; background: rgba(2,5,14,0.9); z-index: 9000; display: none; } #izrezModal { position: fixed; inset: 0; z-index: 9001; display: none; align-items: center; justify-content: center; padding: 20px; } .izrez-vsebina { background: linear-gradient(160deg, #101a2e, #0a0f1c); border: 1px solid #1e3a5f; border-radius: 18px; padding: 22px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.6); } .izrez-naslov { font-size: 15px; font-weight: 900; color: #4facfe; text-transform: uppercase; letter-spacing: 1px; text-align: center; } .izrez-podnaslov { font-size: 11px; color: #a0aec0; font-weight: 600; text-align: center; margin: 6px 0 16px; line-height: 1.5; } .izrez-okvir { position: relative; width: 320px; height: 264px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 2px solid #4facfe; box-shadow: 0 0 22px -6px #4facfe; background: #000; touch-action: none; cursor: grab; } .izrez-okvir:active { cursor: grabbing; } #izrezPlatno { display: block; width: 320px; height: 264px; } /* Mreža tretjin - pomaga poravnati obraz */ .izrez-mreza { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px); background-size: 33.33% 33.33%; background-position: center; opacity: 0.5; } .izrez-kontrole { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; } .izrez-kontrole span { font-size: 15px; } .izrez-kontrole input[type="range"] { flex: 1; accent-color: #4facfe; cursor: pointer; } .izrez-gumbi { display: flex; gap: 10px; margin-top: 16px; } .izrez-gumbi button { flex: 1; padding: 11px; border-radius: 11px; font-size: 12px; font-weight: 900; cursor: pointer; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; } .izrez-preklici { background: transparent; border: 1px solid #1e3a5f; color: #6b7c94; } .izrez-preklici:hover { color: #cfd8e6; border-color: #34486b; } .izrez-potrdi { background: rgba(46,204,113,0.16); border: 1px solid rgba(46,204,113,0.5); color: #7ee2a8; } .izrez-potrdi:hover { background: rgba(46,204,113,0.3); color: #fff; } /* ===== ENOTEN NAMIG (nadomešča sive brskalnikove oblačke) ===== Prej so značke in statistike uporabljale domorodni title="" - sistemski siv oblaček, ki ne sodi k videzu kartic in ga ni mogoče oblikovati. Zdaj imamo svoje okno v slogu aplikacije, ki se ob prehodu miške mehko razpre. Je EN sam element na vrhu strani (position: fixed), zato ga rob kartice ne more odrezati. */ #g99Namig { position: fixed; z-index: 9500; max-width: 230px; padding: 10px 13px; border-radius: 12px; background: linear-gradient(160deg, #101a2e, #0a0f1c); border: 1px solid var(--namig-barva, #4facfe); box-shadow: 0 10px 32px rgba(0,0,0,0.65), 0 0 18px -6px var(--namig-barva, #4facfe); pointer-events: none; opacity: 0; transform: translateY(6px) scale(0.96); transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); } #g99Namig.viden { opacity: 1; transform: translateY(0) scale(1); } .namig-glava { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .namig-ikona { font-size: 15px; line-height: 1; } .namig-ime { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--namig-barva, #4facfe); } .namig-opis { font-size: 10.5px; font-weight: 600; color: #cfd8e6; line-height: 1.5; } .namig-vrednost { font-size: 15px; font-weight: 900; color: #fff; margin-top: 3px; } body.exporting #g99Namig { display: none !important; } /* Legenda znakov časti (znotraj obstoječega okna "Legenda Značk") */ .legenda-okvir-vrstica { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border-left: 3px solid var(--okvir-barva); margin-bottom: 7px; } .legenda-okvir-ikona { font-size: 19px; flex-shrink: 0; } .legenda-okvir-ime { font-size: 12px; font-weight: 900; color: var(--okvir-barva); text-transform: uppercase; letter-spacing: 0.5px; } .legenda-okvir-pogoj { font-size: 10.5px; font-weight: 600; color: #a0aec0; margin-top: 2px; line-height: 1.4; } /* ============ AI SCOUTING POROČILO ============ */ #reportModal { max-width: 700px; width: 95%; background: #050a18; border: 1px solid #1e3a5f; padding: 0; overflow-y: auto; overflow-x: hidden; } .porocilo-wrap { width: 100%; background: linear-gradient(180deg, #0b1120 0%, #050a18 100%); } .porocilo-header { display:flex; justify-content:space-between; align-items:center; padding: 22px 28px; background: linear-gradient(90deg, #0f172a 0%, #111d35 100%); border-bottom: 2px solid #4facfe; flex-wrap: wrap; gap: 10px; } .porocilo-brand-name { font-size: 19px; font-weight:900; color:#fff; letter-spacing:3px; } .porocilo-brand-name span { color: #4facfe; } .porocilo-brand-sub { font-size: 10px; font-weight:700; color:#4facfe; letter-spacing:2px; text-transform:uppercase; margin-top:3px; } .porocilo-meta { text-align:right; font-size:11px; color:#a0aec0; font-weight:700; line-height:1.5; } .porocilo-body { padding: 25px 28px 10px 28px; } .porocilo-bio { display:flex; gap: 18px; align-items:center; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .porocilo-foto { width: 78px; height: 78px; border-radius: 12px; background-size:cover; background-position: top center; background-color: #152238; border: 2px solid #1e3a5f; flex-shrink:0; } .porocilo-bio-info { flex: 1; min-width: 140px; } .porocilo-bio-info h2 { margin:0 0 5px 0; font-size: 21px; font-weight:900; color:#fff; text-transform:uppercase; line-height:1.15; } .porocilo-bio-tags { font-size:11px; color:#a0aec0; font-weight:700; letter-spacing:0.5px; } .porocilo-ovr-block { text-align:center; flex-shrink:0; } .porocilo-ovr-num { font-size:42px; font-weight:900; font-style:italic; line-height:1; } .porocilo-ovr-rank { font-size:11px; font-weight:900; letter-spacing:2px; text-transform:uppercase; margin-top:2px; } .porocilo-radar-box { width:100%; height: 260px; background: rgba(0,0,0,0.35); border-radius: 16px; border: 1px solid #1e3a5f; padding: 15px; display:flex; align-items:center; justify-content:center; } .porocilo-sekcija { margin-bottom: 26px; } .porocilo-sekcija-title { font-size:12.5px; font-weight:900; color:#4facfe; text-transform:uppercase; letter-spacing:1.5px; margin: 0 0 14px 0; } .percentile-row { display:flex; align-items:center; gap: 10px; margin-bottom: 11px; } .percentile-label { width: 118px; font-size: 11px; font-weight:800; color:#fff; text-transform:uppercase; flex-shrink:0; display:flex; align-items:center; } .percentile-rawval { width: 62px; font-size: 11.5px; font-weight:800; color:#e2e8f0; flex-shrink:0; } .percentile-track { flex:1; height: 10px; background: rgba(255,255,255,0.08); border-radius: 6px; position: relative; } .percentile-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease-out; } .percentile-marker { position:absolute; top: -4px; width: 2px; height: 18px; background: #fff; opacity:0.55; } .percentile-val { width: 92px; text-align:right; font-size: 10.5px; font-weight:800; color:#a0aec0; flex-shrink:0; } .percentile-legenda { font-size:9.5px; color:#5a6a85; margin-top:4px; } /* ===== LIVE DRAFT DAY (TV način, ?tv=1) ===== Ločen polnozaslonski pogled za projektor na dogodku. Kartice NE izrisuje na novo - uporablja isti generator kot Baza in jo samo poveča, da se videz ne more razhajati. Barve, pisava in razmiki so isti kot v aplikaciji: #050a18 podlaga, #4facfe poudarek. */ #tvZaslon { position: fixed; inset: 0; z-index: 9000; background: #050a18; display: none; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; font-family: 'Montserrat', sans-serif; } body.tv-nacin #tvZaslon { display: flex; } body.tv-nacin > *:not(#tvZaslon) { display: none !important; } /* --- OZADJE: tri plasti, vse čisti CSS, brez slik --- */ /* 1) barvna megla, ki se počasi premika */ #tvMegla { position: absolute; inset: -20%; z-index: 1; background: radial-gradient(circle at 28% 32%, rgba(79,172,254,0.20) 0%, transparent 48%), radial-gradient(circle at 74% 68%, rgba(108,92,231,0.16) 0%, transparent 46%), radial-gradient(circle at 52% 88%, rgba(0,242,254,0.10) 0%, transparent 44%); animation: tvMegla 26s ease-in-out infinite alternate; } @keyframes tvMegla { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } /* 2) perspektivna mreža, ki teče proti gledalcu - da zaslon ni mrtev */ #tvMreza { position: absolute; left: -50%; right: -50%; bottom: -30%; height: 90%; z-index: 1; background-image: linear-gradient(rgba(79,172,254,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(79,172,254,0.16) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(420px) rotateX(70deg); animation: tvMreza 3.4s linear infinite; mask-image: linear-gradient(to top, #000 0%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%); } @keyframes tvMreza { from { background-position: 0 0; } to { background-position: 0 70px; } } /* 3) vinjeta, da se rob zlije s temo prostora */ #tvVinjeta { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(5,10,24,0.92) 100%); } .tv-plast { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; } /* --- MIROVANJE --- */ .tv-logo { font-size: clamp(34px, 5.2vw, 74px); font-weight: 900; letter-spacing: clamp(6px, 1.4vw, 18px); text-transform: uppercase; line-height: 1; background: linear-gradient(90deg, #4facfe, #00f2fe 55%, #6c5ce7); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(79,172,254,0.35)); } .tv-podlogo { font-size: clamp(10px, 1.1vw, 14px); font-weight: 800; letter-spacing: clamp(4px, 0.8vw, 10px); text-transform: uppercase; color: #3d4a63; margin-top: 14px; } /* Motivacijski napis: menja se sam, zato ima fiksno višino - sicer bi vse poskakovalo. */ /* margin-inline: auto je nujen - #tvMirovanje je zaradi align-items:center širok le toliko kot logo, zato bi bil ožji blok z max-width poravnan na LEVI rob. */ .tv-motiv { margin: clamp(28px, 4vh, 60px) auto 0; text-align: center; min-height: 4.2em; max-width: 26ch; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 2.4vw, 34px); font-weight: 900; line-height: 1.25; text-transform: uppercase; letter-spacing: 1.5px; color: #e8eef8; opacity: 0; transition: opacity 0.9s ease, transform 0.9s ease; transform: translateY(10px); } .tv-motiv.viden { opacity: 1; transform: none; } .tv-motiv-avtor { margin-top: 12px; font-size: 0.42em; font-weight: 800; letter-spacing: 4px; color: #4facfe; text-transform: uppercase; } .tv-cakanje { margin-top: clamp(24px, 4vh, 54px); font-size: clamp(10px, 1vw, 13px); font-weight: 800; letter-spacing: 5px; color: #3d4a63; text-transform: uppercase; animation: tvDih 2.4s ease-in-out infinite; } @keyframes tvDih { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } } /* --- TRETJI ZASLON: ATLET SE JE PRIJAVIL NA ŠTARTU --- */ /* Skener zapestnice ve, kdo je prišel na vrsto, precej prej kot je meritev vnesena. To je samostojen zaslon (ne pasica), ker gre za napoved na dogodku - enako težo ima kot citat in kartica iz baze, le da ima prednost pred obema. */ #tvNaStartu { display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; } .tv-st-oznaka { font-size: clamp(11px, 1.15vw, 16px); font-weight: 900; letter-spacing: clamp(5px, 1vw, 12px); text-transform: uppercase; color: #ff9f43; margin-bottom: clamp(18px, 2.6vh, 34px); animation: tvStUtrip 2.2s ease-in-out infinite; } @keyframes tvStUtrip { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } } .tv-st-ime { font-size: clamp(46px, 8.5vw, 148px); font-weight: 900; line-height: 0.98; letter-spacing: clamp(2px, 0.5vw, 8px); text-transform: uppercase; max-width: 16ch; background: linear-gradient(90deg, #ff9f43, #ffd074 55%, #ff9f43); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 32px rgba(255,159,67,0.35)); } .tv-st-pod { margin-top: clamp(20px, 3vh, 40px); font-size: clamp(12px, 1.25vw, 19px); font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: #8b9ab3; } .tv-st-pod b { color: #4facfe; font-weight: 900; font-size: 1.2em; } .tv-start { margin-top: 30px; padding: 16px 42px; border-radius: 40px; cursor: pointer; background: linear-gradient(90deg, #4facfe, #00f2fe); color: #03060f; border: none; font-size: 15px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; box-shadow: 0 10px 34px -12px rgba(79,172,254,0.9); } .tv-namig { margin-top: 14px; font-size: 11px; color: #3d4a63; letter-spacing: 1.5px; } /* Živa vrstica ob dnu: koliko kartic je v bazi in kdo vodi. */ #tvStatus { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 5; transition: opacity 0.5s ease; display: flex; justify-content: center; gap: clamp(14px, 2vw, 34px); flex-wrap: wrap; font-size: clamp(12px, 1.1vw, 17px); font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #8b9ab3; } #tvStatus > div { background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 30px; padding: 9px 22px; } /* Med prikazom kartice se spodnja vrstica umakne. Prej je pas z rekordom padel čeznjo - oder v tistem trenutku pripada športniku, ne statistiki. */ body.tv-igra #tvStatus { opacity: 0; pointer-events: none; } /* Rezerva pod odrom, da pas z rekordom nikoli ne trči ob rob zaslona. */ #tvOder.viden { padding-bottom: 0; } #tvStatus b { color: #4facfe; font-weight: 900; font-size: 1.15em; } /* --- PAS Z REKORDI (samo v mirovanju, pod citatom) --- */ #tvRekordiPas { display: flex; justify-content: center; gap: clamp(10px, 1.2vw, 20px); flex-wrap: wrap; margin-top: clamp(26px, 4vh, 52px); } .tv-rek { display: flex; flex-direction: column; align-items: center; gap: 7px; width: clamp(140px, 11vw, 195px); padding: 14px 12px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } .tv-rek-ime { display: flex; align-items: center; gap: 6px; font-size: clamp(9px, 0.75vw, 12px); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #a0aec0; } .tv-rek-val { font-size: clamp(22px, 2vw, 34px); font-weight: 900; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 4px; } .tv-rek-val span { font-size: 0.38em; font-weight: 800; color: #4facfe; } .tv-rek-kdo { font-size: clamp(9px, 0.78vw, 12px); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #4facfe; text-align: center; line-height: 1.3; } /* Rekord, postavljen danes na tem zaslonu, dobi oranžno piko - kot In-Form v aplikaciji. */ .tv-rek.danes { border-color: rgba(255,159,67,0.6); } .tv-rek.danes .tv-rek-kdo { color: #ff9f43; } .tv-rek-naslov { width: 100%; text-align: center; font-size: clamp(10px, 0.85vw, 13px); font-weight: 900; letter-spacing: 3px; text-transform: uppercase; color: #4facfe; margin-bottom: 6px; } /* --- PRIHOD NOVE KARTICE --- Bel blisk čez zaslon in vrteči se žarki so odstranjeni: na projektorju sta bila preveč vsiljiva in sta odvrnila pogled od kartice. Prihod zdaj nosita zvok in animacija same kartice. */ /* Povečava s transform NE poveča prostora v postavitvi - kartica je še vedno visoka 400 px, zato je ime lezlo čeznjo. Zato jo objame ovoj s PRAVO velikostjo (260x400 krat 1.6), kartica pa se znotraj njega samo poveča. */ /* Kartica je ISTA kot v "Poglej" (320x480). Ovoj ima PRAVO velikost povečane kartice, ker transform: scale ne poveča prostora v postavitvi - prav zato je prej ime lezlo čez kartico. */ /* Velikost kartice se prilagodi VIŠINI zaslona - pod njo sta zdaj še ime in pet kvadratkov z rezultati, zato mora ostati prostor. Vrednosti so usklajene: ovoj = 320x480 krat faktor povečave. */ /* Ovoj je ~15 % višji od kartice: pri vrtenju perspektiva bližji rob POVEČA, zato kartica sega čez svoj mirujoči okvir. Brez te rezerve zaide čez ime. */ /* Velikost kartice NI več zapisana v stopnjah po višini okna - to sem trikrat zgrešil. Faktor izračuna JavaScript iz DEJANSKE višine okna in dejanske višine vsega ostalega (ime, meritve, pas z rekordom). Spodnji vrednosti sta le privzeti, dokler se prvi izračun ne izvede. */ #tvKarticaOvoj { width: calc(320px * var(--tv-f, 1.2)); height: calc(480px * var(--tv-f, 1.2)); } #tvArhivOvoj { width: calc(320px * var(--tv-fa, 1)); height: calc(480px * var(--tv-fa, 1)); } #tvKarticaOvoj, #tvArhivOvoj { flex-shrink: 0; perspective: 1800px; display: flex; align-items: center; justify-content: center; } #tvKarticaVrt, #tvArhivVrt { transform-style: preserve-3d; } /* Arhivska kartica se vrti počasneje - je kulisa med čakanjem, ne dogodek. */ #tvArhiv.viden #tvArhivVrt { animation: tvVrtenje 14s 0.6s linear infinite; } /* .tilt-ovoj ima svoj "perspective", kar ga SPLOŠČI v 2D sliko znotraj mojega vrtenja - zato se pri obratu ni pokazala hrbtna stran, ampak zrcaljena sprednja. Na TV zato notranjo perspektivo izklopim in celo verigo držim v 3D. */ #tvKartica .tilt-ovoj, #tvArhivKartica .tilt-ovoj { perspective: none; transform-style: preserve-3d; } #tvKartica .tilt-tarca, #tvArhivKartica .tilt-tarca { transform-style: preserve-3d; transform: none !important; transition: none !important; } #tvKartica, #tvArhivKartica { width: 320px; height: 480px; transform-origin: center; transform-style: preserve-3d; } #tvKartica { transform: scale(var(--tv-f, 1.2)); } #tvArhivKartica { transform: scale(var(--tv-fa, 1)); } /* Počasno vrtenje v prostoru: en obrat na 10 s. Ker imata obe ploskvi kartice backface-visibility: hidden, se med obratom pokaže tudi hrbtna stran. */ #tvOder.viden #tvKarticaVrt { animation: tvVrtenje 10s 1.1s linear infinite; } @keyframes tvVrtenje { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } #tvOder { display: none; } #tvOder.viden { display: flex; flex-direction: column; align-items: center; } /* Prihod dela z odstotki končne velikosti, da se ujema z vsemi tremi velikostmi. */ #tvOder.viden #tvKartica { animation: tvKarticaPrihod 1s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes tvKarticaPrihod { 0% { opacity: 0; } 100% { opacity: 1; } } /* ----- MERITVE OB KARTICI ----- */ /* Pet kvadratkov v vrsto POD kartico in imenom. Vsak je samostojen in dovolj velik, da se z razdalje prebere brez napora. */ #tvMeritve { display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: clamp(10px, 1.2vw, 20px); margin-top: clamp(18px, 3vh, 34px); flex-wrap: wrap; animation: tvVstop 0.7s 0.55s both cubic-bezier(0.16, 1, 0.3, 1); } /* Škatlice so povečana različica .raw-stat-box iz aplikacije: ista črna podlaga, ista svetlo siva oznaka, enota v modri, ista tanka črta pod vrednostjo. */ .tv-meritev { display: flex; flex-direction: column; align-items: center; gap: 10px; width: clamp(150px, 12vw, 210px); padding: 16px 14px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; } .tv-m-ime { display: flex; align-items: center; gap: 7px; font-size: clamp(10px, 0.82vw, 13px); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #a0aec0; } .tv-m-ime i { font-size: 1.15em; } .tv-m-raw { font-size: clamp(28px, 2.7vw, 44px); font-weight: 900; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 4px; } .tv-m-raw span { font-size: 0.38em; font-weight: 800; color: #4facfe; } .tv-m-crta { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; } .tv-m-crta i { display: block; height: 100%; border-radius: 3px; } .tv-m-ocena { font-size: clamp(15px, 1.2vw, 21px); font-weight: 900; line-height: 1; } .tv-ime { font-size: clamp(28px, 3.4vw, 50px); font-weight: 900; letter-spacing: 3px; color: #fff; text-transform: uppercase; margin-top: 6px; animation: tvVstop 0.7s 0.35s both cubic-bezier(0.16, 1, 0.3, 1); } .tv-podnapis { font-size: clamp(11px, 1.1vw, 15px); font-weight: 800; letter-spacing: 5px; margin-top: 10px; text-transform: uppercase; color: #4facfe; animation: tvVstop 0.7s 0.5s both cubic-bezier(0.16, 1, 0.3, 1); } @keyframes tvVstop { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ===== KARTICA IZ BAZE (mirovanje) ===== Ista velika kartica kot pri živi meritvi, a brez zvoka, brez zlatega pasu in z drobno oznako. Loči ju to, kar manjka, ne pomanjšava - kartica mora biti v polnem sijaju, sicer nima smisla, da jo sploh kažemo. */ /* POZOR: prej sta citat in kartica ležala v ISTI mrežni celici, da bi se prelivala. Napaka: celica je bila vedno visoka kot VEČJA od obeh, zato je vsebina ušla čez rob zaslona. Zdaj se sloja menjata z display, preliv pa vodi JavaScript: najprej zbledi eden, šele nato se pokaže drugi. */ #tvCitatBlok, #tvArhiv { display: flex; flex-direction: column; align-items: center; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease; } #tvArhiv { display: none; } .tv-sloj-skrit { opacity: 0 !important; transform: translateY(14px) scale(0.978) !important; filter: blur(4px) !important; pointer-events: none !important; } /* Arhivska kartica: kartica levo, meritve desno - vodoravnega prostora je dovolj, navpičnega pa ne, ker sta pod kartico še ime in generacija. */ .tv-arhiv-vrsta { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3.5vw, 64px); } .tv-arhiv-levo { display: flex; flex-direction: column; align-items: center; } #tvArhivMeritve { display: flex; flex-direction: column; gap: clamp(7px, 1vh, 12px); width: clamp(250px, 23vw, 360px); } .tv-am { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: 12px; row-gap: 5px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: clamp(8px, 1.1vh, 13px) 14px; } .tv-am-ikona { grid-row: 1 / span 2; font-size: 16px; text-align: center; } .tv-am-ime { font-size: clamp(9px, 0.72vw, 11px); font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #a0aec0; } .tv-am-val { font-size: clamp(17px, 1.5vw, 24px); font-weight: 900; color: #fff; text-align: right; line-height: 1; } .tv-am-val span { font-size: 0.45em; font-weight: 800; color: #4facfe; margin-left: 3px; } .tv-am-crta { grid-column: 2; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; } .tv-am-crta i { display: block; height: 100%; border-radius: 3px; } .tv-am-ocena { grid-column: 3; font-size: clamp(12px, 1vw, 16px); font-weight: 900; text-align: right; } .tv-arhiv-oznaka { font-size: clamp(9px, 0.8vw, 12px); font-weight: 900; letter-spacing: 6px; text-transform: uppercase; color: #3d4a63; margin-bottom: clamp(8px, 1.4vh, 18px); } .tv-arhiv-ime { font-size: clamp(22px, 2.4vw, 36px); font-weight: 900; letter-spacing: 2px; color: #cfd8e6; text-transform: uppercase; margin-top: 6px; } .tv-arhiv-pod { font-size: clamp(10px, 0.95vw, 13px); font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: #4facfe; margin-top: 8px; } /* Prej so se logo, citat in rekordi skrili z display:none, kar je bila rez sredi prehoda. Zdaj se zbledi cel blok naenkrat prek razreda .zbledi. */ /* ===== NOV REKORD ===== Rekord je najredkejši dogodek na zaslonu, zato ima svoj pas čez vso širino, zlat preliv, žig ob prihodu in odsev, ki enkrat na dve sekundi šine čez. */ .tv-rekord { display: none; position: relative; overflow: hidden; width: min(1080px, 92vw); pointer-events: auto; padding: clamp(14px, 1.8vh, 22px) 34px; border-radius: 16px; background: linear-gradient(100deg, #ff8a1f 0%, #ffd76e 45%, #ff9f43 100%); color: #2a1600; font-size: clamp(15px, 1.7vw, 26px); font-weight: 900; letter-spacing: 4px; text-transform: uppercase; text-align: center; border: 2px solid rgba(255, 236, 190, 0.85); box-shadow: 0 18px 60px -18px rgba(255,159,67,0.95), 0 0 0 6px rgba(255,159,67,0.10); } .tv-rekord.viden { display: block; animation: tvZig 0.75s 0.8s both cubic-bezier(0.16, 1, 0.3, 1), tvRekordUtrip 2.6s 1.6s ease-in-out infinite; } /* Žig: pas prileti od zgoraj, malo prekorači in se usede - kot pečat na dokument. */ @keyframes tvZig { 0% { opacity: 0; transform: translateY(-26px) scale(1.14); letter-spacing: 16px; } 55% { opacity: 1; transform: translateY(0) scale(0.985); letter-spacing: 3px; } 100% { opacity: 1; transform: none; letter-spacing: 4px; } } @keyframes tvRekordUtrip { 0%, 100% { box-shadow: 0 18px 60px -18px rgba(255,159,67,0.95), 0 0 0 6px rgba(255,159,67,0.10); } 50% { box-shadow: 0 18px 78px -14px rgba(255,199,90,1), 0 0 0 12px rgba(255,159,67,0.18); } } /* Odsev, ki šine čez pas. Ker ima pas overflow:hidden, se lepo odreže ob robovih. */ .tv-rekord::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: -40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.75), transparent); transform: skewX(-18deg); } .tv-rekord.viden::after { animation: tvOdsev 2.4s 1.5s ease-in-out infinite; } @keyframes tvOdsev { 0% { left: -40%; } 55%, 100% { left: 115%; } } .tv-rekord i { margin-right: 12px; } /* Beseda "NOV REKORD" nad kategorijami - naj se bere kot razglas, ne kot oznaka. */ .tv-rekord b { display: block; font-size: 0.62em; letter-spacing: 9px; color: rgba(42,22,0,0.7); margin-bottom: 6px; font-weight: 900; } /* V mirovanju pas rekordov, med kartico pa ne - zaslon naj kaže eno stvar naenkrat. */ body.tv-igra #tvRekordiPas { display: none; } .stat-kartica { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; } .stat-kartica-vrh { display:flex; justify-content:space-between; align-items:baseline; gap: 10px; } .stat-kartica-naziv { font-size: 12.5px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; } .stat-kartica-naziv i { margin-right: 6px; } .stat-kartica-vrednost { font-size: 16px; font-weight: 900; color: #fff; } .stat-kartica-opis { font-size: 11px; color: #a0aec0; font-weight: 600; line-height: 1.4; } .zanimivosti-box { background: rgba(241,196,15,0.05); border-left: 4px solid #f1c40f; border-radius: 10px; padding: 16px 20px; } .sestava-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .sestava-chip { width: 100%; background: rgba(46,204,113,0.07); border: 1px solid rgba(46,204,113,0.3); border-radius: 10px; padding: 8px 10px; } .podatki-panel .sestava-chip { background: transparent; border: none; padding: 0; } .sestava-chip-naslov { font-size: 9px; font-weight: 900; color: #7ee2a8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; text-align: center; } .sestava-chip-vrstica { display: flex; justify-content: space-around; gap: 6px; } .sestava-chip-item { display: flex; flex-direction: column; align-items: center; line-height: 1.25; } .sestava-chip-item span { font-size: 8.5px; font-weight: 800; color: #a0aec0; text-transform: uppercase; letter-spacing: 0.5px; } .sestava-chip-item b { font-size: 13px; font-weight: 900; color: #fff; } .sestava-kompakt { padding: 6px 8px; } .sestava-kompakt .sestava-chip-item b { font-size: 11.5px; } .sestava-box { flex: 1 1 100px; background: rgba(46,204,113,0.06); border: 1px solid rgba(46,204,113,0.25); border-radius: 10px; padding: 12px 14px; text-align: center; } .sestava-label { font-size: 10px; font-weight: 900; color: #7ee2a8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .sestava-val { font-size: 20px; font-weight: 900; color: #fff; } .sestava-val span { font-size: 11px; color: #a0aec0; } .sestava-opis { font-size: 11px; color: #a0aec0; font-weight: 600; line-height: 1.6; } .sestava-opis b { color: #fff; } .zanimivosti-box ul { margin: 0; padding-left: 18px; } .zanimivosti-box li { font-size: 13px; line-height: 1.7; color: #e2e8f0; font-weight: 500; margin-bottom: 6px; } .zanimivosti-box li:last-child { margin-bottom: 0; } .zanimivosti-box li b { color: #fff; } .porocilo-badge-vrstica { display:flex; align-items:flex-start; gap: 12px; background: rgba(255,255,255,0.03); border-left: 3px solid; border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; } .porocilo-badge-vrstica i { font-size: 16px; margin-top: 2px; } .porocilo-badge-ime { font-size: 12px; font-weight: 900; text-transform: uppercase; margin-bottom: 2px; } .porocilo-badge-opis { font-size: 11.5px; color: #a0aec0; font-weight: 600; line-height: 1.4; } .porocilo-graf-box { width:100%; height: 200px; background: rgba(0,0,0,0.35); border-radius: 14px; border: 1px solid #1e3a5f; padding: 15px; } .porocilo-graf-nav { display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom: 10px; } .porocilo-graf-nav button { background: rgba(0,0,0,0.5); color: #4facfe; border: 1.5px solid #4facfe; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display:flex; align-items:center; justify-content:center; font-size:12px; } .porocilo-graf-nav span { font-size: 11px; font-weight:900; color:#4facfe; letter-spacing:1px; text-transform:uppercase; } .ai-box-v2 { background: rgba(15,23,42,0.6); border-left: 4px solid #4facfe; border-radius: 10px; padding: 18px 20px; } .ai-box-v2-title { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:900; color:#4facfe; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; } .ai-box-v2 p { margin:0; font-size: 13px; line-height:1.75; color:#e2e8f0; font-weight:500; } .ai-box-v2 p b { color: #fff; } .porocilo-badge-grid { display:flex; flex-wrap:wrap; gap:8px; } .porocilo-badge-item { display:flex; align-items:center; gap:7px; background: rgba(255,255,255,0.04); border-left:3px solid; padding: 7px 13px; border-radius: 8px; font-size:10.5px; font-weight:800; color:#fff; text-transform:uppercase; } .porocilo-footer { text-align:center; padding: 14px 20px; font-size: 9.5px; color:#5a6a85; letter-spacing:1px; border-top: 1px solid rgba(255,255,255,0.06); } @media (max-width: 600px) { .porocilo-bio { justify-content:center; text-align:center; } .porocilo-bio-info { text-align:center; } .percentile-row { flex-wrap: wrap; } .percentile-label { width: 100px; font-size: 9.5px; } .percentile-rawval { width: 50px; font-size: 10px; } .percentile-val { width: 78px; font-size: 9.5px; } } @media (max-width: 850px) { .vsebina { flex-direction: column; } .prikaz-sekcija { width: 100%; } .desna-kolona { width: 100%; } .graf-sekcija { width: 100%; height: auto; } .vnosna-vrstica-tri { grid-template-columns: 1fr 1fr; gap: 15px; } .compare-modal-content { flex-direction: column;} .gumb-odjava { top: 55px;} } /* BLOK 2: profil nacin */ /* V profil načinu skrijemo SAMO vmesnik aplikacije (takoj, pred izrisom), da med nalaganjem ne utripne. Kartice NIKOLI ne skrivamo - če bi kaj spodletelo, bi stran ostala prazna, zato je skrivanje ciljno in ne splošno. */ html.profil-priprava .pogled-preklopnik, html.profil-priprava .mode-switch-wrapper, html.profil-priprava .jezikovni-meni, html.profil-priprava .app-oznaka, html.profil-priprava #btnOdjavaTekst, html.profil-priprava #panelPrijava, html.profil-priprava #panelVnos, html.profil-priprava #panelBaza, html.profil-priprava #panelLestvica, html.profil-priprava #panelNadzor, html.profil-priprava #panelPrikaz { display: none !important; } html.profil-priprava body { background: #050a18; } /* Na javnem profilu SKRIJEMO le notranja orodja (preklop načina ocenjevanja in poročilo). Meritve OSTANEJO vidne - z njimi se športnik pohvali. Skrivamo s CSS (ne z JS), ker se kartica ob preklopu sezone znova izriše in bi se gumbi vrnili. */ html.profil-priprava .mode-switch-wrapper, html.profil-priprava #btnToggleRatingModal, html.profil-priprava #btnOdpriPorociloIzPogleda, html.profil-priprava .modal-chip-porocilo, html.profil-priprava #btnOdpriPorocilo, html.profil-priprava #btnPorocilo, html.profil-priprava #btnUstvariPorocilo { display: none !important; } /* FAZA NALAGANJA: dokler se podatki berejo, pokažemo obris kartice, ki utripa - obiskovalec vidi, da se nekaj nalaga, namesto praznega zaslona. */ #profilNalaganje { position: fixed; inset: 0; z-index: 4000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #050a18; } #profilNalaganje .obris { width: 300px; max-width: 82vw; aspect-ratio: 2/3; border-radius: 18px; border: 2px solid rgba(0,242,254,0.25); background: linear-gradient(160deg, rgba(14,26,48,0.9), rgba(6,11,24,0.9)); position: relative; overflow: hidden; animation: nalagamDih 1.8s ease-in-out infinite; } #profilNalaganje .obris::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(0,242,254,0.12) 50%, transparent 60%); background-size: 250% 100%; animation: nalagamSij 1.5s linear infinite; } #profilNalaganje .napis { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 3px; color: #4a6484; text-transform: uppercase; } @keyframes nalagamDih { 0%,100% { opacity: 0.55; transform: scale(0.99); } 50% { opacity: 1; transform: scale(1.01); } } @keyframes nalagamSij { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } } #profilNalaganje.koncano { animation: nalaganjeIzgine 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards; } #profilNalaganje.koncano .obris { animation: obrisPreda 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes nalaganjeIzgine { 0% { opacity: 1; } 60% { opacity: 0.35; } 100% { opacity: 0; visibility: hidden; } } /* Obris se rahlo poveča in zbledi - občutek, da se "preda" pravi kartici. */ @keyframes obrisPreda { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }