html, body {
background-color: #FDFCF8;
color: #222222;
overflow-x: hidden;
font-family: 'Manrope', sans-serif;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.texture-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.18;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
}
::selection { background-color: #BFA270; color: #FDFCF8; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #FDFCF8; }
::-webkit-scrollbar-thumb { background: #E0DCD3; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #BFA270; }
.reveal-up { opacity: 0; transform: translateY(40px); }
.reveal-fade { opacity: 0; }
.img-editorial {
transform: scale(var(--base-scale, 1));
transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), filter 1.2s ease;
}
.img-wrap:hover .img-editorial {
transform: scale(var(--hover-scale, 1.05));
}
.glass-nav {
background: rgba(253, 252, 248, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(191, 162, 112, 0.15);
}
.entrepreneur-card { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.entrepreneur-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -6px rgba(191, 162, 112, 0.15); }
.logo-marquee-container {
overflow: hidden; white-space: nowrap; position: relative; width: 100%;
mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.logo-marquee-track {
display: flex; align-items: center; gap: 1.5rem; width: max-content;
animation: scrollMarquee 38s linear infinite;
}
.logo-marquee-container:hover .logo-marquee-track { animation-play-state: paused; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-logo-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 115px; height: 65px; padding: 10px 18px;
background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(191, 162, 112, 0.35);
border-radius: 9999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04), 0 0 10px rgba(191, 162, 112, 0.1);
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer;
backdrop-filter: blur(8px); flex-shrink: 0;
}
.marquee-logo-badge:hover {
transform: translateY(-4px) scale(1.1); border-color: #B8860B;
box-shadow: 0 10px 25px rgba(184, 134, 11, 0.3), 0 0 15px rgba(229, 193, 88, 0.4);
}
.marquee-logo-badge img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)); }
/* PROFILE SECTION STYLES MATCHING THE SAMPLE SCREENSHOT EXACTLY */
.profile-detail-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F8FAFC;
overflow: hidden;
}
.cover-img-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 68%;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.hero-profile-img {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
z-index: 1;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 28%, black 100%),
linear-gradient(to top, transparent 0%, black 12%, black 100%);
mask-image: linear-gradient(to right, transparent 0%, black 28%, black 100%),
linear-gradient(to top, transparent 0%, black 12%, black 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.profile-content-wrapper {
position: relative;
z-index: 10;
height: 100vh;
display: flex;
flex-direction: column;
}
.scrollable-profile-body {
flex-grow: 1;
overflow-y: auto;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #CBD5E1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #B8860B; }
.profile-modern-block {
position: relative;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.profile-section-heading {
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: 1.65rem;
font-weight: 700;
color: #000000;
display: inline-block;
position: relative;
margin-bottom: 0.6rem;
padding-bottom: 2px;
border-bottom: 2.5px solid #B8860B;
line-height: 1.2;
}
.profile-body-text {
font-family: 'Inter', sans-serif;
color: #1F2937;
font-size: 1.025rem;
line-height: 1.75;
letter-spacing: -0.01em;
}
.profile-body-text strong {
font-weight: 700;
color: #B8860B;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
@media (max-width: 1024px) {
.cover-img-container { width: 75%; }
.profile-content-wrapper { width: 55% !important; }
}
@media (max-width: 768px) {
.profile-detail-section {
height: auto;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.cover-img-container {
position: relative;
height: 380px;
width: 100%;
inset: auto;
}
.hero-profile-img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.profile-content-wrapper {
height: auto !important;
width: 100% !important;
padding-top: 1.5rem !important;
}
.scrollable-profile-body {
overflow: visible !important;
height: auto;
}
}