Update certStyles.css

Author: NovaDev404

web/certStyles.css

@@ -1 +1,172 @@
+/* =========================================
+   certStyles.css
+   ONLY extra styles for Certificate Manager
+   (Relies on variables & layout from styles.css)
+   ========================================= */
 
+/* -------------------------
+   Recommended box
+   ------------------------- */
+
+.recommended-box {
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  background: linear-gradient(
+    90deg,
+    rgba(78, 229, 255, 0.15),
+    rgba(139, 92, 246, 0.12)
+  );
+  border: 1px solid var(--border);
+  font-weight: 500;
+}
+
+/* -------------------------
+   Cert list container
+   ------------------------- */
+
+.cert-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  margin-top: 12px;
+}
+
+/* -------------------------
+   Individual cert card
+   ------------------------- */
+
+.cert-card {
+  background: var(--panel);
+  border-radius: 14px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+.cert-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1);
+}
+
+/* -------------------------
+   Updates dropdown (collapsible)
+   ------------------------- */
+
+.updates-box {
+  position: sticky;
+  bottom: 16px;
+  margin-top: 20px;
+
+  background: var(--panel);
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
+
+  overflow: visible; /* IMPORTANT: allow upward expansion */
+  z-index: 50;
+}
+
+/* Header row */
+.updates-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  cursor: pointer;
+}
+
+.updates-title {
+  margin: 0;
+  font-size: 15px;
+}
+
+/* Caret toggle */
+.updates-toggle {
+  border: none;
+  background: transparent;
+  font-size: 16px;
+  cursor: pointer;
+  transition: transform 0.18s ease;
+}
+
+/* -------------------------
+   Updates content (STARTS CLOSED)
+   ------------------------- */
+
+.updates-inner {
+  position: absolute;
+  bottom: 100%;            /* EXPAND UPWARDS */
+  left: 0;
+  width: 100%;
+
+  max-height: 0;           /* START MINIMISED */
+  overflow: hidden;
+
+  background: var(--panel);
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.14);
+
+  transition: max-height 0.28s ease;
+}
+
+/* Expanded state (set via JS) */
+.updates-box.expanded .updates-inner {
+  max-height: 80vh;        /* grow to fit content */
+  overflow-y: auto;
+}
+
+/* Rotate caret when open */
+.updates-box.expanded .updates-toggle {
+  transform: rotate(180deg);
+}
+
+/* Inner content padding */
+.updates-inner > * {
+  padding: 12px 14px;
+}
+
+/* -------------------------
+   Modal (cert details)
+   ------------------------- */
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal[aria-hidden="false"] {
+  display: flex;
+}
+
+.modal-panel {
+  background: var(--panel);
+  border-radius: 18px;
+  padding: 22px;
+  width: min(520px, 92vw);
+  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.25);
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.modal-meta,
+.modal-dates,
+.modal-download {
+  margin-top: 12px;
+}