@pmidc/upyog-css 1.2.36-dev.1.35 → 1.2.36-dev.1.37

package/src/pages/employee/index.scss

@@ -7,7 +7,7 @@
   .ground-container {
     margin-bottom: 56px;
     margin-left: 0px;
-    margin-top: 5rem !important;
+    margin-top: 3rem !important;
     @apply flex flex-col;
   }
   .card-home {
@@ -66,7 +66,6 @@
 
   .main {
     padding: 10px;
-    
   }
 
   @media (min-width: 640px) {
@@ -80,7 +79,7 @@
   .submit-bar header {
     height: 2rem !important;
     line-height: 2rem !important;
-    background-color: #003C71;
+    background-color: #2947a3;
   }
 
   .loginContainer {
@@ -216,19 +215,18 @@
       cursor: pointer;
       display: flex;
       align-items: center;
-      gap: 10px;
       .tooltip {
-        margin-left: 4px;
+        margin-left: 12px;
       }
     }
 
     svg {
-      width: 24px;
-      height: 24px;
-      fill: #626A6E;
+      width: 10px;
+      height: 10px;
+      fill: #374151;
       transition: fill 0.18s ease;
-      margin-right: 0;
-      margin-left: 0;
+      margin-right: 20px;
+      margin-left: -10px;
     }
 
     a {
@@ -244,36 +242,27 @@
       align-items: center;
       padding: 12px 18px;
       font-size: 14px;
-      border-left: 3px solid transparent;
+      border-left: 4px solid transparent;
       border-radius: 8px;
-      margin: 4px 8px;
+      margin: 6px 8px;
       transition: all 0.18s ease;
 
       &.active {
-        color: #003C71 !important;
-        background: #EEF4FF;
-        border-left-color: #003C71;
+        color: #ffffff !important;
+        background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
+        border-left-color: #2563eb;
         svg {
-          fill: #003C71 !important;
-        }
-        .nav-icon-box {
-          background-color: #003C71;
-          svg {
-            fill: #ffffff !important;
-          }
+          fill: #ffffff !important;
         }
       }
 
       &:hover {
-        color: #003C71 !important;
-        background-color: rgba(0, 60, 113, 0.06);
-        border-left-color: rgba(0, 60, 113, 0.18);
+        color: #0d43a7 !important;
+        background-color: rgba(37, 99, 235, 0.06);
+        border-left-color: rgba(37, 99, 235, 0.16);
         cursor: pointer;
         svg {
-          fill: #003C71 !important;
-        }
-        .nav-icon-box {
-          background-color: rgba(0, 60, 113, 0.12);
+          fill: #0d43a7 !important;
         }
       }
 
@@ -306,13 +295,10 @@
       }
 
       span {
-        margin-left: 0;
+        margin-left: 12px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        max-width: calc(100% - 56px);
-        font-size: 13px;
-        font-weight: 500;
       }
     }
 
@@ -323,9 +309,7 @@
       align-items: center;
       text-decoration: none;
       color: #374151;
-      font-size: 13px;
-      border-left: 2px solid transparent;
-      transition: all 0.18s ease;
+      font-size: 14px;
       .actions {
         .tooltiptext {
           left: unset;
@@ -333,38 +317,12 @@
         }
       }
       svg {
-        width: 16px;
-        height: 16px;
-        fill: #626A6E;
+        width: 20px;
+        height: 20px;
+        fill: #6b7280;
       }
       &:hover {
-        background: rgba(0, 60, 113, 0.05);
-        color: #003C71;
-        border-left-color: rgba(0, 60, 113, 0.25);
-      }
-      &.active {
-        color: #003C71;
-        font-weight: 600;
-        border-left-color: #003C71;
-        background: rgba(0, 60, 113, 0.04);
-      }
-    }
-
-    .nav-icon-box {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      min-width: 32px;
-      border-radius: 8px;
-      background-color: #F0F4F9;
-      transition: background-color 0.18s ease;
-      svg {
-        width: 17px !important;
-        height: 17px !important;
-        margin: 0 !important;
-        fill: #626A6E;
+        background: rgba(99, 102, 241, 0.06);
       }
     }
   }
@@ -480,7 +438,7 @@
 }
 
 .RightMostTopBarOptions {
-  @apply flex ;
+  @apply flex;
   display: flex;
   .EventNotificationWrapper {
     @apply relative cursor-pointer;
@@ -498,7 +456,8 @@
     svg {
       fill: #a82227;
     }
-    .form-field, .field{
+    .form-field,
+    .field {
       width: 100%;
     }
   }
@@ -598,7 +557,7 @@
 @media only screen and (max-width: 639px) {
   .employee .ground-container {
     margin-top: 1rem;
-  } 
+  }
 }
 
 @media only screen and (max-width: 950px) {
@@ -731,4 +690,4 @@
       grid-template-columns: 1fr;
     }
   }
-}
+}

package/src/pages/employee/landing.scss

@@ -1800,4 +1800,275 @@
   color: #475569;
   line-height: 1.6;
   margin: 0;
-}
+}
+
+/* mSeva Punjab public landing theme */
+.landing-page {
+  --landing-blue: #0756a8;
+  --landing-blue-dark: #063a78;
+  --landing-green: #16833b;
+  --landing-green-dark: #0b6530;
+  --landing-ink: #132447;
+  --landing-muted: #52627e;
+  background: #f4f8fe;
+  color: var(--landing-ink);
+  font-family: "Outfit", "Noto Sans", sans-serif;
+}
+
+.landing-site-header {
+  min-height: 90px;
+  padding: 10px clamp(20px, 5vw, 72px);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  background: #ffffff;
+  border-bottom: 1px solid #dbe7f5;
+  box-shadow: 0 6px 20px rgba(11, 66, 132, 0.08);
+}
+
+.landing-site-header__brand,
+.landing-site-header__actions {
+  display: flex;
+  align-items: center;
+}
+
+.landing-site-header__brand {
+  gap: 18px;
+  min-width: 0;
+}
+
+.landing-site-header__logo {
+  width: 190px;
+  height: 70px;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.landing-site-header__identity {
+  display: grid;
+  gap: 3px;
+  padding-left: 18px;
+  border-left: 1px solid #d6e1ef;
+  color: var(--landing-blue-dark);
+  line-height: 1.2;
+
+  span {
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  strong {
+    color: var(--landing-muted);
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.landing-site-header__actions {
+  gap: 10px;
+
+  button {
+    min-height: 42px;
+    padding: 0 18px;
+    border: 1px solid #b8d0e9;
+    border-radius: 8px;
+    background: #ffffff;
+    color: var(--landing-blue-dark);
+    font: inherit;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      border-color: var(--landing-blue);
+      background: #edf6ff;
+    }
+
+    &:last-child {
+      border-color: var(--landing-green);
+      background: var(--landing-green);
+      color: #ffffff;
+
+      &:hover {
+        border-color: var(--landing-green-dark);
+        background: var(--landing-green-dark);
+      }
+    }
+  }
+}
+
+.landing-hero {
+  min-height: 590px;
+  padding: 76px clamp(20px, 5vw, 72px);
+  background-image: linear-gradient(90deg, rgba(4, 35, 83, 0.96) 0%, rgba(5, 57, 116, 0.9) 38%, rgba(6, 76, 129, 0.48) 62%, rgba(9, 103, 53, 0.32) 100%), url("/citizen-dashboard-golden-temple.jpeg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.landing-hero::before {
+  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 50%);
+  opacity: 1;
+}
+
+.landing-hero-overlay {
+  background: linear-gradient(135deg, rgba(1, 34, 75, 0.14), rgba(18, 126, 62, 0.12));
+}
+
+.landing-hero-content {
+  max-width: 1220px;
+  align-items: flex-start;
+  gap: 42px;
+}
+
+.landing-hero-text {
+  max-width: 660px;
+  text-align: left;
+}
+
+.landing-hero-title {
+  margin-bottom: 14px;
+  color: #ffffff;
+  font-size: clamp(38px, 4vw, 58px);
+  letter-spacing: -0.03em;
+  text-shadow: 0 2px 12px rgba(1, 24, 57, 0.35);
+
+  span {
+    background: none;
+    -webkit-background-clip: initial;
+    -webkit-text-fill-color: #8ee69c;
+    background-clip: initial;
+    color: #8ee69c;
+  }
+}
+
+.landing-hero-subtitle {
+  max-width: 590px;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 18px;
+  line-height: 1.65;
+}
+
+.landing-login-cards {
+  justify-content: flex-start;
+  gap: 18px;
+}
+
+.landing-login-card {
+  width: min(330px, calc(50vw - 52px));
+  padding: 26px;
+  border: 1px solid rgba(212, 230, 249, 0.9);
+  border-radius: 16px;
+  box-shadow: 0 18px 44px rgba(0, 23, 56, 0.24);
+  backdrop-filter: blur(8px);
+
+  &::before {
+    height: 4px;
+    background: linear-gradient(90deg, var(--landing-blue), var(--landing-green));
+  }
+
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 24px 50px rgba(0, 23, 56, 0.3);
+  }
+}
+
+.landing-login-card-icon {
+  width: 58px;
+  height: 58px;
+  margin-bottom: 18px;
+  border-radius: 15px;
+}
+
+.landing-login-card-title {
+  color: var(--landing-ink);
+  font-size: 22px;
+}
+
+.landing-login-card-desc {
+  min-height: 46px;
+  color: var(--landing-muted);
+}
+
+.landing-login-card-btn {
+  border-radius: 8px;
+  background: #eef5fc;
+  color: var(--landing-blue-dark);
+}
+
+.landing-login-card-citizen:hover .landing-login-card-btn {
+  background: var(--landing-blue);
+}
+
+.landing-login-card-employee:hover .landing-login-card-btn {
+  background: var(--landing-green);
+}
+
+.landing-footer {
+  background: #063368;
+}
+
+.landing-footer-bottom {
+  background: #04244b;
+}
+
+@media (max-width: 768px) {
+  .landing-site-header {
+    min-height: 0;
+    padding: 8px 18px;
+  }
+
+  .landing-site-header__logo {
+    width: 136px;
+    height: 46px;
+  }
+
+  .landing-site-header__identity {
+    display: none;
+  }
+
+  .landing-site-header__actions {
+    gap: 6px;
+
+    button {
+      min-height: 36px;
+      padding: 0 10px;
+      font-size: 12px;
+    }
+  }
+
+  .landing-hero {
+    min-height: auto;
+    padding: 60px 20px;
+    background-image: linear-gradient(180deg, rgba(4, 35, 83, 0.91), rgba(6, 78, 120, 0.68)), url("/citizen-dashboard-golden-temple.jpeg");
+    background-position: 60% center;
+  }
+
+  .landing-hero-content {
+    align-items: stretch;
+    gap: 32px;
+  }
+
+  .landing-hero-text {
+    text-align: left;
+  }
+
+  .landing-hero-subtitle {
+    font-size: 16px;
+  }
+
+  .landing-login-cards {
+    max-width: none;
+  }
+
+  .landing-login-card {
+    width: 100%;
+    padding: 24px;
+  }
+
+  .landing-login-card-desc {
+    min-height: auto;
+  }
+}

package/src/pages/employee/login.scss

@@ -250,4 +250,4 @@
 .employee-login-form .submit-bar {
   padding: 0 !important;
   margin-top: 0 !important;
-}
+}