/* ================================================================
fix.css — HARIKRISHNA ART HOUSE
Add as the ONLY extra in , AFTER style.css.
Delete fix1.css from the server and remove its tag —
having both loaded at once causes conflicting overrides.
================================================================ */
/* ── 1. NAVBAR — always above everything ── */
.navbar {
position: fixed !important;
top: 0; left: 0; right: 0;
z-index: 99999 !important;
overflow: visible !important;
}
.navbar__inner, .navbar__nav { overflow: visible !important; position: relative !important; }
.nav-dd { position: relative !important; overflow: visible !important; }
/* ── 2. DROPDOWN ── */
[id^="dd-panel"] {
display: none !important;
position: absolute !important;
top: calc(100% + 6px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
min-width: 210px !important;
z-index: 999999 !important;
background: rgba(12, 9, 6, 0.97);
border: 1px solid rgba(184, 150, 90, 0.22);
box-shadow: 0 20px 52px rgba(0,0,0,.6);
padding: 8px 0;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nav-dd:hover [id^="dd-panel"] { display: block !important; }
.nav-dd__item {
display: block !important;
font-family: 'Tenor Sans', sans-serif;
font-size: .63rem; letter-spacing: .14em; text-transform: uppercase;
color: rgba(200,191,176,.82); padding: 11px 22px; white-space: nowrap;
border-left: 2px solid transparent;
transition: color .18s, background .18s, padding-left .18s;
text-decoration: none;
}
.nav-dd__item:hover { color:#b8965a; background:rgba(184,150,90,.09); padding-left:28px; border-left-color:#b8965a; }
[class*="nav-caret"] { transition: transform .22s ease; display:inline-block; vertical-align:middle; margin-left:3px; opacity:.65; }
.nav-dd:hover [class*="nav-caret"] { transform: rotate(180deg); }
/* ── 3. HERO SLIDER STRUCTURE ── */
.hero-slider {
position: relative !important;
z-index: 0 !important;
height: 100vh !important;
min-height: 540px;
overflow: hidden !important;
background: #0a0704;
}
.hs-slides {
position: absolute !important;
inset: 0 !important; width: 100%; height: 100%;
}
.hs-slide {
position: absolute !important;
inset: 0 !important; width: 100%; height: 100%;
opacity: 0 !important;
pointer-events: none !important;
z-index: 1 !important;
transition: opacity 1s ease !important;
}
.hs-slide.active { opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important; }
.hs-slide__bg { position: absolute !important; inset: 0 !important; width:100%; height:100%; }
.hs-slide__photo {
position: absolute !important; inset: 0 !important; width:100%; height:100%;
background-size: cover !important; background-position: center !important;
background-repeat: no-repeat !important;
opacity: 1 !important;
filter: brightness(1.15) contrast(1.08) !important;
transition: transform 9s ease, filter .4s ease !important;
}
.hs-slide.active .hs-slide__photo { transform: scale(1.05) !important; }
/* ── 4. BLACK OVERLAY ON THE IMAGE ──
Flat black tint across the ENTIRE photo (not just a side gradient),
plus extra darkening on the left for text contrast. */
.hs-slide__gradient {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.15) 0%,
rgba(0,0,0,0.20) 50%,
rgba(0,0,0,0.30) 100%
) !important;
}
/* ── 5. SLIDE CONTENT POSITION ── */
.hs-slide__content {
position: absolute !important; inset: 0 !important;
display: flex !important; align-items: center !important;
padding: 80px 60px 0 !important; z-index: 5 !important;
}
/* ── 6. TEXT — always light (since every slide is now black-overlaid) ── */
.hs-label {
display: block;
font-family: 'Tenor Sans', sans-serif;
font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
margin-bottom: 1.6rem;
color: #b8965a !important;
transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s !important;
opacity: 0; transform: translateY(14px);
}
.hs-heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300; font-size: clamp(3rem, 7vw, 6.5rem); line-height: 1.06;
margin-bottom: 1.5rem;
color: #f4efe5 !important;
text-shadow: 0 2px 28px rgba(0,0,0,.4);
transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s !important;
opacity: 0; transform: translateY(18px);
}
.hs-heading em {
font-style: italic; display: block;
color: #d4ae78 !important;
}
.hs-sub {
font-family: 'EB Garamond', Georgia, serif;
font-size: 1.1rem; line-height: 1.82; max-width: 440px; margin-bottom: 2.4rem;
color: rgba(210,200,185,.88) !important;
transition: opacity 0.7s ease 0.6s, transform 0.7s ease 0.6s !important;
opacity: 0; transform: translateY(14px);
}
.hs-ctas {
display: flex; gap: 14px; flex-wrap: wrap;
transition: opacity 0.7s ease 0.75s, transform 0.7s ease 0.75s !important;
opacity: 0; transform: translateY(12px);
}
.hs-ctas .btn { transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease !important; }
.btn--ghost { border-color: rgba(240,235,224,.5) !important; color: #f0ebe0 !important; }
.btn--ghost:hover { background: rgba(240,235,224,1) !important; color: #1a1208 !important; }
.btn--outline-gold { border-color: rgba(184,150,90,.55) !important; color: #d4b07a !important; }
/* Text animates in when slide is active */
.hs-slide.active .hs-label { opacity:1 !important; transform:none !important; }
.hs-slide.active .hs-heading { opacity:1 !important; transform:none !important; }
.hs-slide.active .hs-sub { opacity:1 !important; transform:none !important; }
.hs-slide.active .hs-ctas { opacity:1 !important; transform:none !important; }
/* ── 7. HERO CONTROLS ── */
.hs-arrow {
position: absolute !important;
top: 50% !important; transform: translateY(-50%) !important;
z-index: 20 !important; width:52px; height:52px;
display:flex !important; align-items:center; justify-content:center;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.18);
color: rgba(240,235,224,.85); cursor:pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: background .25s, border-color .25s, transform .25s !important;
}
.hs-arrow:hover { background:rgba(184,150,90,.3) !important; border-color:#b8965a !important; color:#b8965a !important; transform:translateY(-50%) scale(1.1) !important; }
.hs-arrow--prev { left:24px !important; }
.hs-arrow--next { right:24px !important; }
.hs-dots {
position:absolute !important; bottom:32px !important; left:50% !important;
transform:translateX(-50%) !important; display:flex !important; gap:8px; align-items:center; z-index:20 !important;
}
.hs-dot { height:7px; width:7px; border-radius:50%; background:rgba(240,235,224,.3); border:none; cursor:pointer; padding:0; transition: width .35s, background .35s, border-radius .35s; }
.hs-dot.active { width:26px !important; background:#b8965a !important; border-radius:4px !important; }
.hs-counter { position:absolute !important; bottom:32px; right:48px; z-index:20 !important; display:flex; align-items:center; gap:10px; }
.hs-counter__cur { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:300; color:#b8965a; }
.hs-counter__bar { display:block; width:24px; height:1px; background:rgba(184,150,90,.35); }
.hs-counter__tot { font-family:'Tenor Sans',sans-serif; font-size:.62rem; letter-spacing:.18em; color:rgba(200,191,176,.4); }
.hs-scroll { position:absolute !important; bottom:32px; left:50%; margin-left:-48px; z-index:20 !important; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.5; }
.hs-scroll span { font-family:'Tenor Sans',sans-serif; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(200,191,176,.6); }
.hs-scroll__line { width:1px; height:44px; background:linear-gradient(to bottom,#b8965a,transparent); animation:hsPulse 2s ease-in-out infinite; }
@keyframes hsPulse {
0% { transform:scaleY(0);transform-origin:top }
50% { transform:scaleY(1);transform-origin:top }
51% { transform:scaleY(1);transform-origin:bottom }
100% { transform:scaleY(0);transform-origin:bottom }
}
/* ── 8. PRODUCT CARDS — permanent shadow ── */
.prod-card {
box-shadow: 0 2px 10px rgba(30,22,14,.08), 0 6px 22px rgba(30,22,14,.07) !important;
transition: transform .35s ease, box-shadow .35s ease !important;
}
.prod-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 8px 24px rgba(30,22,14,.12), 0 24px 56px rgba(30,22,14,.14) !important;
}
.prod-card__img { transition: transform .65s cubic-bezier(.4,0,.2,1) !important; }
.prod-card:hover .prod-card__img { transform: scale(1.1) !important; }
/* ── 9. RESPONSIVE ── */
@media (max-width: 640px) {
[id^="dd-panel"] { position:static !important; transform:none !important; top:auto !important; left:auto !important; min-width:unset !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:4px 0 8px !important; display:none !important; }
.nav-dd:hover [id^="dd-panel"] { display:block !important; }
.nav-dd__item { font-size:.6rem !important; padding:6px 24px !important; border-left:none !important; color:rgba(200,191,176,.5) !important; }
}
@media (max-width:768px) {
.hero-slider { height:100svh !important; }
.hs-slide__content { padding: 72px 28px 0 !important; }
.hs-heading { font-size:clamp(2.2rem,9vw,3.5rem) !important; }
.hs-sub { max-width:100% !important; font-size:1rem !important; }
.hs-arrow { width:40px !important; height:40px !important; }
.hs-arrow--prev { left:10px !important; }
.hs-arrow--next { right:10px !important; }
.hs-counter { display:none !important; }
}
@media (max-width:480px) {
.hs-label { font-size:.58rem !important; }
.hs-ctas { flex-direction:column; gap:10px !important; }
.hs-ctas .btn { text-align:center; }
.hs-scroll { display:none !important; }
}
/* ============================================
MOBILE: Center "Featured Works / Selected Pieces"
and other section-header blocks
(style.css has an unconditional .section-header
rule loaded AFTER its own mobile media query, so
it beats plain rules at every width — !important
is required here to win on mobile.)
============================================ */
@media (max-width: 768px) {
.section-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 16px !important;
}
.section-header > div {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.section-header .section-label,
.section-header h2 {
text-align: center !important;
width: 100% !important;
padding-left: 0 !important;
border-left: none !important;
}
.section-header > a,
.section-header > .btn {
align-self: center !important;
}
}