update branding to Alovedic (code changes)
This commit is contained in:
Gokulvarthan Ramesh
+183
-1
@@ -1,4 +1,4 @@
|
||||
/* ===================================================================
|
||||
/* ===================================================================
|
||||
CurcuVance BioSciences - Components Stylesheet
|
||||
=================================================================== */
|
||||
|
||||
@@ -4559,3 +4559,185 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===================================================================
|
||||
Bento Grid Component (Ayurvedic Section)
|
||||
=================================================================== */
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.bento-card {
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
|
||||
border: 1px solid rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.bento-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.bento-card-image {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bento-card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bento-card-content {
|
||||
padding: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bento-card-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary-900);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.bento-card-title strong {
|
||||
color: var(--gold-500);
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
margin-right: 0.2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.bento-card-desc {
|
||||
color: var(--neutral-600);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.bento-card {
|
||||
grid-column: span 12 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
Advanced Glassmorphism UI Component (Ayurvedic Section)
|
||||
=================================================================== */
|
||||
.glass-bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
position: relative;
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 25px 50px rgba(217, 119, 6, 0.15);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.glass-card-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.8s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.glass-card:hover .glass-card-bg {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.glass-content-overlay {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
z-index: 2;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.glass-card:hover .glass-content-overlay {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.glass-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-900);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.glass-card-title .letter {
|
||||
background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.glass-card-desc {
|
||||
color: var(--neutral-700);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
opacity: 0.8;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover .glass-card-desc {
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.glass-card-tall { height: 450px; }
|
||||
.glass-card-short { height: 350px; }
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.glass-card {
|
||||
grid-column: span 12 !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user