/* =============== ZÁKLADNÍ STYL =============== */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #101820, #1f2a38); color: #fff; display: flex; flex-direction: column; min-height: 100vh; text-align: center; } main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; } /* =============== HEADER =============== */ header { background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; position: sticky; top: 0; z-index: 1000; } .logo { max-width: 160px; transition: transform 0.3s ease; } .logo:hover { transform: scale(1.05); } nav { display: flex; gap: 25px; } nav a { color: #fff; text-decoration: none; font-weight: bold; transition: color 0.3s; } nav a:hover, nav a.active { color: #00c3ff; } /* =============== SOCIAL + BUTTONS =============== */ .nav-right { display: flex; align-items: center; gap: 20px; } .socials { display: flex; gap: 12px; } .socials img { width: 24px; height: 24px; transition: 0.2s ease; } .socials img:hover { transform: scale(1.1); } .btn { padding: 8px 18px; border-radius: 6px; background: #00c3ff; color: #101820; font-weight: bold; text-decoration: none; transition: 0.2s ease; box-shadow: 0 4px 12px rgba(0, 195, 255, 0.3); } .btn:hover { background: #009ac7; transform: scale(1.05); } /* =============== FOOTER =============== */ footer { margin: 20px 0; font-size: 0.9rem; color: #aaa; } .note { margin-top: 8px; font-size: 0.85rem; color: #ff7777; } /* =============== PROJEKTY =============== */ .projects { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 10px; } .project { background: rgba(0, 0, 0, 0.35); border-radius: 12px; overflow: hidden; width: 320px; display: flex; flex-direction: column; transition: 0.25s; } .project:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 195, 255, 0.2); } .project-image img { width: 100%; height: 180px; object-fit: cover; } .project-content { padding: 1rem; } .project-content h3 { margin: 10px 0; } .project-content p { opacity: 0.9; } /* =============== MODAL OBECNÝ =============== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; justify-content: center; align-items: center; z-index: 9000; } .modal-box { background: #111821; padding: 25px; color: white; border-radius: 12px; width: 550px; max-width: 90%; box-shadow: 0 0 25px rgba(0,0,0,0.4); animation: fadeIn 0.2s ease-out; } .modal-box input, .modal-box textarea, .modal-box select { width: 100%; padding: 10px; margin-bottom: 12px; border-radius: 6px; background: rgba(255,255,255,0.1); border: none; color: white; } .modal-btns { display: flex; justify-content: flex-end; gap: 10px; } .btn-primary { background:#00c3ff; padding:10px 16px; border-radius:6px; cursor:pointer; border:none; color:#07121a; font-weight:bold; } .btn-secondary { background:#444; padding:10px 16px; border-radius:6px; cursor:pointer; border:none; } /* =============== TEAM PAGE =============== */ .team { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; max-width:1100px; } .member { background: rgba(0,0,0,0.35); padding:20px; border-radius:12px; width:220px; transition:0.3s ease; } .member:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,195,255,0.2); } .member img { width:100px; height:100px; border-radius:50%; border:3px solid #00c3ff; object-fit:cover; margin-bottom:10px; } /* =============== DASHBOARD - OZNÁMENÍ =============== */ .ann-box { background:rgba(255,255,255,0.04); padding:22px; border-radius:14px; margin-bottom:26px; text-align:left; box-shadow:0 6px 16px rgba(0,0,0,0.25); } .ann-title { font-size:1.4rem; font-weight:bold; color:#00c3ff; } .ann-meta { color:#aaa; margin-bottom:10px; } /* Reakce */ .react-btn { cursor:pointer; margin-right:12px; font-size:20px; transition:0.2s; } .react-btn:hover { transform:scale(1.2); } /* =============== SPRÁVA ZAMĚSTNANCŮ =============== */ .admin-wrapper { padding:24px; max-width:1100px; margin:20px auto; } .header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .input-search { padding:10px; border-radius:6px; border:none; background:rgba(255,255,255,0.1); color:white; } .users-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:20px; margin-top:20px; } .user-card { background:rgba(0,0,0,0.35); padding:14px; border-radius:12px; text-align:center; } .user-card img { width:100px; height:100px; border-radius:50%; border:3px solid #00c3ff; object-fit:cover; } .card-actions { margin-top:10px; display:flex; justify-content:center; gap:8px; } .action-btn { padding:6px 10px; border-radius:6px; cursor:pointer; font-weight:bold; border:none; } .edit-btn { background:#0088cc; color:white; } .del-btn { background:#ff4444; color:white; } /* =============== DROPDOWN UŽIVATELE =============== */ .user-dropdown { position:relative; cursor:pointer; display:flex; align-items:center; gap:10px; } .user-menu { position:absolute; top:40px; right:0; background:#111821; border-radius:8px; display:none; flex-direction:column; width:160px; } .user-menu a { padding:10px; text-decoration:none; color:white; } .user-menu a:hover { background:rgba(255,255,255,0.1); } /* =============== ANIMACE =============== */ @keyframes fadeIn { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }