Update certStyles.css

Author: NovaDev404

web/certStyles.css

@@ -1,61 +1,188 @@
-#recommended, #updates {
-  margin: 20px 0;
-  padding: 16px;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #1a1f3c, #12152a);
+:root{
+  --bg: #f6f7fb;
+  --panel: #ffffff;
+  --muted: #6b7280;
+  --text: #0f1724;
+  --primary: #2563eb; /* blue */
+  --revoked: #ef4444;
+  --valid: #10b981;
+  --card-border: rgba(15,23,36,0.06);
+  --glass: rgba(15,23,36,0.02);
+  --shadow: 0 6px 18px rgba(15,23,36,0.06);
+  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }
 
-#recommended {
-  border-left: 5px solid #4f7cff;
+html,body{
+  height:100%;
+  margin:0;
+  background:var(--bg);
+  color:var(--text);
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+  font-size:14px;
 }
 
-#recommended h2 {
-  margin: 0 0 6px 0;
-  color: #4f7cff;
+/* keep your main styles intact, this just targets the new components */
+.panel {
+  background: var(--panel);
+  padding: 22px;
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  margin: 18px;
 }
 
-#updates h2 {
-  margin-bottom: 10px;
+/* Recommended box */
+.recommended-box {
+  border-left: 4px solid var(--primary);
+  padding: 12px 14px;
+  background: linear-gradient(180deg, #ffffff, #fbfcff);
+  border-radius: 8px;
+  margin-bottom: 14px;
 }
-
-.update-item {
-  opacity: 0.9;
-  margin-bottom: 6px;
-  font-size: 14px;
+.recommended-box h3 {
+  margin: 0 0 6px 0;
+  color: var(--primary);
+  font-weight:600;
+}
+.recommended-box p {
+  margin:0;
+  color:var(--muted);
 }
 
-.cert-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
+/* Certificate list (cards) */
+.cert-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 12px;
+  margin-top: 18px;
 }
 
-.cert-table th, .cert-table td {
+/* individual card */
+.cert-card {
+  background: var(--panel);
+  border: 1px solid var(--card-border);
   padding: 12px;
-  text-align: left;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: transform .12s ease, box-shadow .12s ease;
+  display:flex;
+  flex-direction:column;
+  gap:8px;
 }
-
-.cert-table th {
-  background: #181c36;
+.cert-card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 10px 26px rgba(15,23,36,0.08);
 }
-
-.cert-table tr {
-  border-bottom: 1px solid #2a2f55;
+.card-top {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+.card-title {
+  font-weight:600;
+  font-size:15px;
+  color:var(--text);
+  line-height:1.2;
+}
+.card-meta {
+  font-size:13px;
+  color:var(--muted);
+}
+.badge {
+  padding:6px 8px;
+  border-radius:999px;
+  font-size:12px;
+  font-weight:600;
+  display:inline-block;
+}
+.badge.revoked {
+  background: rgba(239,68,68,0.08);
+  color: var(--revoked);
+  border: 1px solid rgba(239,68,68,0.12);
+}
+.badge.valid {
+  background: rgba(16,185,129,0.08);
+  color: var(--valid);
+  border: 1px solid rgba(16,185,129,0.12);
 }
 
-.status {
-  font-weight: bold;
+/* small footer row inside card */
+.card-footer {
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:10px;
+  margin-top:6px;
+}
+.card-footer .small {
+  font-size:12px;
+  color:var(--muted);
 }
 
-.status.revoked {
-  color: #ff5f57;
+/* Updates box */
+.updates-box {
+  margin-top:20px;
+  padding:12px;
+  background:var(--glass);
+  border-radius:10px;
+  border:1px solid var(--card-border);
+}
+.updates-title { margin: 0 0 8px 0; font-weight:600; color:var(--text); }
+.updates-inner {
+  max-height:140px; /* prevents cutting off — will scroll */
+  overflow-y:auto;
+  padding-right:6px;
+}
+.update-item {
+  margin-bottom:8px;
+  font-size:13px;
+  color:var(--muted);
 }
 
-.cert-table a {
-  color: #4f7cff;
-  text-decoration: none;
+/* Modal */
+.modal {
+  position:fixed;
+  inset:0;
+  display:none;
+  align-items:center;
+  justify-content:center;
+  background: rgba(10,12,20,0.35);
+  z-index:9999;
+}
+.modal.show { display:flex; }
+.modal-panel {
+  background:var(--panel);
+  width: min(720px, 96%);
+  border-radius:12px;
+  padding:20px;
+  box-shadow: 0 20px 60px rgba(2,6,23,0.35);
+  position:relative;
+}
+.modal-close {
+  position:absolute;
+  right:12px;
+  top:10px;
+  border:none;
+  background:transparent;
+  font-size:16px;
+  cursor:pointer;
+  color:var(--muted);
+}
+.modal-meta { color:var(--muted); margin:8px 0; font-size:13px; }
+.modal-dates { margin:8px 0; font-size:13px; color:var(--muted); }
+.modal-download a {
+  display:inline-block;
+  margin-top:10px;
+  padding:10px 14px;
+  border-radius:8px;
+  background:var(--primary);
+  color:white;
+  text-decoration:none;
+  font-weight:600;
 }
 
-.cert-table a:hover {
-  text-decoration: underline;
+/* small responsive tweaks */
+@media (max-width:420px){
+  .cert-list { grid-template-columns: 1fr; }
+  .modal-panel { padding:14px; }
 }