fix home page style
This commit is contained in:
@@ -400,3 +400,293 @@
|
||||
min-width: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom premium Industry Solutions hover cards styles */
|
||||
.industry-solutions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
width: 90%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.industry-solutions-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.industry-solutions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}.industry-card-link {
|
||||
position: relative;
|
||||
height: 600px;
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: #121212;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
/* Elegant glass border highlight */
|
||||
.industry-card-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
transition: border-color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Premium luxury shimmer sweep animation on hover */
|
||||
@keyframes shimmer-sweep {
|
||||
0% { transform: translateX(-150%) skewX(-25deg); }
|
||||
100% { transform: translateX(150%) skewX(-25deg); }
|
||||
}
|
||||
|
||||
.industry-card-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.18) 50%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
transform: translateX(-150%) skewX(-25deg);
|
||||
z-index: 7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.industry-card-link:hover::before {
|
||||
animation: shimmer-sweep 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.industry-card-link:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(192, 18, 39, 0.25);
|
||||
}
|
||||
|
||||
.industry-card-link:hover::after {
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.industry-card-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.industry-card-link:hover .industry-card-bg {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.industry-card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
|
||||
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Fade out dark overlay on hover to prevent muddying the crimson wash! */
|
||||
.industry-card-link:hover .industry-card-overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.industry-card-hover-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
/* Glowing vibrant crimson wash matching the reference image exactly */
|
||||
background: linear-gradient(to top, rgba(192, 18, 39, 0.88) 0%, rgba(215, 20, 40, 0.8) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.industry-card-link:hover .industry-card-hover-bg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Default card bottom text state */
|
||||
.industry-card-default-content {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 24px;
|
||||
z-index: 4;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.industry-card-link:hover .industry-card-default-content {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.industry-card-default-title {
|
||||
color: #ffffff !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 !important;
|
||||
letter-spacing: -0.5px !important;
|
||||
text-transform: none !important;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Hover state content wrapper */
|
||||
.industry-card-hover-content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
padding: 40px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.industry-card-link:hover .industry-card-hover-content {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.industry-card-hover-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Premium horizontal top divider line from the prompt design */
|
||||
.industry-card-hover-top::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.industry-card-description {
|
||||
color: #ffffff !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1.4 !important;
|
||||
margin: 0 !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: -0.2px !important;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
|
||||
}
|
||||
|
||||
.industry-card-section-title {
|
||||
color: #ffffff !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 800 !important;
|
||||
letter-spacing: 1.5px !important;
|
||||
margin-bottom: 10px !important;
|
||||
text-transform: uppercase !important;
|
||||
opacity: 0.9 !important;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
|
||||
}
|
||||
|
||||
.industry-card-list {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.industry-card-list-item {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.4 !important;
|
||||
position: relative !important;
|
||||
padding-left: 18px !important;
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
|
||||
}
|
||||
|
||||
.industry-card-link:hover .industry-card-list-item {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Staggered animation entry delays - snappier response */
|
||||
.industry-card-list-item.bullet-1 { transition-delay: 0.04s; }
|
||||
.industry-card-list-item.bullet-2 { transition-delay: 0.08s; }
|
||||
.industry-card-list-item.bullet-3 { transition-delay: 0.12s; }
|
||||
.industry-card-list-item.bullet-4 { transition-delay: 0.16s; }
|
||||
.industry-card-list-item.bullet-5 { transition-delay: 0.2s; }
|
||||
.industry-card-list-item.bullet-6 { transition-delay: 0.24s; }
|
||||
|
||||
/* Custom CSS circular dot for bullet points to guarantee consistent rendering */
|
||||
.industry-card-list-item::before {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 7px !important;
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
/* Hover state bottom section */
|
||||
.industry-card-hover-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.industry-card-hover-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #c01227;
|
||||
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Removed rotate(45deg) which turned the ↗ diagonal arrow into a straight right arrow → */
|
||||
.industry-card-link:hover .industry-card-hover-icon {
|
||||
transform: scale(1.08) translateY(-2px);
|
||||
background-color: #ffffff;
|
||||
color: #c01227;
|
||||
}
|
||||
|
||||
.industry-card-hover-title {
|
||||
color: #ffffff !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 !important;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: -0.5px !important;
|
||||
}
|
||||
|
||||
.elementor-element-3b4a7cc > .e-con-inner {
|
||||
padding-left: clamp(20px, 4vw, 50px) !important;
|
||||
padding-right: clamp(20px, 4vw, 50px) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user