.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 { 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; line-height: 1.6; 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 { background: #f8fafc; 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; } .badge { font-size: 10px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; color: #fff; font-weight: bold; } .badge-new { background: #27ae60; } .badge-edit { background: #818cf8; } .badge-doc { background: #0ea5e9; } .entry-date { font-size: 12px; color:#94a3b8; margin-left: 10px; } .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(0,0,0,0); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, background-color 0.2s ease, backdrop-filter 0.2s ease; } .modal-overlay.show { opacity: 1; pointer-events: auto; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); } .modal-window { background: #fff; width: 90%; max-width: 700px; 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: 10px 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: 20px; padding: 15px 0; border-bottom: 1px solid #f0f0f0; } .t-date { font-weight: bold; color: #0056b3; min-width: 90px; font-size: 14px; } .badge-mini { font-size: 11px; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; color: #fff; margin-right: 5px; vertical-align: middle; } @media (max-width: 768px) { .updates-dashboard { grid-template-columns: 1fr; gap: 20px; padding: 20px; } } body.modal-open { overflow: hidden; } #scrollToTop,.menu-toggle { display: none } body { background: #f5f5f5; font-family: sans-serif; margin: 0; padding: 0 } .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: 140px; 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: 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 } p { margin: 10px 0 0 0; } .package-status { position: absolute; top: 10px; left: 10px; z-index: 10; padding: 4px 10px; border-radius: 14px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; line-height: 1; } .package-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background-color: currentColor; position: relative; z-index: 2; } .package-status::after { content: ''; position: absolute; left: 10px; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; animation: pulseWave 2s infinite; z-index: 1; opacity: 0.6; } .package-status.partial { background-color: #fffaf0; color: #d97706; border-color: #fef3c7; } .package-status.ok { background-color: #f0fdf4; color: #16a34a; border-color: #bbf7d0; } @keyframes pulseWave { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(3.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } .package-card-inner { padding-top: 40px !important; } @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 } .site-footer { text-align: center; padding: 10px 40px; font-size: 15px } .site-branding { text-align: center; padding: 10px 0; } .site-branding, .site-footer, .site-main { background-color: #fff; } .brand-container { margin: 0; padding: 0; line-height: 1; } .brand-link { text-decoration: none !important; display: inline-flex; align-items: center; gap: 10px; font-family: 'Inter', -apple-system, sans-serif; } .tag-info { background: #1e293b; color: #ffffff; font-size: 13px; font-weight: 900; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; line-height: 1; } .text-pmg { font-size: 38px; font-weight: 900; line-height: 1; display: inline-block; background: linear-gradient(268deg, #2c4a86 0%, #1a2a44 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .site-description { font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: #94a3b8; margin-top: 10px !important; font-weight: 600; } #scrollToTop:hover { background-color: #777777db; transform: translateY(-2px) } #scrollToTop { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; min-width: 45px; background-color: #0006; color: #fff; font-size: 20px; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 1000; transition: background-color .2s,transform .2s } .site-main { position: relative; width: auto; padding: 40px; margin: 20px auto; border-radius: 14px; max-width: 1400px } a { text-decoration: none; background-color: transparent; color: #0659a1 } a:hover,a:focus,a:active { color: #191970 } body,button,input,select,optgroup,textarea { font-size: 17px; line-height: 1.5; max-width: 100%; } @media (max-width: 600px) { body,button,input,select,optgroup,textarea { font-size:14px } .btn-diagnosis,.btn-service { min-width: 90px } } h1,h2,h3,h4,h5,h6 { clear: both; margin: 0; } .modal-window h3 { font-size: 25px; line-height: 1.2em; font-weight: 400; } *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important }