@pmidc/upyog-css 1.2.36-UAT.32 → 1.2.36-UAT.34

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;
+  }
+}