.dashboard-right .update-entry { animation: 0.6s ease-out both fadeInUp; } .dashboard-right .update-entry:nth-child(1) { animation-delay: 0.1s; } .dashboard-right .update-entry:nth-child(2) { animation-delay: 0.2s; } .dashboard-right .update-entry:nth-child(3) { animation-delay: 0.3s; } .dashboard-right .update-entry:nth-child(4) { animation-delay: 0.4s; } .updates-dashboard { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; background: #ffffff; border-radius: 14px; padding: 35px; margin: 0 0 50px 0; box-shadow: 0 10px 30px rgba(0, 86, 179, 0.05); border: 1px solid #e1e8f0; animation: 0.8s ease-out both fadeInUp; } .status-indicator { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .status-label { font-size: 14px; color: #000000; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; } .status-value { color: #7f8c8d; font-size: 14px; } .pulse-icon { display: block; flex-shrink: 0; width: 10px; height: 10px; background: #27ae60; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(39, 174, 96, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); } } .updates-dashboard h2 { color: #0056b3; margin-bottom: 10px; font-size: 24px; } .project-info-block p { font-size: 14px; color: #5f6c7b; margin-bottom: 12px; } .usage-reminder { background: #f8fafc; border-left: 4px solid #cbd5e1; padding: 12px 15px; border-radius: 14px; font-size: 13px; color: #475569; margin-bottom: 20px; line-height: 1.5; } .usage-reminder strong { color: #0056b3; } .btn-full-history { background: transparent; border: 2px solid #0056b3; color: #0056b3; padding: 10px 20px; border-radius: 14px; font-weight: 600; cursor: pointer; transition: 0.3s; margin-top: 5px; } .btn-full-history:hover { background: #0056b3; color: #fff; } .dashboard-right { display: flex; flex-direction: column; gap: 12px; } .update-entry { border-radius: 14px; padding: 15px; border-left: 4px solid #cbd5e1; } .update-entry.new { border-left-color: #27ae60; background: #f0fff4; } .update-entry.edit { border-left-color: #818cf8; background: #f5f3ff; } .update-entry.doc { border-left-color: #0ea5e9; background: #f0f9ff; } .entry-body { font-size: 14px; color: #334155; } .modal-overlay { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(20, 22, 28, 0); pointer-events: none; transition: opacity 0.2s ease, background-color 0.2s ease; } .modal-overlay.show { opacity: 1; pointer-events: auto; background: rgba(20, 22, 28, 0.62); } .modal-window { background: #fff; width: 90%; max-width: 1000px; margin: 50px auto; border-radius: 14px; overflow: hidden; transform: translateY(28px); opacity: 0; transition: transform 0.24s cubic-bezier(.22,.61,.36,1), opacity 0.2s ease; will-change: transform, opacity; } .modal-overlay.hide .modal-window { transform: translateY(28px); opacity: 0; } .modal-overlay.show .modal-window { transform: translateY(0); opacity: 1; } .modal-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; } .close-modal { cursor: pointer; font-size: 30px; color: #aaa; font-weight: 400; } .close-modal:hover { color: red; } .timeline-row { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #eee; align-items: center; } .timeline-row:first-child { padding-top: 0; } .t-date { font-weight: bold; color: #0056b3; min-width: 90px; font-size: 14px; } @media (max-width: 768px) { .updates-dashboard { grid-template-columns: 1fr; gap: 20px; padding: 20px; } } .package-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 20px; max-width: 1200px; margin: 30px auto; } .package-card { background-color: #fff; border-radius: 14px; min-height: 150px; box-shadow: 0 5px 20px rgba(0,0,0,.1); text-decoration: none; color: #1976d2; font-weight: 700; overflow: hidden; padding: 0; animation: .6s ease-out both fadeInUp; transition: box-shadow .3s,transform .3s } .package-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.15); transform: scale(1.02) } .package-card-inner { padding: 40px 20px 20px 20px; position: relative; z-index: 2; text-align: center } .package-card h6 { font-size: 12px; font-weight: 400; color: #444; margin-top: 10px; margin-bottom: 0 } .package-number { transition: color .3s; position: absolute; right: 0; bottom: 0; font-size: 130px; font-weight: 900; color: rgba(25,118,210,.06); z-index: 1; line-height: 1; pointer-events: none; margin: 0; padding: 0; transform: translate(8%,12%) } .package-card:hover .package-number { color: rgba(25,118,210,.12) } .package-title { display: inline-block; transition: color .3s,transform .3s; color: #0659a1; font-size: 15px } .package-card:hover .package-title { color: #073054 } .package-card { position: relative; display: block } @media (max-width: 480px) { .package-number { transform:translate(10%,15%) } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } .delay-1 { animation-delay: .1s } .delay-2 { animation-delay: .2s } .delay-3 { animation-delay: .3s } .delay-4 { animation-delay: .4s } .delay-5 { animation-delay: .5s } .delay-6 { animation-delay: .6s } .modal-window h3 { line-height: 1.2em; font-weight: 400; margin: 0; }