d_s_bisht/devsofttech_hms_ci4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine hero for dark wallpaper: 3D format logo card with soft curved corners, radiant white heading with dark contour outline, and high-contrast meta text

Browse Source
This commit is contained in:
DevSoftTech Server 2026-10-27 21:01:53 +05:30
parent eaf131f96e
commit aac71afc70
1 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/Views/auth/login.php
View File

@ -103,16 +103,16 @@ $footerVersion = hms_footer_version();
.login-hero-section.has-wallpaper { .login-hero-section.has-wallpaper {
background-size: cover; background-size: cover;
background-position: center right; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
color: #0b2545; color: #ffffff;
} }
.login-hero-section.has-wallpaper::before { .login-hero-section.has-wallpaper::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(240, 248, 248, 0.25) 100%); background: linear-gradient(180deg, rgba(7, 24, 43, 0.18) 0%, rgba(7, 24, 43, 0.42) 50%, rgba(7, 24, 43, 0.8) 100%);
z-index: 1; z-index: 1;
} }
@ -125,43 +125,67 @@ $footerVersion = hms_footer_version();
height: 100%; height: 100%;
} }
/* 3D Format Box for Hospital Logo with curved corners */
.login-hero-logo-wrap { .login-hero-logo-wrap {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: center;
padding: 0; padding: 16px 26px;
background: transparent; border-radius: 20px;
border: none; background: linear-gradient(150deg, #ffffff 0%, #edf6f7 100%);
box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.38),
0 4px 10px rgba(0, 0, 0, 0.22),
inset 0 2px 1px rgba(255, 255, 255, 1),
inset 0 -2px 4px rgba(7, 34, 53, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.login-hero-logo-wrap:hover {
transform: translateY(-2px);
box-shadow:
0 20px 42px rgba(0, 0, 0, 0.42),
0 6px 14px rgba(0, 0, 0, 0.25),
inset 0 2px 1px rgba(255, 255, 255, 1),
inset 0 -2px 4px rgba(7, 34, 53, 0.08);
} }
.login-hero-logo-img { .login-hero-logo-img {
max-height: 95px; max-height: 85px;
max-width: 290px; max-width: 260px;
width: auto; width: auto;
height: auto; height: auto;
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 2px 6px rgba(11, 37, 69, 0.12)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
/* Radiant, crisp heading on dark background with dark outline and ambient glow */
.login-hero-title { .login-hero-title {
font-size: clamp(2.2rem, 3.8vw, 3.4rem); font-size: clamp(2.2rem, 3.8vw, 3.4rem);
font-weight: 800; font-weight: 800;
line-height: 1.18; line-height: 1.18;
letter-spacing: -0.015em; letter-spacing: -0.015em;
color: #0b2545; color: #ffffff;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85); -webkit-text-stroke: 1.2px #061c2e;
paint-order: stroke fill;
text-shadow:
0 3px 6px rgba(0, 0, 0, 0.8),
0 8px 24px rgba(0, 0, 0, 0.6),
0 0 32px rgba(45, 212, 191, 0.3);
} }
.login-hero-subtitle { .login-hero-subtitle {
font-size: 1.15rem; font-size: 1.15rem;
color: #334e68; color: #e2e8f0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
max-width: 620px; max-width: 620px;
} }
.login-hero-meta { .login-hero-meta {
color: #486581; color: #f1f5f9;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
font-weight: 500; font-weight: 500;
} }
@ -257,19 +281,19 @@ $footerVersion = hms_footer_version();
</p> </p>
<?php if (!empty($hospitalAddress1) || !empty($hospitalPhone) || !empty($hospitalHfrId)): ?> <?php if (!empty($hospitalAddress1) || !empty($hospitalPhone) || !empty($hospitalHfrId)): ?>
<div class="d-flex flex-wrap gap-3 align-items-center small login-hero-meta"> <div class="d-flex flex-wrap gap-3 align-items-center text-white small login-hero-meta">
<?php if (!empty($hospitalAddress1)): ?> <?php if (!empty($hospitalAddress1)): ?>
<span class="d-inline-flex align-items-center gap-1"> <span class="d-inline-flex align-items-center gap-1">
<i class="bi bi-geo-alt-fill" style="color: #257a82;"></i> <?= esc($hospitalAddress1) ?><?= !empty($hospitalAddress2) ? ', ' . esc($hospitalAddress2) : '' ?> <i class="bi bi-geo-alt-fill text-warning"></i> <?= esc($hospitalAddress1) ?><?= !empty($hospitalAddress2) ? ', ' . esc($hospitalAddress2) : '' ?>
</span> </span>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($hospitalPhone)): ?> <?php if (!empty($hospitalPhone)): ?>
<span class="d-inline-flex align-items-center gap-1"> <span class="d-inline-flex align-items-center gap-1">
<i class="bi bi-telephone-fill" style="color: #257a82;"></i> <?= esc($hospitalPhone) ?> <i class="bi bi-telephone-fill text-success"></i> <?= esc($hospitalPhone) ?>
</span> </span>
<?php endif; ?> <?php endif; ?>
<?php if (!empty($hospitalHfrId)): ?> <?php if (!empty($hospitalHfrId)): ?>
<span class="badge px-2 py-1 shadow-sm" style="background-color: #e6f6f4; color: #147d75; border: 1px solid #b2e2df; font-weight: 600;"> <span class="badge bg-primary bg-opacity-75 border border-primary px-2 py-1 shadow-sm">
<i class="bi bi-shield-check me-1"></i> HFR ID: <?= esc($hospitalHfrId) ?> <i class="bi bi-shield-check me-1"></i> HFR ID: <?= esc($hospitalHfrId) ?>
</span> </span>
<?php endif; ?> <?php endif; ?>