/* Prihlasovacia stránka Klubio: celá obrazovka, animovaný prepínací dvoj-formulár (Prihlásenie / Registrácia klubu) a rovnaký vzhľad pre obnovu hesla a 2FA. Vzhľad, rozmery (vw / vh), farby a názvy tried sú z prototypu dizajn/dizajn-prihlasenie-v3.html. Doplnené je len to, čo prototyp nemá: hlášky zo servera, návnada proti robotom, odkazy namiesto tlačidiel (stránka funguje aj bez JavaScriptu) a stav zatvorenej registrácie. */ :root { /* Rovnaká škála písma a zaoblenia ako v klubio.css (prihlásenie sa načítava bez neho). */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-40: 40px; --fs-56: 56px; --r: 14px; --r-m: 10px; --r-s: 8px; --tmava: #0B2419; --tmava2: #0E2A1F; --tmava3: #16392B; --tmava4: #1C4634; --akcent: #B8E04A; --akcent2: #D4F07A; --pozadie: #F6F5F0; --ram: #DCDFD5; --text: #14201A; --sivy: #5B6B62; --t: 1.25s; --panel: 44vw; --form: 56vw; --pole-bg: #fff; --odkaz: #1F6B45; --vyber-bg: #E8F2D2; --hover-bg: #F0F2EC; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: 'Manrope', system-ui, sans-serif; color: var(--text); background: var(--pozadie); overflow: hidden; } /* ===== CELÁ OBRAZOVKA ===== */ .main { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: var(--pozadie); } .main::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14, 42, 31, .07) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; } /* ===== FORMULÁRE ===== */ .container { position: absolute; top: 0; width: var(--form); height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; transition: transform var(--t) ease-in-out, opacity .8s ease-in-out, visibility var(--t); overflow-y: auto; } .form { width: 100%; max-width: 500px; padding: 48px 24px 28px; margin: auto 0; } .b-container { left: 0; z-index: 100; } .a-container { left: var(--panel); z-index: 0; opacity: 0; transform: translateX(12vw); visibility: hidden; } .b-container.is-txl { transform: translateX(-12vw); opacity: 0; z-index: 0; visibility: hidden; } .a-container.is-txl { transform: translateX(0); opacity: 1; visibility: visible; } .a-container.is-z200 { z-index: 200; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); font-weight: 700; letter-spacing: 1.4px; color: var(--odkaz); background: var(--vyber-bg); padding: 7px 13px; border-radius: 999px; margin-bottom: 20px; } .eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #1F6B45; display: block; animation: pulz2 2s infinite; } @keyframes pulz2 { 0% { box-shadow: 0 0 0 0 rgba(31, 107, 69, .5); } 70% { box-shadow: 0 0 0 7px rgba(31, 107, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 107, 69, 0); } } .form-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: var(--fs-40); letter-spacing: -1.4px; line-height: 1.02; margin: 0 0 12px; } .form-sub { margin: 0 0 32px; color: var(--sivy); font-size: var(--fs-16); line-height: 1.55; } .form-sub a, .check a { color: var(--odkaz); font-weight: 700; } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .field > label { font-size: var(--fs-14); font-weight: 700; display: flex; justify-content: space-between; } .field > label small { font-weight: 600; color: #8A988F; } .inp { position: relative; } .inp .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8A988F; transition: color .2s; pointer-events: none; } .inp input, .inp textarea { width: 100%; height: 58px; border: 1.5px solid var(--ram); border-radius: var(--r); background: var(--pole-bg); padding: 0 48px 0 48px; font: inherit; font-size: var(--fs-16); color: var(--text); transition: border-color .2s, box-shadow .2s, background .2s; } .inp textarea { height: 80px; padding: 16px 16px 16px 48px; resize: none; line-height: 1.5; } .inp textarea + .ic { top: 28px; } .inp input::placeholder, .inp textarea::placeholder { color: #A6B1AA; } .inp input:hover, .inp textarea:hover { border-color: #C3C9BD; } .inp input:focus, .inp textarea:focus { outline: none; border-color: var(--tmava2); box-shadow: 0 0 0 5px rgba(184, 224, 74, .32); } .inp:focus-within .ic { color: var(--tmava2); } /* stav ok / chyba */ .inp .st { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; transition: all .25s; pointer-events: none; } .field.ok .inp .st.ok { opacity: 1; transform: translateY(-50%) scale(1); } .field.ok .inp input { border-color: #7FB24A; } .field.err .inp input, .field.err .inp textarea { border-color: #D9534F; background: #FFF8F7; } .field.err .inp input:focus { box-shadow: 0 0 0 5px rgba(217, 83, 79, .18); } .msg { font-size: var(--fs-13); color: #C0392B; font-weight: 600; display: none; align-items: center; gap: 6px; } .field.err .msg { display: flex; } .hint { font-size: var(--fs-13); color: #8A988F; } /* oko pri hesle */ .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; background: transparent; border-radius: var(--r-m); color: #8A988F; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .eye:hover { background: var(--hover-bg); color: var(--tmava2); } .caps { display: none; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 700; color: #A15C00; background: #FFF3DC; padding: 6px 10px; border-radius: var(--r-s); width: max-content; } .caps.on { display: flex; } /* ukazovateľ sily hesla (obnova hesla) */ .sila { display: flex; align-items: center; gap: 10px; } .sila-pruh { flex: 1; height: 6px; border-radius: 999px; background: #E6E9E0; overflow: hidden; } .sila-pruh i { display: block; height: 100%; width: 0; border-radius: 999px; background: #D9534F; transition: width .25s, background .25s; } .sila-text { font-size: var(--fs-13); font-weight: 700; color: var(--sivy); min-width: 92px; text-align: right; } .pravidla { margin: 0 0 18px; padding-left: 18px; color: var(--sivy); font-size: var(--fs-13); line-height: 1.6; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .row { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 24px; font-size: var(--fs-14); } .row a { color: var(--odkaz); font-weight: 700; text-decoration: none; } .row a:hover { text-decoration: underline; } /* prepínač namiesto checkboxu */ .tgl { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .tgl input { position: absolute; opacity: 0; width: 0; height: 0; } .tgl .tr { width: 40px; height: 24px; border-radius: 999px; background: #D5D9CE; position: relative; transition: background .2s; flex-shrink: 0; } .tgl .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; } .tgl input:checked + .tr { background: #1F6B45; } .tgl input:checked + .tr::after { transform: translateX(16px); } .tgl input:focus-visible + .tr { box-shadow: 0 0 0 4px rgba(184, 224, 74, .45); } .check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-13); color: var(--sivy); margin: 4px 0 20px; line-height: 1.5; cursor: pointer; } .check input { width: 20px; height: 20px; accent-color: var(--odkaz); margin: 0; flex-shrink: 0; } .check a { color: var(--odkaz); font-weight: 700; } .check.err { color: #B3261E; } .check-chyba { display: block; margin: -14px 0 18px; font-size: var(--fs-13); font-weight: 600; color: #C0392B; } /* čipy počtu tímov */ .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chips label { cursor: pointer; } .chips input { position: absolute; opacity: 0; width: 0; height: 0; } .chips span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border: 1.5px solid var(--ram); border-radius: 999px; background: var(--pole-bg); font-size: var(--fs-14); font-weight: 700; color: var(--sivy); transition: all .15s; } .chips span:hover { border-color: #C3C9BD; } .chips input:checked + span { background: var(--tmava2); border-color: var(--tmava2); color: #fff; } .chips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(184, 224, 74, .45); } .btn { width: 100%; height: 60px; border: 0; border-radius: var(--r); background: var(--tmava2); color: #fff; font: inherit; font-weight: 700; font-size: var(--fs-16); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%); transform: translateX(-100%); transition: transform .7s; } .btn:hover::after { transform: translateX(100%); } .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(14, 42, 31, .75); background: #133528; } .btn:active { transform: translateY(0) scale(.99); } .btn:focus-visible, .switch__button:focus-visible, .tabs a:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; } .btn .arr { transition: transform .2s; } .btn:hover .arr { transform: translateX(4px); } .btn .spin { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } .btn.loading { pointer-events: none; background: #1C4634; } .btn.loading .spin { display: block; } .btn.loading .arr { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .sec { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: var(--fs-13); color: #8A988F; text-align: center; } .demo { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--ram); } .demo > span { display: block; font-size: var(--fs-12); color: var(--sivy); font-weight: 700; letter-spacing: 1.2px; margin-bottom: 12px; } .demo-mriezka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .demo-mriezka form { margin: 0; } .demo-btn { width: 100%; min-height: 76px; padding: 8px 4px; border-radius: var(--r); border: 1.5px solid var(--ram); background: var(--pole-bg); font: inherit; font-size: var(--fs-13); font-weight: 700; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: border-color .15s, transform .15s, box-shadow .15s; } .demo-btn svg { color: var(--odkaz); } /* Meno demo účtu pod rolou (napr. „Marek Kollár“) – dlhé meno sa skráti, nezalomí tlačidlo. */ .demo-btn-kto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); font-weight: 600; color: var(--sivy); } .demo-btn:hover { border-color: var(--tmava2); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(14, 42, 31, .6); } .foot { flex-shrink: 0; padding: 0 0 22px; text-align: center; font-size: var(--fs-12); color: #8A988F; } .foot a { color: inherit; } /* ===== HLÁSKY ZO SERVERA ===== */ .alert { border-radius: var(--r); padding: 12px 16px; font-size: var(--fs-14); font-weight: 600; margin: 0 0 20px; line-height: 1.45; } .alert-error { background: #FBE9E5; border: 1px solid #F3C9C0; color: #7A2318; } .alert-success { background: #E3F2D0; border: 1px solid #BFDCC9; color: #14472F; } .alert-info { background: var(--pole-bg); border: 1px solid var(--ram); color: var(--text); } /* Návnada proti robotom: pre človeka neviditeľná, pre čítačky obrazovky skrytá. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ===== PREPÍNACÍ PANEL ===== */ .switch { position: absolute; top: 0; left: var(--form); width: var(--panel); height: 100%; z-index: 300; color: #fff; overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, #1D4B37 0%, transparent 55%), radial-gradient(90% 70% at 0% 100%, #173F2E 0%, transparent 60%), var(--tmava); transition: transform var(--t) ease-in-out; } .switch.is-txr { transform: translateX(calc(var(--form) * -1)); } .switch.is-gx { animation: is-gx var(--t) ease-in-out; } @keyframes is-gx { 0%, 100% { width: var(--panel); } 50% { width: calc(var(--panel) + 14vw); } } /* čiary ihriska */ .pitch { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .13; transition: transform var(--t) ease-in-out; } .pitch.is-txr { transform: translateX(-6%) scale(1.04); } .switch__circle { position: absolute; width: 62vh; height: 62vh; border-radius: 50%; background: radial-gradient(circle, rgba(184, 224, 74, .22), rgba(184, 224, 74, 0) 65%); right: -18vh; top: -18vh; transition: transform var(--t) ease-in-out; } .switch__circle--t { position: absolute; width: 48vh; height: 48vh; border-radius: 50%; border: 1px solid rgba(184, 224, 74, .25); left: -16vh; bottom: -16vh; transition: transform var(--t) ease-in-out .08s; } .switch__circle.is-txr { transform: translateX(-30vw) translateY(10vh); } .switch__circle--t.is-txr { transform: translateX(24vw) translateY(-6vh); } .switch__logo { position: absolute; top: 36px; left: 44px; display: flex; align-items: center; gap: 11px; z-index: 3; } .switch__logo .w { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: var(--fs-20); letter-spacing: -.5px; } .switch__logo .w span { color: var(--akcent); } .switch__container { position: absolute; left: 44px; right: 44px; top: 50%; transform: translateY(-50%); z-index: 3; transition: opacity .9s ease-in-out, transform var(--t) ease-in-out, visibility var(--t); } .switch__container.is-hidden { visibility: hidden; opacity: 0; transform: translateY(-50%) translateX(50px) scale(.97); } .switch__title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(30px, 3.3vw, 48px); letter-spacing: -1.2px; line-height: 1.05; margin: 0 0 16px; } .switch__title em { font-style: normal; color: var(--akcent); } .switch__desc { margin: 0 0 26px; color: #B7CABE; font-size: var(--fs-16); line-height: 1.6; max-width: 420px; } .feats { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; } .feats li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-14); font-weight: 600; color: #DDE8E1; } .feats li b { width: 30px; height: 30px; border-radius: var(--r-s); background: rgba(184, 224, 74, .14); display: flex; align-items: center; justify-content: center; color: var(--akcent); flex-shrink: 0; } .switch__button { height: 52px; padding: 0 30px; border-radius: 999px; border: 0; background: var(--akcent); color: var(--tmava); font: inherit; font-weight: 700; letter-spacing: .6px; font-size: var(--fs-14); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s; } .switch__button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(184, 224, 74, .55); background: var(--akcent2); } .switch__button.is-disabled { opacity: .45; cursor: not-allowed; } .switch__button.is-disabled:hover { transform: none; box-shadow: none; background: var(--akcent); } /* plávajúce karty (čisto dekorácia, čísla sú vymyslené) */ .float { position: absolute; z-index: 2; background: rgba(255, 255, 255, .07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); padding: 14px 16px; display: flex; align-items: center; gap: 12px; animation: plav 6s ease-in-out infinite; transition: opacity .8s; } .float .n { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: var(--fs-20); } .float .l { font-size: var(--fs-12); color: #B7CABE; } .float.f1 { right: 44px; bottom: 15%; } .float.f2 { right: 22%; top: 14%; animation-delay: -3s; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 0 0 rgba(184, 224, 74, .7); animation: pulz 1.8s infinite; } @keyframes plav { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulz { 0% { box-shadow: 0 0 0 0 rgba(184, 224, 74, .6); } 70% { box-shadow: 0 0 0 10px rgba(184, 224, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(184, 224, 74, 0); } } .switch.is-txr .float { opacity: 0; } .main.is-animating * { pointer-events: none; } /* ===== MOBIL ===== */ .mhero, .tabs { display: none; } @media (max-width: 960px) { body { overflow: auto; } .main { height: auto; min-height: 100vh; } .switch, .float { display: none; } .mhero { display: block; background: radial-gradient(120% 90% at 90% 0%, #1D4B37 0, transparent 60%), var(--tmava); color: #fff; padding: 28px 22px 46px; } .mhero .t { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: var(--fs-28); letter-spacing: -.6px; margin: 22px 0 6px; line-height: 1.1; } .mhero .t em { font-style: normal; color: var(--akcent); } .mhero p { margin: 0; color: #B7CABE; font-size: var(--fs-14); } .mhero .switch__logo { position: static; } .tabs { display: flex; gap: 6px; margin: -22px 16px 0; position: relative; z-index: 5; background: var(--pole-bg); border: 1px solid var(--ram); border-radius: var(--r); padding: 5px; box-shadow: 0 12px 30px -18px rgba(14, 42, 31, .5); } .tabs a, .tabs .tab-off { flex: 1; height: 44px; border-radius: var(--r-m); border: 0; background: transparent; color: var(--sivy); font: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; } .tabs a.on { background: var(--tmava2); color: #fff; } .tabs .tab-off { opacity: .45; cursor: not-allowed; } .container { position: static; width: 100%; height: auto; padding: 30px 0 40px; transform: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible; flex-direction: column; } .a-container { display: none; } .main.mob-reg .a-container { display: flex; } .main.mob-reg .b-container { display: none; } .form-title { font-size: var(--fs-28); } .grid2 { grid-template-columns: 1fr; } .form { padding: 30px 18px; } .container .foot { position: static; margin-top: 28px; } .demo-btn { min-height: 70px; font-size: var(--fs-12); } .demo-btn-kto { font-size: var(--fs-12); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ===== TMAVÝ REŽIM (podľa nastavenia zariadenia; prihlasovacia stránka nepozná účet) ===== */ @media (prefers-color-scheme: dark) { :root { --pozadie: #0B1510; --ram: #2C4538; --text: #E8EFE9; --sivy: #A3B8AB; --pole-bg: #13231B; --odkaz: #8FD6A8; --vyber-bg: #1B3A2B; --hover-bg: #1B2E25; color-scheme: dark; } .main::before { background-image: radial-gradient(rgba(232, 239, 233, .06) 1px, transparent 1px); } .eyebrow { color: #8FD6A8; } .eyebrow i { background: #8FD6A8; } .inp input:hover, .inp textarea:hover { border-color: #3A5646; } .inp input:focus, .inp textarea:focus { border-color: var(--akcent); } .inp:focus-within .ic { color: var(--akcent); } .field.err .inp input, .field.err .inp textarea { background: #2A1714; } .msg, .check-chyba, .chyba { color: #FF8A78; } .check.err { color: #FF8A78; } .caps { background: #3B2F12; color: #F2D58A; } .tgl .tr { background: #3A5646; } .chips span { color: var(--sivy); } .chips span:hover { border-color: #3A5646; } .btn { background: #245A42; } .btn:hover { background: #2F6F53; } .demo { border-top-color: var(--ram); } .demo-btn { color: var(--text); } .sila-pruh { background: #2B4034; } .alert-error { background: #3A1C17; border-color: #6B3028; color: #F3B7AC; } .alert-success { background: #1C3B22; border-color: #2F5A3A; color: #B8E6A0; } .tabs a.on { background: #245A42; } .eye:hover { color: var(--akcent); } } /* ===== Tlačidlo „Späť na úvod“ a logo ako odkaz na úvod ===== */ .spat-uvod { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 10px; min-height: 40px; padding: 4px 18px 4px 4px; margin-bottom: 28px; border-radius: 999px; background: var(--pole-bg); border: 1.5px solid var(--ram); color: var(--odkaz); font-weight: 700; font-size: var(--fs-14); text-decoration: none; box-shadow: 0 6px 16px -12px rgba(14, 42, 31, .5); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* Variant „Odhlásiť sa“ je