* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
font-family:
Inter,
"Segoe UI",
Arial,
sans-serif;
}
body {
background: #f4f7fb;
color: #14213d;
}
button,
input {
font: inherit;
}
button {
cursor: pointer;
}
.login-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(480px, 52%) minmax(520px, 48%);
}
/* ==========================================
BRAND PANEL
========================================== */
.login-brand {
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 20% 10%,
rgba(45, 145, 255, .18),
transparent 30%
),
linear-gradient(
145deg,
#071b3d,
#0a2c61 58%,
#073d67
);
color: white;
}
.login-brand::before {
content: "";
position: absolute;
inset: 0;
opacity: .18;
background-image:
radial-gradient(
rgba(255,255,255,.45) 1px,
transparent 1px
);
background-size: 22px 22px;
}
.brand-content {
position: relative;
z-index: 1;
min-height: 100vh;
padding:
clamp(38px, 6vw, 78px)
clamp(36px, 5vw, 80px);
display: flex;
flex-direction: column;
justify-content: center;
}
.brand-logo {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 58px;
}
.brand-mark {
width: 58px;
height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
background:
linear-gradient(
135deg,
#2d8cff,
#19c49a
);
box-shadow:
0 12px 35px rgba(0,0,0,.25);
}
.brand-mark span {
font-size: 13px;
font-weight: 800;
}
.brand-name {
font-size: 32px;
font-weight: 800;
letter-spacing: -1px;
}
.brand-name span {
color: #40bfff;
}
.brand-line {
display: flex;
height: 3px;
width: 150px;
margin: 6px 0 7px;
border-radius: 99px;
overflow: hidden;
}
.brand-line span:nth-child(1) {
flex: 1;
background: #ff9d35;
}
.brand-line span:nth-child(2) {
flex: 1;
background: white;
}
.brand-line span:nth-child(3) {
flex: 1;
background: #25b875;
}
.brand-subtitle {
font-size: 9px;
letter-spacing: 2.2px;
color: #8fd5ff;
font-weight: 700;
}
.brand-eyebrow {
font-size: 12px;
letter-spacing: 2px;
color: #67c8ff;
font-weight: 700;
margin-bottom: 14px;
}
.brand-copy h1 {
max-width: 570px;
margin: 0;
font-size: clamp(40px, 4.1vw, 58px);
line-height: 1.04;
letter-spacing: -2px;
}
.brand-copy h1 strong {
display: block;
background:
linear-gradient(
90deg,
#42a5ff,
#43d6b0
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-copy p {
max-width: 560px;
margin: 22px 0 0;
color: #c4d6ee;
font-size: 16px;
line-height: 1.7;
}
.feature-list {
margin-top: 42px;
display: grid;
gap: 18px;
}
.feature-item {
display: flex;
align-items: center;
gap: 15px;
}
.feature-icon {
width: 43px;
height: 43px;
flex: 0 0 43px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255,255,255,.1);
}
.feature-icon svg {
width: 20px;
}
.feature-icon.blue {
color: #56b8ff;
}
.feature-icon.green {
color: #42d39d;
}
.feature-icon.purple {
color: #b28cff;
}
.feature-icon.orange {
color: #ffae54;
}
.feature-item strong {
display: block;
font-size: 14px;
}
.feature-item span {
display: block;
margin-top: 3px;
color: #9eb5d1;
font-size: 12px;
}
/* ==========================================
LOGIN PANEL
========================================== */
.login-panel {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 62px 34px 34px;
background:
linear-gradient(
145deg,
#f9fbff,
#edf4fb
);
}
.language-selector {
position: absolute;
right: 30px;
top: 25px;
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border: 1px solid #dce6f2;
border-radius: 12px;
background: white;
color: #53657e;
font-size: 13px;
box-shadow: 0 5px 20px rgba(24,53,87,.06);
}
.language-selector svg {
width: 15px;
}
.login-card {
width: min(100%, 500px);
padding: clamp(30px, 4vw, 44px);
border-radius: 24px;
background: white;
border: 1px solid #e5ebf3;
box-shadow:
0 25px 70px rgba(28,58,94,.12);
}
.login-icon {
width: 58px;
height: 58px;
margin: 0 auto 18px;
display: grid;
place-items: center;
border-radius: 50%;
color: #2379e8;
background: #edf5ff;
}
.login-icon svg {
width: 28px;
}
.login-card h2 {
margin: 0;
text-align: center;
color: #10254a;
font-size: 27px;
letter-spacing: -.7px;
}
.login-subtitle {
margin: 8px 0 26px;
text-align: center;
color: #718096;
font-size: 14px;
}
/* ==========================================
STEPPER
========================================== */
.stepper {
display: flex;
align-items: center;
margin-bottom: 28px;
}
.step {
display: flex;
align-items: center;
gap: 9px;
color: #9aa8bb;
font-size: 12px;
}
.step span {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid #d5deea;
background: white;
font-weight: 700;
}
.step.active {
color: #2276e6;
}
.step.active span {
color: white;
border-color: #2276e6;
background: #2276e6;
}
.step-line {
height: 1px;
flex: 1;
margin: 0 12px;
background: #dce4ee;
}
/* ==========================================
MESSAGE
========================================== */
.login-message {
min-height: 0;
margin-bottom: 10px;
border-radius: 10px;
font-size: 13px;
}
.login-message:not(:empty) {
padding: 11px 13px;
background: #f3f7fc;
color: #53657e;
}
/* ==========================================
FORM
========================================== */
.login-step label {
display: block;
margin-bottom: 8px;
color: #34445b;
font-size: 13px;
font-weight: 700;
}
.input-wrap {
position: relative;
}
.input-wrap > svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
color: #8b9bb0;
}
.input-wrap input {
width: 100%;
height: 54px;
padding: 0 16px 0 47px;
border: 1px solid #d8e1ec;
border-radius: 13px;
outline: none;
color: #182a43;
background: white;
transition:
border-color .2s,
box-shadow .2s;
}
.input-wrap input:focus {
border-color: #3c8cf0;
box-shadow:
0 0 0 4px rgba(60,140,240,.10);
}
.channel-row {
display: flex;
gap: 8px;
margin-top: 10px;
}
.channel-btn {
padding: 7px 13px;
border: 1px solid #d8e1ec;
border-radius: 9px;
background: white;
color: #66778e;
font-size: 12px;
}
.channel-btn.active {
color: #1e73dc;
border-color: #9dc6f8;
background: #edf6ff;
}
.helper-text {
margin: 10px 0 20px;
color: #8290a2;
font-size: 12px;
line-height: 1.5;
}
/* ==========================================
BUTTONS
========================================== */
.primary-btn {
width: 100%;
min-height: 54px;
border: 0;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: white;
background:
linear-gradient(
100deg,
#1976e9,
#35a1f5
);
font-weight: 700;
box-shadow:
0 12px 25px rgba(30,120,230,.20);
}
.primary-btn:hover {
filter: brightness(1.03);
}
.primary-btn:disabled {
opacity: .65;
cursor: wait;
}
.primary-btn svg {
width: 18px;
}
.secondary-btn {
width: 100%;
min-height: 48px;
margin-top: 10px;
border: 1px solid #d8e1ec;
border-radius: 12px;
background: white;
color: #53657e;
}
.text-btn {
display: block;
margin: 14px auto 0;
padding: 0;
border: 0;
background: transparent;
color: #2478df;
font-size: 13px;
font-weight: 600;
}
/* ==========================================
DIVIDER / SOCIAL
========================================== */
.or-divider {
display: flex;
align-items: center;
gap: 13px;
margin: 25px 0 18px;
color: #9aa7b7;
font-size: 11px;
}
.or-divider::before,
.or-divider::after {
content: "";
height: 1px;
flex: 1;
background: #e3e9f1;
}
.social-buttons {
display: grid;
gap: 10px;
}
.social-btn {
width: 100%;
min-height: 48px;
border: 1px solid #dce4ed;
border-radius: 12px;
background: white;
color: #536174;
font-size: 13px;
font-weight: 600;
}
.social-btn:disabled {
cursor: not-allowed;
opacity: .7;
}
.google-icon,
.microsoft-icon {
margin-right: 8px;
font-weight: 800;
}
.google-icon {
color: #4285f4;
}
.microsoft-icon {
color: #2f75c9;
}
/* ==========================================
SIGNUP / OTP
========================================== */
.signup-link {
margin-top: 25px;
text-align: center;
color: #7b8899;
font-size: 13px;
}
.signup-link a {
color: #2178df;
text-decoration: none;
font-weight: 700;
}
.hidden {
display: none;
}
.otp-heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding: 13px;
border-radius: 13px;
background: #f3f8fe;
}
.otp-destination-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 10px;
color: #267de1;
background: #e4f1ff;
}
.otp-destination-icon svg {
width: 19px;
}
.otp-heading strong {
display: block;
color: #233650;
font-size: 13px;
}
.otp-heading span {
display: block;
margin-top: 3px;
color: #8290a2;
font-size: 11px;
}
.secure-note {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
padding: 14px;
border-radius: 13px;
background: #f0faf5;
color: #32916a;
}
.secure-note > svg {
width: 20px;
}
.secure-note strong {
display: block;
color: #347b62;
font-size: 12px;
}
.secure-note span {
display: block;
margin-top: 3px;
color: #7b9b8e;
font-size: 11px;
}
.trust-footer {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
margin-top: 30px;
color: #8390a2;
font-size: 11px;
}
.trust-footer svg {
width: 15px;
color: #32a778;
}
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: 900px) {
.login-page {
grid-template-columns: 1fr;
}
.login-brand {
display: none;
}
.login-panel {
min-height: 100vh;
padding-top: 90px;
}
}
@media (max-width: 540px) {
.login-panel {
padding:
80px 14px 25px;
}
.login-card {
padding: 28px 20px;
border-radius: 22px;
}
.language-selector {
right: 15px;
top: 15px;
}
.login-card h2 {
font-size: 25px;
}
}
/* =========================================================
GST HUB LOGIN — MOCKUP VISUAL MATCH
Final visual overrides only.
Existing HTML / JS functionality preserved.
========================================================= */
.login-page {
min-height: 100vh;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
}
/* ---------------------------------------------------------
LEFT BRAND PANEL
--------------------------------------------------------- */
.login-brand {
min-width: 0;
min-height: 100vh;
}
.brand-inner {
width: 100%;
min-height: 100vh;
padding: 72px 7.5% 54px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.brand-logo {
margin-bottom: 76px;
}
.brand-copy {
max-width: 680px;
}
.brand-copy h1 {
max-width: 650px;
font-size: clamp(46px, 4.2vw, 64px);
line-height: 1.02;
letter-spacing: -2.4px;
}
.brand-copy p {
max-width: 610px;
margin-top: 24px;
font-size: 16px;
line-height: 1.72;
}
.feature-list {
margin-top: 48px;
gap: 22px;
}
.feature-item {
gap: 16px;
}
.feature-icon {
flex: 0 0 auto;
}
/* ---------------------------------------------------------
RIGHT LOGIN PANEL
--------------------------------------------------------- */
.login-panel {
position: relative;
min-width: 0;
min-height: 100vh;
padding: 70px 5.5% 50px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
}
.language-selector {
position: absolute;
top: 28px;
right: 5%;
z-index: 5;
}
/* ---------------------------------------------------------
LOGIN CARD
--------------------------------------------------------- */
.login-card {
width: min(100%, 580px);
margin-top: 10px;
padding: 60px 58px 48px;
border-radius: 24px;
box-sizing: border-box;
}
/* ---------------------------------------------------------
CARD HEADER
--------------------------------------------------------- */
.login-icon {
width: 64px;
height: 64px;
margin: 0 auto 28px;
}
.login-card h2 {
font-size: 30px;
line-height: 1.2;
}
.login-subtitle {
margin-top: 10px;
margin-bottom: 34px;
font-size: 15px;
}
/* ---------------------------------------------------------
STEPPER
--------------------------------------------------------- */
.stepper {
margin-bottom: 34px;
}
.step {
gap: 10px;
font-size: 13px;
}
.step span {
width: 34px;
height: 34px;
}
.step-line {
margin: 0 14px;
}
/* ---------------------------------------------------------
FORM
--------------------------------------------------------- */
.login-step label {
font-size: 14px;
}
.input-wrap {
min-height: 58px;
}
.input-wrap input {
font-size: 16px;
}
.channel-row {
margin-top: 10px;
}
.helper-text {
margin-top: 12px;
margin-bottom: 26px;
font-size: 12px;
}
/* ---------------------------------------------------------
PRIMARY BUTTON
--------------------------------------------------------- */
.primary-btn {
min-height: 58px;
border-radius: 12px;
font-size: 15px;
}
/* ---------------------------------------------------------
SOCIAL / FOOTER
--------------------------------------------------------- */
.or-divider {
margin: 30px 0 24px;
}
.social-buttons {
gap: 12px;
}
.social-btn {
min-height: 50px;
border-radius: 12px;
font-size: 14px;
}
.signup-link {
margin-top: 28px;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-page {
grid-template-columns: 46% 54%;
}
.brand-inner {
padding-left: 8%;
padding-right: 8%;
}
.brand-copy h1 {
font-size: clamp(42px, 4.5vw, 56px);
}
.login-panel {
padding-left: 4%;
padding-right: 4%;
}
.login-card {
padding-left: 44px;
padding-right: 44px;
}
}
@media (max-width: 820px) {
.login-page {
display: block;
overflow: visible;
}
.login-brand {
min-height: auto;
}
.brand-inner {
min-height: auto;
padding: 40px 28px 44px;
}
.brand-logo {
margin-bottom: 44px;
}
.brand-copy h1 {
font-size: clamp(38px, 9vw, 52px);
}
.feature-list {
margin-top: 34px;
}
.login-panel {
min-height: auto;
padding: 64px 20px 40px;
overflow: visible;
}
.language-selector {
top: 18px;
right: 20px;
}
.login-card {
width: 100%;
margin-top: 0;
padding: 44px 28px 38px;
}
}
@media (max-width: 520px) {
.brand-inner {
padding: 30px 20px 36px;
}
.login-panel {
padding: 58px 12px 28px;
}
.login-card {
padding: 34px 20px 30px;
border-radius: 18px;
}
.login-card h2 {
font-size: 25px;
}
.stepper {
margin-bottom: 26px;
}
}
/* =========================================================
GST HUB LOGIN — MOCKUP VISUAL IMPLEMENTATION
Visual-only layer.
Existing login / OTP JavaScript remains untouched.
========================================================= */
/* ---------------------------------------------------------
PAGE GEOMETRY
--------------------------------------------------------- */
.login-page {
min-height: 100vh;
width: 100%;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
position: relative;
}
/* ---------------------------------------------------------
LEFT BRAND PANEL
--------------------------------------------------------- */
.login-brand {
position: relative;
min-width: 0;
min-height: 100vh;
overflow: hidden;
z-index: 1;
background:
radial-gradient(
circle at 18% 12%,
rgba(34,126,255,.18),
transparent 32%
),
linear-gradient(
145deg,
#06183b 0%,
#08295d 58%,
#061b42 100%
);
}
/* Fine dotted pattern from mockup */
.login-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .18;
background-image:
radial-gradient(
rgba(255,255,255,.55) 1px,
transparent 1px
);
background-size: 22px 22px;
}
/* ---------------------------------------------------------
CURVED DIVIDER
--------------------------------------------------------- */
.login-brand::after {
content: "";
position: absolute;
top: -5%;
right: -115px;
width: 235px;
height: 110%;
z-index: 5;
pointer-events: none;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent 0 48%,
#1598ff 49% 53%,
#071c42 54% 59%,
transparent 60%
);
transform: rotate(-1.5deg);
filter:
drop-shadow(
5px 0 0 rgba(18,150,255,.95)
);
}
/* Green inner accent */
.login-brand .brand-inner::after {
content: "";
position: absolute;
top: 43%;
right: -9px;
width: 18px;
height: 30%;
z-index: 6;
pointer-events: none;
border-radius: 50%;
border-right: 4px solid #18d98b;
opacity: .95;
}
/* ---------------------------------------------------------
BRAND CONTENT
--------------------------------------------------------- */
.brand-inner {
position: relative;
z-index: 3;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
padding:
72px
9%
54px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* ---------------------------------------------------------
LOGO
--------------------------------------------------------- */
.brand-logo {
position: relative;
z-index: 4;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 76px;
}
/* Existing GST mark */
.brand-mark {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 19px;
display: grid;
place-items: center;
box-shadow:
0 12px 28px rgba(0,0,0,.18);
}
/* GST Hub text */
.brand-logo strong,
.brand-logo span {
position: relative;
z-index: 2;
}
/* ---------------------------------------------------------
BRAND COPY
--------------------------------------------------------- */
.brand-copy {
position: relative;
z-index: 4;
max-width: 680px;
}
.brand-copy .eyebrow,
.brand-copy small {
color: #43c8ff;
letter-spacing: 3px;
font-weight: 700;
}
.brand-copy h1 {
max-width: 650px;
margin: 0;
font-size: clamp(
46px,
4.2vw,
64px
);
line-height: 1.02;
letter-spacing: -2.4px;
color: #ffffff;
}
.brand-copy h1 strong {
display: block;
background:
linear-gradient(
90deg,
#249cff,
#46d7b0
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.brand-copy p {
max-width: 610px;
margin:
24px
0
0;
color: #c7daf1;
font-size: 16px;
line-height: 1.72;
}
/* ---------------------------------------------------------
FEATURES
--------------------------------------------------------- */
.feature-list {
position: relative;
z-index: 5;
margin-top: 48px;
display: grid;
gap: 22px;
}
.feature-item {
display: flex;
align-items: center;
gap: 16px;
}
.feature-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
display: grid;
place-items: center;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.02);
}
.feature-item strong {
color: #ffffff;
}
.feature-item span,
.feature-item p {
color: #a9c6e7;
}
/* ---------------------------------------------------------
LARGE WATERMARK
--------------------------------------------------------- */
.login-brand .brand-inner {
isolation: isolate;
}
.login-brand .brand-inner::before {
content: "GST";
position: absolute;
right: 2%;
bottom: -4%;
z-index: -1;
width: 430px;
height: 430px;
display: flex;
align-items: center;
justify-content: center;
font-size: 190px;
font-weight: 800;
letter-spacing: -12px;
color: rgba(255,255,255,.025);
border:
5px solid rgba(255,255,255,.035);
clip-path: polygon(
25% 7%,
75% 7%,
100% 50%,
75% 93%,
25% 93%,
0 50%
);
transform: rotate(-2deg);
pointer-events: none;
}
/* ---------------------------------------------------------
RIGHT LOGIN PANEL
--------------------------------------------------------- */
.login-panel {
position: relative;
min-width: 0;
min-height: 100vh;
box-sizing: border-box;
padding:
70px
5.5%
50px;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
background:
linear-gradient(
145deg,
#fbfdff 0%,
#f1f6fc 100%
);
}
/* ---------------------------------------------------------
LANGUAGE SELECTOR
--------------------------------------------------------- */
.language-selector {
position: absolute;
top: 28px;
right: 5%;
z-index: 20;
padding:
10px
15px;
border:
1px solid #dce6f2;
border-radius: 12px;
background: #ffffff;
box-shadow:
0 5px 18px rgba(28,58,94,.06);
}
/* ---------------------------------------------------------
LOGIN CARD — MOCKUP SIZE
--------------------------------------------------------- */
.login-card {
width: min(
100%,
580px
);
margin-top: 10px;
padding:
40px
48px
42px;
box-sizing: border-box;
border-radius: 24px;
background: #ffffff;
border:
1px solid #e5ebf3;
box-shadow:
0 25px 70px rgba(28,58,94,.12);
}
/* ---------------------------------------------------------
LOGIN HEADER
--------------------------------------------------------- */
.login-icon {
width: 58px;
height: 58px;
margin:
0
auto
22px;
border-radius: 50%;
display: grid;
place-items: center;
background:
#eef6ff;
}
.login-card h2 {
margin: 0;
text-align: center;
color: #10254a;
font-size: 30px;
line-height: 1.2;
letter-spacing: -.7px;
}
.login-subtitle {
margin:
10px
0
34px;
text-align: center;
color: #718096;
font-size: 15px;
}
/* ---------------------------------------------------------
STEPPER
--------------------------------------------------------- */
.login-stepper,
.steps,
.stepper {
margin-bottom: 34px;
}
/* ---------------------------------------------------------
INPUT
--------------------------------------------------------- */
.login-card input {
box-sizing: border-box;
}
/* ---------------------------------------------------------
PRIMARY BUTTON
--------------------------------------------------------- */
.login-card button[type="submit"],
#sendOtpBtn {
min-height: 60px;
border-radius: 14px;
background:
linear-gradient(
90deg,
#1477eb,
#32a3ec
);
box-shadow:
0 12px 28px rgba(24,130,235,.20);
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-page {
grid-template-columns: 45% 55%;
}
.brand-inner {
padding-left: 7%;
padding-right: 7%;
}
.brand-copy h1 {
font-size: clamp(
40px,
4.5vw,
56px
);
}
.login-card {
width: min(
100%,
560px
);
padding-left: 40px;
padding-right: 40px;
}
}
@media (max-width: 800px) {
.login-page {
display: block;
overflow: auto;
}
.login-brand {
min-height: auto;
}
.login-brand::after {
display: none;
}
.brand-inner {
min-height: auto;
padding:
48px
7%
56px;
}
.login-brand .brand-inner::before {
width: 300px;
height: 300px;
}
.login-panel {
min-height: auto;
padding:
48px
6%
60px;
}
.language-selector {
top: 18px;
right: 6%;
}
.login-card {
margin-top: 30px;
width: min(
100%,
580px
);
}
}
/* =========================================================
GST HUB LOGIN — FINAL MOCKUP MATCH
=========================================================
Final visual layer.
Existing HTML + JavaScript preserved.
PNG artwork used.
========================================================= */
/* =========================================================
PAGE
========================================================= */
.login-page {
width: 100%;
height: 100dvh;
min-height: 100vh;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
position: relative;
}
/* =========================================================
LEFT BRAND PANEL
========================================================= */
.login-brand {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 100vh;
overflow: hidden;
background:
linear-gradient(
145deg,
#071b3d 0%,
#092c61 58%,
#061a3d 100%
);
}
/* =========================================================
DOT PATTERN
========================================================= */
.login-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .20;
background-image:
radial-gradient(
rgba(255,255,255,.48) 1px,
transparent 1px
);
background-size: 22px 22px;
}
/* =========================================================
LARGE SWEEPING BLUE CURVE
========================================================= */
.login-brand::after {
content: "";
position: absolute;
top: -12%;
right: -165px;
width: 320px;
height: 124%;
z-index: 10;
pointer-events: none;
border-radius: 50%;
border-right: 8px solid #168cff;
box-sizing: border-box;
filter:
drop-shadow(
5px 0 0 rgba(255,255,255,.90)
);
}
/* =========================================================
GREEN CURVE ACCENT
========================================================= */
.login-brand .brand-inner::after {
content: "";
position: absolute;
top: 45%;
right: -150px;
width: 255px;
height: 61%;
z-index: 11;
pointer-events: none;
border-radius: 50%;
border-right: 5px solid #19d98b;
}
/* =========================================================
BRAND INNER
========================================================= */
.login-brand .brand-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
box-sizing: border-box;
padding:
78px
9%
50px;
isolation: isolate;
overflow: hidden;
}
/* =========================================================
BRAND CONTENT
========================================================= */
.login-brand .brand-content,
.login-brand .brand-copy,
.login-brand .feature-list,
.login-brand .brand-logo {
position: relative;
z-index: 20;
}
/* =========================================================
ACTUAL GST HUB PNG LOGO
========================================================= */
.login-brand .brand-logo-image {
display: block;
width: min(100%, 300px);
height: auto;
object-fit: contain;
object-position: left center;
}
/* =========================================================
OLD TEXT LOGO FALLBACK
========================================================= */
.login-brand .brand-mark {
width: 58px;
height: 58px;
flex: 0 0 58px;
border-radius: 17px;
display: grid;
place-items: center;
background:
linear-gradient(
135deg,
#2d8cff,
#19c49a
);
box-shadow:
0 10px 28px rgba(0,0,0,.20);
}
/* =========================================================
BRAND COPY
========================================================= */
.login-brand .brand-copy {
max-width: 680px;
}
.login-brand .brand-eyebrow {
margin-bottom: 18px;
color: #42bfff;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.login-brand .brand-copy h1 {
max-width: 650px;
margin: 0;
color: #ffffff;
font-size:
clamp(46px, 4.15vw, 62px);
line-height: 1.03;
letter-spacing: -2.5px;
}
.login-brand .brand-copy h1 strong {
display: block;
background:
linear-gradient(
90deg,
#2498ff 0%,
#39b8e9 45%,
#32d1b0 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.login-brand .brand-copy p {
max-width: 620px;
margin:
24px
0
0;
color: #c9dbf2;
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
FEATURE LIST
========================================================= */
.login-brand .feature-list {
margin-top: 46px;
display: grid;
gap: 20px;
}
.login-brand .feature-item {
display: flex;
align-items: center;
gap: 16px;
}
.login-brand .feature-icon {
width: 50px;
height: 50px;
flex: 0 0 50px;
display: grid;
place-items: center;
border-radius: 50%;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.10);
box-shadow:
0 8px 22px rgba(0,0,0,.12);
}
.login-brand .feature-item strong {
display: block;
color: #ffffff;
font-size: 15px;
font-weight: 800;
}
.login-brand .feature-item span {
display: block;
margin-top: 3px;
color: #a9c4e5;
font-size: 13px;
}
/* =========================================================
LARGE GST HUB WATERMARK
========================================================= */
.login-brand .brand-inner::before {
content: "";
position: absolute;
right: -25px;
bottom: -110px;
width: 450px;
height: 450px;
z-index: 2;
pointer-events: none;
opacity: .16;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter:
brightness(1.15)
saturate(.8);
}
/* =========================================================
RIGHT LOGIN PANEL
========================================================= */
.login-panel {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 100vh;
box-sizing: border-box;
padding:
76px
5.5%
46px;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
background:
linear-gradient(
145deg,
#fbfdff 0%,
#f3f7fc 100%
);
}
/* =========================================================
LANGUAGE SELECTOR
========================================================= */
.language-selector {
position: absolute;
top: 28px;
right: 5%;
z-index: 50;
display: flex;
align-items: center;
gap: 7px;
padding:
11px
16px;
border-radius: 12px;
background: #ffffff;
border:
1px solid #dce6f2;
box-shadow:
0 8px 24px rgba(30,65,100,.07);
}
/* =========================================================
LOGIN CARD
========================================================= */
.login-card {
width: min(100%, 580px);
margin: 0;
padding:
48px
48px
42px;
box-sizing: border-box;
border-radius: 24px;
background: #ffffff;
border:
1px solid #e3eaf3;
box-shadow:
0 25px 70px rgba(28,58,94,.12);
}
/* =========================================================
GST HUB PNG ABOVE WELCOME
========================================================= */
.login-card .login-icon {
width: 76px;
height: 76px;
margin:
0
auto
24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #edf5ff;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: 58px 58px;
overflow: hidden;
box-sizing: border-box;
}
/* Hide Lucide shield */
.login-card .login-icon svg,
.login-card .login-icon i {
display: none;
}
/* =========================================================
CARD HEADER
========================================================= */
.login-card h2 {
margin: 0;
text-align: center;
color: #10254a;
font-size: 30px;
line-height: 1.2;
letter-spacing: -.8px;
}
.login-subtitle {
margin:
10px
0
34px;
text-align: center;
color: #718096;
font-size: 15px;
}
/* =========================================================
STEPPER
========================================================= */
.login-card .stepper {
margin-bottom: 34px;
}
/* =========================================================
FORM
========================================================= */
.login-card input {
box-sizing: border-box;
}
/* =========================================================
OTP BUTTON
========================================================= */
.login-card .primary-btn,
.login-card button[type="submit"] {
min-height: 64px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.login-page {
grid-template-columns: 46% 54%;
}
.login-brand .brand-inner {
padding:
60px
7%
42px;
}
.login-brand .brand-logo {
margin-bottom: 58px;
}
.login-brand .brand-logo-image {
width: min(100%, 260px);
}
.login-brand .brand-copy h1 {
font-size:
clamp(40px, 4.6vw, 54px);
}
.login-brand::after {
right: -205px;
}
.login-brand .brand-inner::after {
right: -190px;
}
.login-brand .brand-inner::before {
width: 350px;
height: 350px;
right: -40px;
bottom: -60px;
}
.login-card {
padding:
42px
40px
38px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 850px) {
.login-page {
height: auto;
min-height: 100vh;
display: block;
overflow: visible;
}
.login-brand {
height: auto;
min-height: auto;
}
.login-brand .brand-inner {
height: auto;
min-height: auto;
padding:
52px
7%
60px;
}
.login-brand::after,
.login-brand .brand-inner::after {
display: none;
}
.login-brand .brand-inner::before {
width: 280px;
height: 280px;
right: -50px;
bottom: -70px;
}
.login-brand .brand-logo {
margin-bottom: 48px;
}
.login-panel {
height: auto;
min-height: auto;
padding:
70px
6%
60px;
overflow: visible;
}
.language-selector {
top: 20px;
right: 6%;
}
.login-card {
width: min(100%, 580px);
}
}
/* =========================================================
VERY SMALL
========================================================= */
@media (max-width: 520px) {
.login-brand .brand-inner {
padding:
38px
6%
46px;
}
.login-brand .brand-logo {
margin-bottom: 40px;
}
.login-brand .brand-copy h1 {
font-size: 40px;
letter-spacing: -1.8px;
}
.login-brand .brand-copy p {
font-size: 15px;
}
.login-brand .feature-list {
margin-top: 36px;
gap: 16px;
}
.login-brand .feature-icon {
width: 44px;
height: 44px;
flex-basis: 44px;
}
.login-panel {
padding:
64px
18px
42px;
}
.login-card {
padding:
34px
24px
32px;
border-radius: 20px;
}
.login-card h2 {
font-size: 27px;
}
}
/* =========================================================
GST HUB LOGIN — FINAL SIMPLE VISUAL POLISH
Transparent PNG logos + simple curved divider.
Existing functionality untouched.
========================================================= */
/* ---------------------------------------------------------
LEFT BRAND LOGO
--------------------------------------------------------- */
.login-brand .brand-logo-image {
display: block;
width: min(100%, 330px);
height: auto;
object-fit: contain;
object-position: left center;
}
/* No artificial box behind the real logo */
.login-brand .brand-mark {
background: transparent;
box-shadow: none;
border: 0;
}
/* ---------------------------------------------------------
LOGIN CARD GST HUB ICON
--------------------------------------------------------- */
.login-card .login-icon {
width: 76px;
height: 76px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Actual transparent GST Hub PNG */
.login-card .login-icon img {
display: block;
width: 76px;
height: 76px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background: transparent;
border: 0;
box-shadow: none;
}
/* ---------------------------------------------------------
SIMPLE SWEEPING CURVE
--------------------------------------------------------- */
.login-brand::after {
content: "";
position: absolute;
top: -8%;
right: -78px;
width: 150px;
height: 116%;
z-index: 10;
pointer-events: none;
border-right: 7px solid #168cff;
border-radius: 50%;
}
/* Small green accent near lower curve */
.login-brand .brand-inner::after {
content: "";
position: absolute;
top: 58%;
right: -68px;
width: 125px;
height: 38%;
z-index: 11;
pointer-events: none;
border-right: 4px solid #19d98b;
border-radius: 50%;
}
/* ---------------------------------------------------------
LARGE TRANSPARENT GST HUB WATERMARK
--------------------------------------------------------- */
.login-brand .brand-inner::before {
content: "";
position: absolute;
right: -35px;
bottom: -90px;
width: 430px;
height: 430px;
z-index: 1;
pointer-events: none;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .12;
filter: none;
}
/* Keep all actual content above watermark */
.login-brand .brand-content,
.login-brand .brand-copy,
.login-brand .feature-list,
.login-brand .brand-logo {
position: relative;
z-index: 20;
}
/* ---------------------------------------------------------
CLEAN LEFT CONTENT POSITION
--------------------------------------------------------- */
.login-brand .brand-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
box-sizing: border-box;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-brand .brand-logo-image {
width: min(100%, 300px);
}
.login-brand::after {
right: -88px;
width: 145px;
}
.login-brand .brand-inner::after {
right: -78px;
width: 120px;
}
.login-brand .brand-inner::before {
width: 340px;
height: 340px;
}
}
@media (max-width: 850px) {
.login-brand::after,
.login-brand .brand-inner::after {
display: none;
}
.login-brand .brand-inner::before {
width: 280px;
height: 280px;
right: -50px;
bottom: -50px;
}
.login-card .login-icon,
.login-card .login-icon img {
width: 68px;
height: 68px;
}
}
/* =========================================================
GST HUB — FINAL LOGIN VISUAL OVERRIDE
2026-08-31
Visual only. Existing HTML / JS / OTP preserved.
========================================================= */
/* =========================================================
DESKTOP PAGE
========================================================= */
.login-page {
width: 100%;
height: 100vh;
min-height: 100vh;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
}
/* =========================================================
LEFT BRAND PANEL
========================================================= */
.login-brand {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
overflow: hidden;
background:
radial-gradient(
circle at 15% 15%,
#123b78 0%,
#082a5b 38%,
#061f48 70%,
#041735 100%
);
}
/* Fine dotted pattern */
.login-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .18;
background-image:
radial-gradient(
rgba(255,255,255,.55) 1px,
transparent 1px
);
background-size: 22px 22px;
}
/* =========================================================
SIMPLE SWEEPING BLUE CURVE
========================================================= */
.login-brand::after {
content: "";
position: absolute;
top: -8%;
right: -125px;
width: 255px;
height: 116%;
z-index: 10;
pointer-events: none;
border-radius: 50%;
border-right:
7px solid #168cff;
box-sizing: border-box;
filter:
drop-shadow(
-2px 0 0 rgba(255,255,255,.9)
);
}
/* =========================================================
GREEN LOWER CURVE ACCENT
========================================================= */
.login-brand .brand-inner::after {
content: "";
position: absolute;
top: 43%;
right: -118px;
width: 205px;
height: 58%;
z-index: 11;
pointer-events: none;
border-radius: 50%;
border-right:
4px solid #19d98b;
}
/* =========================================================
BRAND INNER
========================================================= */
.login-brand .brand-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
box-sizing: border-box;
padding:
72px
9%
54px;
overflow: hidden;
isolation: isolate;
}
/* =========================================================
REAL TRANSPARENT GST HUB LOGO
========================================================= */
.login-brand .brand-logo {
position: relative;
z-index: 20;
display: block;
width: min(100%, 360px);
height: auto;
margin-bottom: 68px;
font-size: 0;
}
/*
tagline logo.png was verified to contain transparency.
*/
.login-brand .brand-logo::before {
content: "";
display: block;
width: 100%;
aspect-ratio: 1914 / 822;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position:
left center;
background-size:
contain;
}
/* Hide old CSS-built GST logo */
.login-brand .brand-logo > * {
display: none;
}
/* =========================================================
BRAND COPY
========================================================= */
.login-brand .brand-copy {
position: relative;
z-index: 20;
max-width: 650px;
}
.login-brand .brand-eyebrow {
margin-bottom: 24px;
color: #42bfff;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
}
.login-brand .brand-copy h1 {
max-width: 650px;
margin: 0;
color: #ffffff;
font-size:
clamp(
44px,
4.2vw,
64px
);
line-height: 1.02;
letter-spacing: -2.4px;
}
.login-brand .brand-copy h1 strong {
display: block;
margin-top: 4px;
background:
linear-gradient(
90deg,
#36a7ff 0%,
#36c9c0 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.login-brand .brand-copy p {
max-width: 610px;
margin:
24px 0 0;
color: #c7d9f0;
font-size: 16px;
line-height: 1.72;
}
/* =========================================================
FEATURES
========================================================= */
.login-brand .feature-list {
position: relative;
z-index: 20;
margin-top: 44px;
display: grid;
gap: 20px;
}
.login-brand .feature-item {
display: flex;
align-items: center;
gap: 17px;
}
.login-brand .feature-icon {
width: 52px;
height: 52px;
flex:
0 0 52px;
border-radius: 50%;
display: grid;
place-items: center;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.10);
}
.login-brand .feature-icon svg {
width: 20px;
height: 20px;
}
.login-brand .feature-item strong {
display: block;
color: #ffffff;
font-size: 15px;
font-weight: 700;
}
.login-brand .feature-item span {
display: block;
margin-top: 4px;
color: #b9cde7;
font-size: 13px;
}
/* =========================================================
LARGE GST HUB WATERMARK
========================================================= */
.login-brand .brand-inner::before {
content: "";
position: absolute;
right: -130px;
bottom: -90px;
z-index: 2;
width: 520px;
height: 250px;
pointer-events: none;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position:
center;
background-size:
contain;
opacity: .045;
filter:
grayscale(1)
brightness(2);
}
/* Keep content above watermark */
.login-brand .brand-content,
.login-brand .brand-copy,
.login-brand .feature-list,
.login-brand .brand-logo {
position: relative;
z-index: 20;
}
/* =========================================================
RIGHT LOGIN PANEL
========================================================= */
.login-panel {
position: relative;
width: 100%;
height: 100vh;
min-height: 100vh;
box-sizing: border-box;
padding:
72px
5.5%
50px;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
overflow-x: hidden;
background:
linear-gradient(
145deg,
#fbfdff 0%,
#f1f6fb 100%
);
}
/* =========================================================
LANGUAGE SELECTOR
========================================================= */
.language-selector {
position: absolute;
top: 28px;
right: 5%;
z-index: 50;
padding:
11px
16px;
border-radius: 12px;
background: #ffffff;
border:
1px solid #dce6f2;
box-shadow:
0 8px 24px rgba(30,65,100,.06);
}
/* =========================================================
LOGIN CARD
========================================================= */
.login-card {
width:
min(
100%,
580px
);
margin-top: 10px;
padding:
42px
48px
42px;
box-sizing: border-box;
border-radius: 24px;
background: #ffffff;
border:
1px solid #e4ebf4;
box-shadow:
0 25px 70px
rgba(28,58,94,.12);
}
/* =========================================================
GST HUB LOGO ABOVE WELCOME
========================================================= */
/*
The HTML shield remains untouched for JS compatibility.
We visually replace it with the transparent GST Hub PNG.
*/
.login-card .login-icon {
width: 190px;
height: 82px;
margin:
0 auto 20px;
display: block;
background:
transparent
url("../../images/icon%20logo.png")
center
/ contain
no-repeat;
border-radius: 0;
box-shadow: none;
font-size: 0;
}
/* Hide the original shield */
.login-card .login-icon svg,
.login-card .login-icon i {
display: none !important;
}
/* =========================================================
LOGIN HEADER
========================================================= */
.login-card h2 {
margin: 0;
text-align: center;
color: #10254a;
font-size: 30px;
line-height: 1.2;
letter-spacing: -.7px;
}
.login-subtitle {
margin:
10px
0
34px;
text-align: center;
color: #718096;
font-size: 15px;
}
/* =========================================================
DESKTOP BODY SCROLL CONTROL
========================================================= */
html,
body {
height: 100%;
overflow: hidden;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.login-page {
grid-template-columns: 46% 54%;
}
.login-brand .brand-inner {
padding:
60px
7%
45px;
}
.login-brand .brand-logo {
width:
min(
100%,
300px
);
margin-bottom: 55px;
}
.login-brand .brand-copy h1 {
font-size:
clamp(
40px,
4.5vw,
54px
);
}
.login-brand::after {
right: -150px;
}
.login-brand .brand-inner::after {
right: -143px;
}
.login-card {
width:
min(
100%,
540px
);
padding:
38px
42px
40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 1024px) {
html,
body {
overflow: auto;
}
.login-page {
height: auto;
min-height: 100vh;
display: block;
overflow: visible;
}
.login-brand {
display: none;
}
.login-panel {
width: 100%;
height: auto;
min-height: 100vh;
padding:
70px
20px
40px;
overflow: visible;
}
.language-selector {
top: 20px;
right: 24px;
}
}
@media (max-width: 520px) {
.login-card {
padding:
32px
20px
28px;
}
.login-card .login-icon {
width: 160px;
height: 70px;
}
.social-buttons {
grid-template-columns: 1fr;
}
}
/* =========================================================
GST HUB LOGIN — UNIFIED PAGE SCROLL
Both panels belong to the same scrolling page.
========================================================= */
html,
body {
min-height: 100%;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
.login-page {
min-height: 100vh;
height: auto;
overflow: visible;
align-items: stretch;
}
.login-brand {
min-height: 100vh;
height: auto;
overflow: hidden;
}
.login-panel {
min-height: 100vh;
height: auto;
overflow: visible;
}
/* =========================================================
GST HUB LOGIN — COMPACT CENTERED BRAND PANEL
========================================================= */
.login-brand {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.login-brand .brand-content {
width: 100%;
max-width: 680px;
box-sizing: border-box;
padding: 40px 7.5%;
margin: 0 auto;
}
.login-brand .brand-logo {
margin-bottom: 42px;
}
.login-brand .brand-copy h1 {
margin: 0;
max-width: 650px;
font-size: clamp(42px, 4vw, 60px);
line-height: 1.04;
letter-spacing: -2.2px;
}
.login-brand .brand-copy p {
max-width: 560px;
margin-top: 18px;
font-size: 15px;
line-height: 1.6;
}
.login-brand .feature-list {
margin-top: 34px;
gap: 16px;
}
.login-brand .feature-item {
min-height: 54px;
}
.login-brand .feature-item strong {
font-size: 15px;
}
.login-brand .feature-item span {
font-size: 13px;
}
/* Keep the complete left panel within the viewport */
@media (min-width: 851px) {
.login-brand {
min-height: 100vh;
height: 100vh;
}
.login-brand .brand-content {
max-height: 100vh;
}
}
/* =========================================================
GST HUB LOGIN — FINAL VISUAL PASS
2026-09-01
Visual only — login/OTP functionality untouched
========================================================= */
/* ---------------------------------------------------------
PAGE — NO INTERNAL PAGE SCROLL
--------------------------------------------------------- */
.login-page {
min-height: 100vh;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: 48% 52%;
overflow: hidden;
position: relative;
}
/* ---------------------------------------------------------
LEFT BRAND PANEL
--------------------------------------------------------- */
.login-brand {
position: relative;
height: 100vh;
min-height: 100vh;
overflow: hidden;
background:
#08265f;
color: #ffffff;
display: flex;
align-items: center;
}
/* ---------------------------------------------------------
LEFT CONTENT — CENTERED
--------------------------------------------------------- */
.login-brand .brand-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
padding:
48px
clamp(42px, 6vw, 92px)
48px
clamp(42px, 6vw, 92px);
position: relative;
isolation: isolate;
overflow: hidden;
}
/* ---------------------------------------------------------
SUBTLE DOT PATTERN
--------------------------------------------------------- */
.login-brand::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .18;
background-image:
radial-gradient(
rgba(255,255,255,.55) 1px,
transparent 1px
);
background-size: 18px 18px;
}
/* ---------------------------------------------------------
LEFT LOGO
--------------------------------------------------------- */
.login-brand .brand-logo {
position: relative;
z-index: 20;
width: min(100%, 420px);
margin:
0
0
clamp(34px, 4vh, 52px)
0;
display: block;
}
.login-brand .brand-logo-image {
display: block;
width: 100%;
height: auto;
max-width: 420px;
object-fit: contain;
}
/* ---------------------------------------------------------
BRAND COPY
--------------------------------------------------------- */
.login-brand .brand-copy {
position: relative;
z-index: 20;
max-width: 610px;
margin: 0;
}
.login-brand .brand-eyebrow {
margin-bottom: 18px;
color: #42bfff;
font-size: 14px;
font-weight: 800;
letter-spacing: 2px;
}
.login-brand .brand-copy h1 {
margin: 0;
max-width: 610px;
font-size:
clamp(42px, 4vw, 62px);
line-height: 1.02;
letter-spacing: -2.5px;
color: #ffffff;
}
.login-brand .brand-copy h1 strong {
display: block;
color: #31b5f3;
}
.login-brand .brand-copy p {
max-width: 570px;
margin:
24px
0
0;
color: rgba(255,255,255,.84);
font-size: 16px;
line-height: 1.65;
}
/* ---------------------------------------------------------
FEATURES
--------------------------------------------------------- */
.login-brand .feature-list {
position: relative;
z-index: 20;
margin-top:
clamp(32px, 4vh, 48px);
display: flex;
flex-direction: column;
gap:
clamp(15px, 2vh, 22px);
max-width: 590px;
}
/* We only need three benefits */
.login-brand .feature-item:nth-child(4) {
display: none;
}
.login-brand .feature-item {
display: flex;
align-items: center;
gap: 16px;
min-height: 62px;
}
.login-brand .feature-icon {
flex:
0 0 58px;
width: 58px;
height: 58px;
border-radius: 50%;
display: grid;
place-items: center;
background:
rgba(255,255,255,.06);
border:
1px solid rgba(255,255,255,.12);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.025);
}
.login-brand .feature-icon svg {
width: 23px;
height: 23px;
}
.login-brand .feature-item > div:last-child {
min-width: 0;
}
.login-brand .feature-item strong {
display: block;
color: #ffffff;
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
.login-brand .feature-item span {
display: block;
margin-top: 5px;
color: rgba(255,255,255,.72);
font-size: 14px;
line-height: 1.35;
}
/* ---------------------------------------------------------
SIMPLE MULTI-COLOR CURVED SEPARATOR
--------------------------------------------------------- */
.login-brand::after {
content: "";
position: absolute;
z-index: 30;
top: -8%;
right: -150px;
width: 300px;
height: 116%;
pointer-events: none;
border-radius: 50%;
border-right: 8px solid transparent;
background:
linear-gradient(
180deg,
#168cff 0%,
#168cff 25%,
#7c3aed 47%,
#ff8a00 70%,
#19d98b 100%
) border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
}
/* ---------------------------------------------------------
REMOVE OLD GREEN SECONDARY CURVE
--------------------------------------------------------- */
.login-brand .brand-inner::after {
display: none !important;
}
/* ---------------------------------------------------------
REMOVE OLD GST WATERMARK
--------------------------------------------------------- */
.login-brand .brand-inner::before {
display: none !important;
}
/* ---------------------------------------------------------
RIGHT LOGIN PANEL
--------------------------------------------------------- */
.login-panel {
position: relative;
height: 100vh;
min-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding:
70px
5%
60px;
background:
linear-gradient(
145deg,
#fbfdff 0%,
#f1f6fb 100%
);
}
/* ---------------------------------------------------------
LANGUAGE
--------------------------------------------------------- */
.language-selector {
position: absolute;
top: 28px;
right: 5%;
z-index: 50;
display: flex;
align-items: center;
gap: 9px;
padding:
11px
16px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #dce6f2;
box-shadow:
0 8px 24px rgba(30,65,100,.06);
}
/* ---------------------------------------------------------
LOGIN CARD
--------------------------------------------------------- */
.login-card {
position: relative;
width: min(100%, 580px);
margin: 0;
padding:
38px
48px
42px;
box-sizing: border-box;
border-radius: 24px;
background: #ffffff;
border: 1px solid #e1e9f3;
box-shadow:
0 25px 70px rgba(28,58,94,.12);
}
/* ---------------------------------------------------------
RIGHT GST HUB LOGO
Use transparent tagline PNG.
--------------------------------------------------------- */
.login-card .login-icon {
width: 100%;
height: auto;
min-height: 0;
margin:
0
auto
22px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.login-card .login-icon img {
display: block;
width: min(100%, 245px);
height: auto;
max-height: 110px;
object-fit: contain;
background: transparent;
}
/* ---------------------------------------------------------
LOGIN HEADING
--------------------------------------------------------- */
.login-card h2 {
margin-top: 0;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-page {
grid-template-columns: 47% 53%;
}
.login-brand .brand-inner {
padding-left: 42px;
padding-right: 42px;
}
.login-brand .brand-logo {
width: min(100%, 360px);
}
.login-brand .brand-copy h1 {
font-size:
clamp(40px, 4.5vw, 54px);
}
.login-brand::after {
right: -175px;
}
}
@media (max-width: 850px) {
.login-page {
height: auto;
min-height: 100vh;
display: block;
overflow: visible;
}
.login-brand {
height: auto;
min-height: auto;
display: block;
}
.login-brand .brand-inner {
height: auto;
min-height: auto;
padding:
50px
32px;
}
.login-brand::after {
display: none;
}
.login-panel {
height: auto;
min-height: auto;
overflow: visible;
padding:
50px
24px;
}
.login-card {
width: min(100%, 580px);
}
}
/* =========================================================
GST HUB LEFT BRAND — FINAL CLEANUP
========================================================= */
/* Make sure no pseudo-element creates another logo */
.login-brand::before,
.login-brand::after,
.login-brand .brand-inner::before,
.login-brand .brand-inner::after {
background-image: none !important;
}
/* ---------------------------------------------------------
ONE LEFT LOGO ONLY
--------------------------------------------------------- */
.login-brand .brand-logo {
position: relative;
z-index: 20;
width: min(100%, 330px);
margin:
0
0
38px
0;
padding: 0;
display: block;
}
.login-brand .brand-logo-image {
display: block;
width: 100%;
max-width: 330px;
height: auto;
margin: 0;
padding: 0;
object-fit: contain;
background: transparent !important;
border: 0 !important;
}
/* ---------------------------------------------------------
REMOVE THE OLD EYEBROW COMPLETELY
--------------------------------------------------------- */
.login-brand .brand-eyebrow {
display: none !important;
}
/* ---------------------------------------------------------
TIGHTER CONTENT AFTER LOGO
--------------------------------------------------------- */
.login-brand .brand-copy {
margin: 0;
}
.login-brand .brand-copy h1 {
margin-top: 0;
}
/* ---------------------------------------------------------
LEFT CONTENT POSITION
--------------------------------------------------------- */
.login-brand .brand-inner {
justify-content: center;
padding-top: 42px;
padding-bottom: 42px;
}
/* ---------------------------------------------------------
KEEP THREE FEATURES COMPACT
--------------------------------------------------------- */
.login-brand .feature-list {
margin-top: 34px;
gap: 17px;
}
.login-brand .feature-item {
min-height: 56px;
}
.login-brand .feature-icon {
flex-basis: 54px;
width: 54px;
height: 54px;
}
/* ---------------------------------------------------------
PREVENT ANY OLD WATERMARK/BACKGROUND LOGO
--------------------------------------------------------- */
.login-brand {
background-image: none !important;
}
/* =========================================================
GST HUB LOGIN — REMOVE DUPLICATE CSS-GENERATED LOGO
Keep the real .brand-logo-image only.
========================================================= */
.login-brand .brand-logo::before {
content: none !important;
display: none !important;
background-image: none !important;
}
/* =========================================================
GST HUB LOGIN — MOCKUP MULTI-COLOR PANEL SEPARATOR
========================================================= */
.login-page {
position: relative;
}
.login-color-separator {
position: absolute;
top: 0;
bottom: 0;
left: 48%;
width: 6px;
z-index: 100;
pointer-events: none;
background: linear-gradient(
to bottom,
#1685ff 0%,
#00c8ff 30%,
#ff9f1c 58%,
#19d36b 82%,
#19d36b 100%
);
box-shadow:
0 0 8px rgba(22,133,255,.18);
}
/* =========================================================
GST HUB LOGIN — CENTER LEFT BRAND LOGO
========================================================= */
.login-brand .brand-logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.login-brand .brand-logo-image {
display: block;
width: min(100%, 300px);
max-width: 300px;
height: auto;
margin: 0 auto;
object-fit: contain;
object-position: center;
}
/* =========================================================
GST HUB LOGIN — MOCKUP LEFT PANEL FINISH
Dark navy background + subtle GST Hub watermark
========================================================= */
/* ---------------------------------------------------------
DARK NAVY MOCKUP BACKGROUND
--------------------------------------------------------- */
.login-brand {
background:
linear-gradient(
145deg,
#000f35 0%,
#00163d 48%,
#00234f 100%
) !important;
overflow: hidden;
}
/* ---------------------------------------------------------
SUBTLE DEPTH / LIGHTING
--------------------------------------------------------- */
.login-brand::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(
circle at 18% 18%,
rgba(0,150,255,.08) 0%,
rgba(0,150,255,0) 34%
),
radial-gradient(
circle at 72% 82%,
rgba(0,210,255,.05) 0%,
rgba(0,210,255,0) 38%
);
}
/* ---------------------------------------------------------
LARGE FAINT GST HUB WATERMARK
--------------------------------------------------------- */
.login-brand .brand-content::after {
content: "";
position: absolute;
width: 520px;
height: 520px;
right: -150px;
bottom: -105px;
background-image:
url("../../images/icon%20logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: .055;
filter:
saturate(.35)
brightness(1.35);
pointer-events: none;
z-index: 2;
transform: rotate(-3deg);
}
/* ---------------------------------------------------------
KEEP REAL BRAND CONTENT ABOVE WATERMARK
--------------------------------------------------------- */
.login-brand .brand-content {
position: relative;
z-index: 5;
}
/* ---------------------------------------------------------
KEEP MAIN LOGO CLEAN / FULL STRENGTH
--------------------------------------------------------- */
.login-brand .brand-logo,
.login-brand .brand-logo-image,
.login-brand .brand-copy,
.login-brand .feature-list {
position: relative;
z-index: 10;
}
/* ---------------------------------------------------------
WATERMARK RESPONSIVE SIZE
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-brand .brand-content::after {
width: 420px;
height: 420px;
right: -130px;
bottom: -90px;
}
}
@media (max-width: 850px) {
.login-brand .brand-content::after {
width: 340px;
height: 340px;
right: -100px;
bottom: -70px;
}
}
/* =========================================================
GST HUB LOGIN — FINAL MOCKUP LEFT PANEL OVERRIDE
========================================================= */
.login-page .login-brand {
position: relative !important;
overflow: hidden !important;
background:
linear-gradient(
135deg,
#020d2f 0%,
#03163d 45%,
#001f48 100%
) !important;
}
/* ---------------------------------------------------------
SUBTLE MOCKUP-STYLE LIGHTING
--------------------------------------------------------- */
.login-page .login-brand::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
background:
radial-gradient(
circle at 15% 12%,
rgba(0, 150, 255, 0.10),
transparent 34%
),
radial-gradient(
circle at 78% 78%,
rgba(0, 200, 255, 0.045),
transparent 38%
) !important;
}
/* ---------------------------------------------------------
GST HUB ICON WATERMARK
--------------------------------------------------------- */
.login-page .login-brand::after {
content: "" !important;
position: absolute !important;
width: 480px !important;
height: 480px !important;
right: -80px !important;
bottom: -55px !important;
background-image:
url("../../images/icon%20logo.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: 0.075 !important;
/*
icon-logo.png has a non-transparent background.
Screen blending suppresses the dark background
and leaves the logo as a subtle watermark.
*/
mix-blend-mode: screen !important;
filter:
grayscale(0.15)
brightness(0.75) !important;
pointer-events: none !important;
z-index: 1 !important;
transform: rotate(-4deg) !important;
}
/* ---------------------------------------------------------
REAL CONTENT MUST STAY ABOVE WATERMARK
--------------------------------------------------------- */
.login-page .login-brand > * {
position: relative !important;
z-index: 5 !important;
}
/* ---------------------------------------------------------
MAIN LOGO
--------------------------------------------------------- */
.login-page .brand-logo {
position: relative !important;
z-index: 10 !important;
}
.login-page .brand-logo-image {
position: relative !important;
z-index: 10 !important;
}
/* ---------------------------------------------------------
KEEP WATERMARK OUT OF SMALL SCREENS
--------------------------------------------------------- */
@media (max-width: 1000px) {
.login-page .login-brand::after {
width: 360px !important;
height: 360px !important;
right: -80px !important;
bottom: -55px !important;
}
}
/* =========================================================
GST HUB LOGIN — LEFT PANEL MOCKUP VISUAL
========================================================= */
.login-page .login-brand {
position: relative !important;
overflow: hidden !important;
background:
radial-gradient(
circle at 18% 10%,
rgba(0, 94, 255, 0.16),
transparent 28%
),
radial-gradient(
circle at 82% 78%,
rgba(0, 128, 255, 0.08),
transparent 34%
),
linear-gradient(
135deg,
#010d2e 0%,
#01143b 48%,
#001a49 100%
) !important;
}
/* ---------------------------------------------------------
SUBTLE BLUE DOT PATTERN
--------------------------------------------------------- */
.login-page .login-brand .brand-content {
position: relative !important;
z-index: 5 !important;
}
.login-page .login-brand::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
background-image:
radial-gradient(
circle,
rgba(20, 126, 255, 0.28) 1px,
transparent 1.5px
) !important;
background-size: 18px 18px !important;
background-position: -3px -3px !important;
opacity: .55 !important;
mask-image:
linear-gradient(
to bottom right,
black 0%,
rgba(0,0,0,.35) 28%,
transparent 55%
) !important;
}
/* ---------------------------------------------------------
LARGE SYSTEM WATERMARK
--------------------------------------------------------- */
.login-page .login-brand::after {
content: "" !important;
position: absolute !important;
width: 560px !important;
height: 560px !important;
right: -105px !important;
bottom: -125px !important;
background-image:
url("../../images/icon%20logo.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: .055 !important;
filter:
grayscale(1)
brightness(2.1) !important;
pointer-events: none !important;
z-index: 2 !important;
transform: rotate(-3deg) !important;
}
/* ---------------------------------------------------------
MAIN CONTENT LAYER
--------------------------------------------------------- */
.login-page .login-brand > * {
position: relative !important;
z-index: 5 !important;
}
/* ---------------------------------------------------------
LOGO — CENTERED AND MOCKUP SIZED
--------------------------------------------------------- */
.login-page .brand-logo {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.login-page .brand-logo-image {
display: block !important;
width: min(390px, 72%) !important;
max-width: 390px !important;
height: auto !important;
object-fit: contain !important;
}
/* ---------------------------------------------------------
MOCKUP HEADING
--------------------------------------------------------- */
.login-page .brand-copy h1 {
color: #ffffff !important;
}
.login-page .brand-copy h1 strong {
color: #20a9ee !important;
}
/* ---------------------------------------------------------
EYEBROW
--------------------------------------------------------- */
.login-page .brand-eyebrow {
color: #20b7ff !important;
}
/* ---------------------------------------------------------
BODY COPY
--------------------------------------------------------- */
.login-page .brand-copy p {
color: rgba(255,255,255,.86) !important;
}
/* ---------------------------------------------------------
FEATURE TEXT
--------------------------------------------------------- */
.login-page .feature-item strong {
color: #ffffff !important;
}
.login-page .feature-item span {
color: rgba(255,255,255,.82) !important;
}
/* ---------------------------------------------------------
FEATURE ICON CIRCLES
--------------------------------------------------------- */
.login-page .feature-icon {
border: 1px solid rgba(255,255,255,.12) !important;
background: rgba(255,255,255,.055) !important;
}
/* ---------------------------------------------------------
MULTICOLOR PANEL SEPARATOR
--------------------------------------------------------- */
.login-page .login-panel {
position: relative !important;
}
.login-page .login-panel::before {
content: "" !important;
position: absolute !important;
left: -5px !important;
top: 0 !important;
bottom: 0 !important;
width: 6px !important;
background:
linear-gradient(
to bottom,
#1688ff 0%,
#1688ff 28%,
#17c8e8 42%,
#ff9f1c 57%,
#ffb000 66%,
#22d46b 82%,
#16c987 100%
) !important;
z-index: 20 !important;
}
/* ---------------------------------------------------------
RESPONSIVE WATERMARK
--------------------------------------------------------- */
@media (max-width: 1100px) {
.login-page .login-brand::after {
width: 430px !important;
height: 430px !important;
right: -90px !important;
bottom: -95px !important;
}
.login-page .brand-logo-image {
width: min(340px, 70%) !important;
}
}
/* =========================================================
GST HUB LOGIN - FINAL LEFT PANEL MOCKUP VISUAL
========================================================= */
/* ---------------------------------------------------------
MOCKUP NAVY BACKGROUND + SUBTLE LIGHTING
--------------------------------------------------------- */
.login-page .login-brand {
position: relative !important;
overflow: hidden !important;
background:
radial-gradient(
circle at 12% 8%,
rgba(20, 112, 255, 0.16),
transparent 28%
),
linear-gradient(
135deg,
#020b2b 0%,
#03143b 48%,
#001b45 100%
) !important;
}
/* ---------------------------------------------------------
SMALL BLUE DOT PATTERN LIKE MOCKUP
--------------------------------------------------------- */
.login-page .login-brand::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
pointer-events: none !important;
background-image:
radial-gradient(
circle,
rgba(20, 132, 255, 0.42) 1.4px,
transparent 1.5px
) !important;
background-size: 18px 18px !important;
background-position: 0 0 !important;
opacity: 0.48 !important;
z-index: 0 !important;
}
/* ---------------------------------------------------------
KEEP CONTENT ABOVE DOTS
--------------------------------------------------------- */
.login-page .login-brand > * {
position: relative !important;
z-index: 5 !important;
}
/* ---------------------------------------------------------
BRAND LOGO - CENTERED AND PROPORTIONAL
--------------------------------------------------------- */
.login-page .brand-logo {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.login-page .brand-logo-image {
width: min(78%, 430px) !important;
max-width: 430px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ---------------------------------------------------------
MAIN LEFT HEADING
--------------------------------------------------------- */
.login-page .brand-copy h1 {
color: #ffffff !important;
font-weight: 700 !important;
}
/* First line */
.login-page .brand-copy h1 {
line-height: 1.12 !important;
}
/* ---------------------------------------------------------
"MADE SIMPLE" MOCKUP GRADIENT
--------------------------------------------------------- */
.login-page .brand-copy h1 strong {
display: block !important;
background:
linear-gradient(
90deg,
#168cff 0%,
#16bce8 48%,
#16d58d 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-weight: 800 !important;
}
/* ---------------------------------------------------------
FEATURE TEXT
--------------------------------------------------------- */
.login-page .feature-item strong {
color: #ffffff !important;
}
.login-page .feature-item span {
color: rgba(235, 243, 255, 0.88) !important;
}
/* ---------------------------------------------------------
MOCKUP FEATURE ICONS
--------------------------------------------------------- */
.login-page .feature-icon.green {
color: #20e28a !important;
}
.login-page .feature-icon.purple {
color: #a66cff !important;
}
.login-page .feature-icon.orange {
color: #ff9d16 !important;
}
/* ---------------------------------------------------------
ICON BACKGROUND / BORDER
--------------------------------------------------------- */
.login-page .feature-icon {
border-color: rgba(80, 150, 255, 0.22) !important;
background:
rgba(20, 73, 150, 0.28) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}
/* ---------------------------------------------------------
GST HUB WATERMARK
USE EXISTING icon logo.png ONLY
--------------------------------------------------------- */
.login-page .login-brand::after {
content: "" !important;
position: absolute !important;
width: 520px !important;
height: 520px !important;
right: -150px !important;
bottom: -105px !important;
background-image:
url("../../images/icon%20logo.png") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: 0.055 !important;
filter:
saturate(0.35)
brightness(1.35) !important;
pointer-events: none !important;
z-index: 2 !important;
transform: rotate(-3deg) !important;
}
/* ---------------------------------------------------------
WATERMARK MUST REMAIN BEHIND CONTENT
--------------------------------------------------------- */
.login-page .login-brand > * {
position: relative !important;
z-index: 5 !important;
}
/* ---------------------------------------------------------
RESPONSIVE LOGO
--------------------------------------------------------- */
@media (max-width: 1000px) {
.login-page .brand-logo-image {
width: min(72%, 360px) !important;
}
.login-page .login-brand::after {
width: 360px !important;
height: 360px !important;
right: -80px !important;
bottom: -55px !important;
}
}
/* =========================================================
GST HUB LOGIN — FINAL LEFT TITLE
========================================================= */
.login-page .brand-copy h1 {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: clamp(30px, 3vw, 42px) !important;
line-height: 1.08 !important;
font-weight: 800 !important;
letter-spacing: -1.2px !important;
white-space: nowrap !important;
color: #ffffff !important;
}
/* Smart GST Data Preparation — single line */
.login-page .brand-copy h1 {
color: #ffffff !important;
}
/* Made Simple — second line with dual-color gradient */
.login-page .brand-copy h1 strong {
display: block !important;
margin-top: 4px !important;
font-size: 1em !important;
line-height: 1.05 !important;
font-weight: 800 !important;
letter-spacing: -1.2px !important;
background: linear-gradient(
90deg,
#1597ff 0%,
#18b8f5 48%,
#16d47b 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Keep title inside the left panel */
.login-page .brand-copy {
max-width: 100% !important;
overflow: visible !important;
}
/* Slightly smaller on narrower desktop widths */
@media (max-width: 1200px) {
.login-page .brand-copy h1 {
font-size: 34px !important;
}
}
@media (max-width: 900px) {
.login-page .brand-copy h1 {
font-size: 30px !important;
white-space: normal !important;
}
}
/* =========================================================
MADE SIMPLE — DUAL COLOR
========================================================= */
.login-page .brand-copy h1 strong {
background: linear-gradient(
90deg,
#1597ff 0%,
#18b8f5 50%,
#19c96b 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* =========================================================
FINAL OVERRIDE — MADE SIMPLE GRADIENT
Must remain LAST in login.css
========================================================= */
.login-page .brand-copy h1 strong,
.login-page .brand-copy h1 > strong {
display: block !important;
background: linear-gradient(
90deg,
#1597ff 0%,
#1597ff 35%,
#18b8f5 65%,
#19c96b 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
background-color: transparent !important;
}
/* =========================================================
FINAL LEFT TITLE — MADE SIMPLE GRADIENT
Must remain AFTER all previous title rules
========================================================= */
.login-page .brand-copy h1 strong {
display: inline-block !important;
color: transparent !important;
background-color: transparent !important;
background-image: linear-gradient(
90deg,
#1597ff 0%,
#18b8f5 45%,
#19c96b 100%
) !important;
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-size: 100% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
font-weight: 800 !important;
}
/* Keep first line white */
.login-page .brand-copy h1 {
color: #ffffff !important;
}
/* =========================================================
FINAL TITLE SIZE / SINGLE LINE
========================================================= */
.login-page .brand-copy h1 {
font-size: clamp(30px, 3vw, 42px) !important;
line-height: 1.08 !important;
letter-spacing: -1.2px !important;
}
/* =========================================================
FINAL FIX — LEFT TITLE TWO-LINE LAYOUT
========================================================= */
.login-page .brand-copy h1 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
white-space: normal !important;
overflow: visible !important;
color: #ffffff !important;
font-size: clamp(30px, 3vw, 42px) !important;
line-height: 1.08 !important;
letter-spacing: -1.2px !important;
}
/* First line:
Smart GST Data Preparation
*/
.login-page .brand-copy h1 > strong {
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin-top: 6px !important;
white-space: nowrap !important;
font-size: 0.92em !important;
line-height: 1.05 !important;
font-weight: 800 !important;
background-image: linear-gradient(
90deg,
#1597ff 0%,
#18b8f5 45%,
#19c96b 100%
) !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: 100% 100% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
background-color: transparent !important;
}
/* =========================================================
SOCIAL LOGIN BUTTONS — SINGLE ROW
========================================================= */
.login-page .social-buttons {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
width: 100% !important;
}
.login-page .social-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
white-space: nowrap !important;
min-width: 0 !important;
}
.login-page .google-icon,
.login-page .microsoft-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: 20px !important;
height: 20px !important;
}
.login-page .google-icon svg,
.login-page .microsoft-icon svg {
display: block !important;
flex: 0 0 auto !important;
}
@media (max-width: 560px) {
.login-page .social-buttons {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
GST HUB LOGIN — RIGHT PANEL TOP VISIBILITY FIX
========================================================= */
@media (min-width: 851px) {
.login-page .login-panel {
align-items: flex-start !important;
justify-content: center !important;
padding-top: 72px !important;
padding-bottom: 40px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.login-page .login-card {
margin-top: 0 !important;
}
}
/* =========================================================
GST HUB LOGIN — REDUCE RIGHT CARD TOP GAP
========================================================= */
@media (min-width: 851px) {
.login-page .login-panel {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
/* =========================================================
GST HUB SIGNUP — STEP 2 FIRM DETAILS
COMPACT FORM CONTROLS
========================================================= */
.login-page .signup-step#signupStep2 {
width: 100%;
box-sizing: border-box;
}
.login-page .signup-step#signupStep2 h3 {
margin-bottom: 8px !important;
}
.login-page .signup-step#signupStep2 .signup-step-description {
margin: 0 0 22px !important;
}
/* -----------------------------------------
TWO COLUMN FIELDS
----------------------------------------- */
.login-page .signup-step#signupStep2 .signup-two-column {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 18px !important;
width: 100% !important;
}
/* -----------------------------------------
ALL STEP 2 FORM CONTROLS
----------------------------------------- */
.login-page .signup-step#signupStep2 input,
.login-page .signup-step#signupStep2 select,
.login-page .signup-step#signupStep2 textarea {
width: 100% !important;
box-sizing: border-box !important;
border: 1px solid #d7e0ec !important;
border-radius: 14px !important;
background: #ffffff !important;
color: #17243f !important;
font-family: inherit !important;
font-size: 16px !important;
outline: none !important;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease !important;
}
/* -----------------------------------------
INPUT / SELECT HEIGHT
----------------------------------------- */
.login-page .signup-step#signupStep2 input,
.login-page .signup-step#signupStep2 select {
height: 54px !important;
min-height: 54px !important;
padding: 0 16px !important;
}
/* -----------------------------------------
SELECT
----------------------------------------- */
.login-page .signup-step#signupStep2 select {
appearance: auto !important;
-webkit-appearance: auto !important;
cursor: pointer !important;
}
/* -----------------------------------------
TEXTAREA
----------------------------------------- */
.login-page .signup-step#signupStep2 textarea {
min-height: 76px !important;
height: 76px !important;
padding: 13px 16px !important;
resize: vertical !important;
line-height: 1.45 !important;
}
/* -----------------------------------------
PLACEHOLDER
----------------------------------------- */
.login-page .signup-step#signupStep2 input::placeholder,
.login-page .signup-step#signupStep2 textarea::placeholder {
color: #858585 !important;
opacity: 1 !important;
}
/* -----------------------------------------
FOCUS
----------------------------------------- */
.login-page .signup-step#signupStep2 input:focus,
.login-page .signup-step#signupStep2 select:focus,
.login-page .signup-step#signupStep2 textarea:focus {
border-color: #2587ed !important;
box-shadow:
0 0 0 3px rgba(37, 135, 237, 0.10) !important;
}
/* -----------------------------------------
LABEL SPACING
----------------------------------------- */
.login-page .signup-step#signupStep2 label {
display: block !important;
margin: 0 0 7px !important;
color: #263653 !important;
font-size: 16px !important;
line-height: 1.25 !important;
}
/* -----------------------------------------
FIELD GROUP SPACING
----------------------------------------- */
.login-page .signup-step#signupStep2 .signup-two-column {
margin-bottom: 17px !important;
}
.login-page .signup-step#signupStep2 > .input-wrap {
margin-bottom: 17px !important;
}
/* -----------------------------------------
REGISTERED ADDRESS
----------------------------------------- */
.login-page .signup-step#signupStep2 > label[for="signupAddress"] {
margin-top: 2px !important;
}
/* -----------------------------------------
CONTINUE BUTTON
----------------------------------------- */
.login-page .signup-step#signupStep2 .primary-btn {
width: 100% !important;
height: 54px !important;
min-height: 54px !important;
margin-top: 4px !important;
border-radius: 14px !important;
}
/* -----------------------------------------
BACK BUTTON
----------------------------------------- */
.login-page .signup-step#signupStep2 .signup-back-btn {
display: block !important;
width: 100% !important;
margin-top: 8px !important;
}
/* -----------------------------------------
MOBILE
----------------------------------------- */
@media (max-width: 700px) {
.login-page .signup-step#signupStep2 .signup-two-column {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.login-page .signup-step#signupStep2 .signup-two-column > div {
margin-bottom: 17px !important;
}
}
/* =========================================================
GST HUB SIGNUP — STEP 3 REVIEW
========================================================= */
.login-page .signup-step#signupStep3 {
width: 100%;
box-sizing: border-box;
}
.login-page .signup-step#signupStep3 h3 {
margin-bottom: 8px !important;
}
.login-page .signup-step#signupStep3 .signup-step-description {
margin: 0 0 20px !important;
}
.login-page .signup-review-section {
width: 100%;
margin-bottom: 18px;
padding: 16px 18px;
box-sizing: border-box;
border: 1px solid #e1e8f2;
border-radius: 14px;
background: #f9fbfe;
}
.login-page .signup-review-title {
margin-bottom: 13px;
color: #17243f;
font-size: 15px;
font-weight: 800;
}
.login-page .signup-review-grid {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 13px 22px;
}
.login-page .signup-review-item {
min-width: 0;
}
.login-page .signup-review-item span,
.login-page .signup-review-address span {
display: block;
margin-bottom: 4px;
color: #8190a8;
font-size: 12px;
font-weight: 600;
}
.login-page .signup-review-item strong,
.login-page .signup-review-address strong {
display: block;
color: #263653;
font-size: 14px;
font-weight: 700;
overflow-wrap: anywhere;
}
.login-page .signup-review-address {
margin-top: 14px;
padding-top: 13px;
border-top: 1px solid #e5ebf3;
}
.login-page .signup-step#signupStep3 .primary-btn {
width: 100% !important;
height: 54px !important;
min-height: 54px !important;
border-radius: 14px !important;
}
.login-page .signup-step#signupStep3 .signup-back-btn {
display: block !important;
width: 100% !important;
margin-top: 8px !important;
}
@media (max-width: 700px) {
.login-page .signup-review-grid {
grid-template-columns: 1fr;
}
}