/** * Styly hlavní navigace a dropdown menu (Informace). * Připojit v : */ /* Navbar glass */ .nav-glass { background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } .btn-nav-outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); } .btn-nav-outline:hover { border-color: rgba(255, 255, 255, 0.5); } .btn-nav-primary { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); } .btn-nav-primary:hover { border-color: rgba(255, 255, 255, 0.4); } /* Hover fill animace – výplň zdola s zaobleným tvarem */ .btn-fill-hover { position: relative; overflow: hidden; z-index: 0; } .btn-fill-hover::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform: scaleY(0); transform-origin: bottom center; transition: transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1); border-radius: 14px 14px 4px 4px; } .btn-fill-hover:hover::before { transform: scaleY(1); } .btn-nav-outline.btn-fill-hover::before { background: rgba(255, 255, 255, 0.18); } .btn-nav-primary.btn-fill-hover::before { background: rgba(255, 255, 255, 0.22); } /* Mobilní menu overlay */ .mobile-menu-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-menu-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; } .mobile-menu-panel { transform: translateX(100%); transition: transform 0.3s ease; } .mobile-menu-overlay.open .mobile-menu-panel { transform: translateX(0); } .hamburger-line { transition: transform 0.3s ease, opacity 0.3s ease; } .hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Desktop info dropdown – hover, širší panel s ikonami a popisy */ .nav-info-dropdown-trigger { color: rgba(255, 255, 255, 0.9); background: transparent; border: none; font-weight: 500; } .nav-info-dropdown-trigger:hover { color: #fff; } .nav-info-dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; width: 50vw; min-width: 420px; max-width: 720px; background: rgba(22, 22, 24, 0.98); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); padding: 0; pointer-events: none; left: 0; right: auto; } .nav-info-dropdown.open .nav-info-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-info-dropdown-panel-inner { display: grid; grid-template-columns: 1fr auto; gap: 0; min-height: 280px; } .nav-info-dropdown-links { padding: 14px 0; } .nav-info-dropdown-panel a { display: flex; align-items: flex-start; gap: 18px; padding: 18px 24px; color: rgba(255, 255, 255, 0.95); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .nav-info-dropdown-panel a .nav-info-text { display: flex; flex-direction: column; gap: 4px; } .nav-info-dropdown-panel a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .nav-info-dropdown-panel a .nav-info-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); border-radius: 12px; font-size: 20px; color: #fff; flex-shrink: 0; } .nav-info-dropdown-panel a:hover .nav-info-icon { background: rgba(255, 255, 255, 0.15); } .nav-info-dropdown-panel a .nav-info-title { display: block; font-size: 16px; font-weight: 600; color: inherit; line-height: 1.25; } .nav-info-dropdown-panel a .nav-info-desc { display: block; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.55); line-height: 1.35; } .nav-info-dropdown-panel a:hover .nav-info-desc { color: rgba(255, 255, 255, 0.75); } .nav-info-dropdown-cta { background: rgba(255, 255, 255, 0.06); border-left: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 14px 14px 0; padding: 20px 20px 24px; min-width: 180px; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .nav-info-dropdown-cta p { font-size: 14px; color: rgba(255, 255, 255, 0.9); margin: 0; line-height: 1.4; } .nav-info-dropdown-cta a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; background: #fff; color: #000; font-size: 14px; font-weight: 600; border-radius: 10px; text-decoration: none; transition: background 0.2s, transform 0.15s; } .nav-info-dropdown-cta a.btn:hover { background: rgba(255, 255, 255, 0.9); }