/* Extracted from index2_version4.html
.single-hampi_project{
padding-top:100px;
}*/
.info-popup {
position: absolute;
top: 160px;
left: -12%;
transform: translateY(-50%);
background: transparent;
border-radius: 50%;
width: 100px;
height: 60px;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: width 0.5s ease, height 0.5s ease, border-radius 0.5s ease, padding 0.5s ease, background 0.5s ease;
z-index: 10000;
overflow: hidden;
flex-direction: column;
animation: bounce 2s infinite;
}
#project-text-container [data-elementor-type=popup]:not(.elementor-edit-area){
display:block !important;
}
@keyframes bounce {
0%, 100% { transform: translateY(-50%) translateY(0); }
50% { transform: translateY(-50%) translateY(-10px); }
}
.info-popup:hover {
width: 340px;
height: 580px;
border-radius: 16px;
padding: 20px;
align-items: center;
background: #fff;
color: #333;
animation: none;
overflow: hidden;
}
.info-popup .popup-icon {
width: 100px;
height: 60px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
position: relative;
font-size: 40px;
font-weight: bold;
color: #eb480b !important;
font-family: 'Dancing Script', cursive;
animation: jump 1.1s infinite ease-in-out;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.info-popup img.popup-image {
display: none;
width: 100%;
height: 280px;
object-fit: cover;
border-radius: 10px;
margin: 12px auto 16px auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.info-popup:hover img.popup-image {
display: block;
opacity: 1;
transform: translateY(0) scale(1.03);
}
.info-popup span {
display: none;
font-size: 15px;
line-height: 1.6;
opacity: 0;
transition: opacity 0.5s ease;
text-align: center;
}
.info-popup:hover span {
display: block;
white-space: normal;
font-size: 15px;
font-weight: normal;
color: #333;
opacity: 1;
animation: fadeInUp 0.5s ease;
}
.info-popup:hover strong {
color: #f05a28;
font-size: 16px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ======== INTRO + TITLE OVERLAY ======== */
.intro-overlay,
.title-overlay{
position:fixed; inset:0; z-index:100000; background:#000; color:#fff;
display:grid; place-items:center; opacity:1 !important; visibility:visible;
/*transition:opacity 1s ease, visibility 1s ease; */ font-family:'Poppins',sans-serif;
}
body.overlay-open { overflow: hidden; }
.preloader { position: fixed; inset: 0; z-index: 9999; }
/* OLD SLIDESHOW CSS REMOVED HERE, REPLACED BELOW */
.preloader.is-hidden {
display: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
.rop-title-1{
margin-top: -40px;
margin-bottom: 10px;
}
.intro-overlay.is-hidden,
.title-overlay.is-hidden {
opacity: 0 !important;
visibility: hidden;
pointer-events: none;
}
.intro-center { display: flex; align-items: baseline; gap: .15em; }
.intro-count { font-weight: 800; font-size: clamp(48px, 10vw, 160px); line-height: 1; }
.intro-percent { font-weight: 700; font-size: clamp(24px, 5vw, 48px); opacity: .8; }
.typing-title {
font-weight: 800;
letter-spacing: .02em;
text-align: center;
line-height: 1.05;
font-size: clamp(32px, 6vw, 72px);
max-width: min(92vw, 1100px);
padding: 0 3vw;
white-space: pre-wrap;
}
.preloader.preloader-delay { display: none; }
.title-overlay{/*transition: opacity 1s ease, visibility 1s ease;*/ }
.app{ opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s; }
/* Keep your .preloader wrapper behavior */
.preloader { position: fixed; inset: 0; background:#181716; z-index: 9999 !important;
display:grid; place-items:center; overflow:hidden; transition:opacity .6s, visibility .6s; }
.preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
/* Skip button (keep yours) */
.pre-skip{ position: absolute;
bottom: 25px;
z-index: 10001; /* Boosted z-index to be sure it's above slider */
background: rgba(255, 255, 255, .2);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(5px);
border-radius: 999px;
padding: 8px 24px;
font-weight: 600;
cursor: pointer;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
transition: all 0.3s ease;
}
.pre-skip:hover { background: rgba(255,255,255,0.4); }
/* Holder to constrain height nicely */
.creative-preloader-shell { width:100%; height:100%; position:relative; }
/* =========================================
NEW FIXED GSAP SLIDER STYLES
========================================= */
#slideshow {
position: absolute; inset: 0; z-index: 1;
width: 100%; height: 100%; overflow: hidden; background: #000;
}
#slideshow .slide {
position: absolute; inset: 0;
opacity: 0;
overflow: hidden;
}
#slideshow .slide img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
will-change: clip-path, transform, z-index;
transform: scale(1.02);
}
#slideshow .slide .text {
position: absolute; left: 2rem; bottom: 2rem; color: #fff;
opacity: 0; z-index: 10; pointer-events: none;
font-family: 'Inter', sans-serif;
}
#slideshow .slide .text h2 {
font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; text-transform: uppercase;
margin: 0 0 0.5rem 0; line-height: 1;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#slideshow .slide .text p {
font-size: clamp(1rem, 1.5vw, 1.25rem); opacity: 0.8; margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
/* Initial States managed by CSS for stability */
#slideshow .slide img { clip-path: circle(0% at 50% 100%); }
#slideshow .slide:first-child { opacity: 1; z-index: 1; }
/* First slide starts fully revealed from bottom */
#slideshow .slide:first-child img { clip-path: circle(150% at 50% 100%); }
#slideshow .slide:first-child .text { opacity: 1; }
/* =========================================
END NEW SLIDER STYLES
========================================= */
:root {
--color-white: #fff;
--color-pampas: #f5f0eb;
--color-cod-gray: #181716;
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--font-f-big-caslon: "Big Caslon CC", serif;
--font-f-suisse: "Big Caslon CC", sans-serif;
height: 100%;
touch-action: pan-x pan-y;
--text-dark: #333;
--nav-bg-color: #2a2a2a;
}
@font-face {
font-family: 'Big Caslon CC';
src: url('./fonts/BigCaslonCC.woff2') format('woff2'),
url('./fonts/BigCaslonCC.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
*, :after, :before {
box-sizing: border-box;
}
* {
-webkit-tap-highlight-color: transparent;
}
ol, ul {
list-style: none;
padding: 0;
}
blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, input, li, ol, p, ul {
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
overscroll-behavior-y: auto;
overscroll-behavior-x: contain;
background-color: var(--color-pampas);
color: var(--text-dark);
font-family: var(--font-f-suisse);
}
body.detail-view-active {
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
/* Main Header & Nav Styles */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rem 2vw;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
top: 0;
z-index: 1000;
margin: auto;
width: 90%; border-radius: 20px; margin-top: 30px;
}
.page-header nav {
display: flex;
gap: 1.5rem;
font-size: 1.2rem;
}
.page-header a {
font-weight: 500;
}
.page-header .logo {
font-weight: bold;
font-size: 1.2rem;
text-align: center;
}
.page-header .logo img {
height: 100px;
width: auto;
object-fit: contain;
}
.main-header {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.category-selector-container {
position: relative;
min-width: 250px;
}
.category-selector {
position: relative;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.category-selector.is-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
#category-selector-button {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 8px;
border-radius: 50px;
background-color: var(--color-cod-gray);
color: var(--color-white);
font-family: var(--font-f-suisse);
font-size: 16px;
font-weight: 500;
border: none;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(24, 23, 22, 0.85);
}
.category-previews {
display: flex;
flex-shrink: 0;
}
#category-selector-label{
font-weight:bold;
}
.category-previews img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--color-cod-gray);
object-fit: cover;
background-color: var(--color-pampas);
}
.category-previews img:not(:first-child) {
margin-left: -12px;
}
.category-selector-chevron {
transition: transform 0.3s var(--ease-in-out-cubic);
flex-shrink: 0;
}
.category-menu {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 250px;
background: var(--color-white);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
z-index: -1;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
padding: 8px;
}
.category-menu a {
display: block;
padding: 10px 16px;
border-radius: 12px;
color: var(--color-cod-gray);
text-decoration: none;
font-weight: 500;
transition: background-color 0.2s, color 0.2s;
}
.category-menu a:hover {
background-color: var(--color-pampas);
}
.category-menu a.active {
background-color: var(--color-cod-gray);
color: var(--color-white);
}
.category-selector.is-open #category-selector-button .category-selector-chevron {
transform: rotate(180deg);
}
.category-selector.is-open .category-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
z-index: 10;
}
.app {
color: var(--color-cod-gray);
font-family: var(--font-f-suisse);
visibility: hidden;
opacity: 0;
transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.dot-icon{
display: inline-block;
width: 11px; height: 11px; background: orange; border-radius: 50%; position: relative;
top: -4px;
}
@media (max-width:600px) {
.app {
font-size: 3.7333vw;
line-height: 4.8vw
}
}
@media (min-width:601px) {
.app {
font-size: .9722vw;
line-height: 1.25vw
}
}
/* Preloader */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-cod-gray);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Gallery Sections */
.section {
position: relative;
padding-top: 60vh;
}
.section:first-of-type {
padding-top: 0;
}
.heading {
display: flex;
pointer-events: none;
position: sticky;
top: 80px;
height: 42vh;
z-index: 1;
justify-content: center;
align-items: center;
margin-bottom: -10vh;
flex-direction: column;
/* New: only current section heading visible */
opacity: 0;
visibility: hidden;
transform: translate3d(0, 14px, 0);
transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 520ms;
}
.heading.is-active {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
transition: opacity 420ms ease, transform 520ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}
/* Letterize-like text reveal (no external libs) */
.phx-letterize {
display: inline-block;
will-change: transform, opacity;
}
.phx-letterize .char {
display: inline-block;
transform: translate3d(0, 120%, 0);
opacity: 0;
filter: blur(8px);
transition-property: transform, opacity, filter;
transition-duration: 900ms;
transition-timing-function: cubic-bezier(.2,.8,.2,1);
transition-delay: calc(var(--i, 0) * 34ms);
}
.phx-letterize.is-revealed .char {
transform: translate3d(0, 0%, 0);
opacity: 1;
filter: blur(0px);
}
/* Slightly different feel depending on scroll direction */
.heading.phx-dir-up .phx-letterize .char {
transform: translate3d(0, -120%, 0);
}
.heading.phx-dir-up .phx-letterize.is-revealed .char {
transform: translate3d(0, 0%, 0);
}
.title {
font-family: var(--font-f-big-caslon);
font-style: normal;
font-weight: 400;
letter-spacing: -.03em;
line-height: normal;
white-space: nowrap;
}
.subtitle-heading {
font-family: var(--font-f-suisse);
font-size: 35px;
letter-spacing: 0;
margin-bottom: -10px;
line-height: 1;
margin-left: -238px;
}
@media (max-width:600px) {
.title {
font-size: 15vw
}
.subtitle-heading {
font-size: 3vw;
margin-bottom: 10px;
}
}
@media (min-width:601px) {
.title {
font-size: 8vw
}
}
.cases {
display: grid;
padding-bottom: 22vh;
position: relative;
z-index: 49;
width: calc(100% - 2.776vw);
margin: 0 auto;
}
@media (max-width:600px) {
.cases {
grid-template-columns: repeat(6, 1fr);
gap: 5.333vw
}
.is-one .case:nth-child(10n+1) {
grid-column: 4/6;
margin-top: 1.541vw;
}
.is-one .case:nth-child(10n+2) {
grid-column: 9/12;
margin-top: 9.722vw
}
.is-one .case:nth-child(10n+3) {
grid-column: 2/5;
margin-top: -5.763vw;
z-index: 2
}
.is-one .case:nth-child(10n+4) {
grid-column: 7/10;
margin-top: 18.958vw
}
.is-one .case:nth-child(10n+5) {
grid-column: 3/5;
margin-top: -2.777vw;
z-index: 2
}
.is-one .case:nth-child(10n+6) {
grid-column: 11/13;
margin-top: 15.416vw
}
.is-one .case:nth-child(10n+7) {
grid-column: 5/8;
margin-top: -7.708vw
}
.is-one .case:nth-child(10n+8) {
grid-column: 10/12;
margin-top: 21.527vw
}
.is-one .case:nth-child(10n+9) {
grid-column: 2/5;
margin-top: -5.694vw
}
.is-one .case:nth-child(10n+10) {
grid-column: 7/10;
margin-top: 18.708vw
}
}
@media (min-width:601px) {
.cases {
grid-template-columns: repeat(12, 1fr);
gap: 1.388vw
}
}
.case {
aspect-ratio: 335/447;
position: relative;
display: block;
overflow: hidden; /* Added */
isolation: isolate; /* Added */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.4s var(--ease-in-out-cubic), box-shadow 0.4s var(--ease-in-out-cubic);
cursor: pointer;
}
.case.hide-for-transition {
visibility: hidden;
}
.case img {
transition: transform 0.8s var(--ease-in-out-cubic);
width: 100%;
height: 100%;
object-fit: cover; /* ✅ fits entire image */
object-position: center;
display: block;
transition: transform 0.4s ease;
}
.case:hover {
z-index: 3;
transform: scale(1.05);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.case:hover img {
transform: scale(1.1);
transform-origin: center center;
}
.plus-icon {
position: absolute;
transform: translate(-50%, -50%) scale(0.5);
width: 60px;
height: 60px;
background-color: transparent;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 4;
opacity: 0;
transition: transform 0.3s var(--ease-in-out-cubic), opacity 0.4s ease-in-out;
pointer-events: none;
border: none_;
}
.case:hover .plus-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.plus-icon::before, .plus-icon::after {
content: '';
position: absolute;
}
.plus-icon::before {
width: 25px;
height: 26px;
background: url(../images/logo-con.png) no-repeat;
background-size: contain;
}
/* Grid Layout Rules - From snippet 1 */
@media (max-width:600px) {
.case {
margin-top: 20vw
}
.is-one .case:nth-child(6n+1), .is-three .case:nth-child(6n+1) {
grid-column: 4/7
}
.is-one .case:nth-child(6n+2), .is-three .case:nth-child(6n+2) {
grid-column: 1/4
}
.is-one .case:nth-child(6n+3), .is-three .case:nth-child(6n+3) {
grid-column: 3/7;
margin: 20vw -5.333vw 0 5.333vw
}
.is-one .case:nth-child(6n+4), .is-three .case:nth-child(6n+4) {
grid-column: 2/5
}
.is-one .case:nth-child(6n+5), .is-three .case:nth-child(6n+5) {
grid-column: 4/7
}
.is-one .case:nth-child(6n+6), .is-three .case:nth-child(6n+6) {
grid-column: 2/6
}
.is-four .case:nth-child(6n+1), .is-two .case:nth-child(6n+1) {
grid-column: 1/4
}
.is-four .case:nth-child(6n+2), .is-two .case:nth-child(6n+2) {
grid-column: 3/7
}
.is-four .case:nth-child(6n+3), .is-two .case:nth-child(6n+3) {
grid-column: 1/5
}
.is-four .case:nth-child(6n+4), .is-two .case:nth-child(6n+4) {
grid-column: 3/6
}
.is-four .case:nth-child(6n+5), .is-two .case:nth-child(6n+5) {
grid-column: 1/4
}
.is-four .case:nth-child(6n+6), .is-two .case:nth-child(6n+6) {
grid-column: 3/7
}
}
@media (min-width:601px) {
.is-one .case:nth-child(10n+1) {
grid-column: 4/6;
margin-top: 1.541vw;
}
.is-one .case:nth-child(10n+2) {
grid-column: 9/12;
margin-top: 9.722vw
}
.is-one .case:nth-child(10n+3) {
grid-column: 2/5;
margin-top: -5.763vw;
z-index: 2
}
.is-one .case:nth-child(10n+4) {
grid-column: 7/10;
margin-top: 18.958vw
}
.is-one .case:nth-child(10n+5) {
grid-column: 3/5;
margin-top: -2.777vw;
z-index: 2
}
.is-one .case:nth-child(10n+6) {
grid-column: 11/13;
margin-top: 15.416vw
}
.is-one .case:nth-child(10n+7) {
grid-column: 5/8;
margin-top: -7.708vw
}
.is-one .case:nth-child(10n+8) {
grid-column: 10/12;
margin-top: 21.527vw
}
.is-one .case:nth-child(10n+9) {
grid-column: 2/5;
margin-top: -5.694vw
}
.is-one .case:nth-child(10n+10) {
grid-column: 7/10;
margin-top: 18.708vw
}
}
@media (min-width:601px) {
.is-two .case:nth-child(10n+1) {
grid-column: 2/5;
margin-top: 13.888vw
}
.is-two .case:nth-child(10n+2) {
grid-column: 10/12;
margin-top: 7.777vw
}
.is-two .case:nth-child(10n+3) {
grid-column: 7/10;
margin-top: -4.861vw;
z-index: 2
}
.is-two .case:nth-child(10n+4) {
grid-column: 3/5;
margin-top: -5.694vw
}
.is-two .case:nth-child(10n+5) {
grid-column: 10/13;
margin-top: 17.916vw;
z-index: 2
}
.is-two .case:nth-child(10n+6) {
grid-column: 6/8;
margin-top: -17.847vw
}
.is-two .case:nth-child(10n+7) {
grid-column: 2/5;
margin-top: 6.180vw
}
.is-two .case:nth-child(10n+8) {
grid-column: 9/12;
margin-top: 20.902vw
}
.is-two .case:nth-child(10n+9) {
grid-column: 3/5;
margin-top: 4.930vw
}
.is-two .case:nth-child(10n+10) {
grid-column: 7/10;
margin-top: 17.708vw
}
}
/* Detail Page Styles */
.detail-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-pampas);
z-index: 2000;
padding: 8vh 0vw;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s var(--ease-in-out-cubic), visibility 0.6s;
}
.case-hover-title{
position: absolute;
left: -74px;
right: 21px;
bottom: -32px;
padding: 10px 12px;
border-radius: 12px;
/* background: rgb(0 0 0 / 17%); */
color: #005656;
font-size: 14px;
line-height: 1.2;
opacity: 0;
transform: translateY(10px);
transition: 0.22s ease;
pointer-events: none;
z-index: 3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 226px;
text-align: center;
}
.case:hover .case-hover-title{
opacity: 1;
transform: translateY(0);
}
.detail-page.active {
opacity: 1;
visibility: visible;
}
.detail-page-content-wrapper {
opacity: 0;
}
.detail-page.content-visible .detail-page-content-wrapper {
opacity: 1;
}
.detail-header {
display: flex;
justify-content: center;
margin-bottom: 3vh;
}
.detail-title {
font-family: "Cinzel", serif !important;
font-size: 4vw;
line-height: 1;
text-align: center;
letter-spacing: 0.5px;
}
.detail-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 5vh;
}
@media (max-width: 768px) {
.detail-title {
font-size: 12vw;
}
}
.detail-image {
/*-- width: 90%;
max-width: 90vw;
height: 65vh;
aspect-ratio: auto; /--*/
overflow: hidden;
}
.detail-image img {
width: 100%;
height: 248%;
object-fit: cover;
opacity: 0;
}
.detail-page.content-visible .detail-image img {
opacity: 1;
}
.detail-text {
max-width: 88%;
position: relative;
}
.detail-text p {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5em;
}
.detail-footer {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 2001;
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(24, 23, 22, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 50px;
padding: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.detail-project-nav {
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(255, 255, 255, 0.1);
padding: 4px 12px 4px 4px;
border-radius: 50px;
}
.detail-project-nav .nav-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: white;
cursor: pointer;
transition: background-color 0.2s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center; padding: 0;
}
.detail-project-nav .nav-arrow:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.detail-project-nav .nav-arrow:disabled {
opacity: 0.7;
cursor: not-allowed;
}
#detail-nav-thumb {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
#detail-nav-title {
color: white;
font-family: var(--font-f-suisse);
font-weight: 500;
padding: 0 8px;
white-space: nowrap;
}
#detail-close-button {
width: 48px;
height: 48px;
background-color: var(--color-pampas);
border-radius: 50%;
cursor: pointer;
position: relative;
transition: transform 0.3s;
flex-shrink: 0;
border: none;
}
#detail-close-button:hover {
transform: scale(1.1);
}
#detail-close-button::before, #detail-close-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background-color: var(--color-cod-gray);
}
#detail-close-button::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#detail-close-button::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.dyk-wrapper {
position: fixed;
top: 60%;
right: 0;
transform: translateY(-50%);
z-index: 9999;
}
.dyk-container {
position: relative;
width: 40px;
}
.dyk-button {
writing-mode: vertical-rl;
transform: rotate(180deg);
background: #f05a28 !important;
color: white !important;
font-weight: bold;
padding: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.dyk-button:hover {
background: #f05a28 !important;
color: white !important;
}
.dyk-hover {
position: absolute;
right: -340px;
top: 50%;
transform: translateY(-50%);
width: 320px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
padding-bottom: 15px;
opacity: 0;
pointer-events: none;
transition: right 0.4s ease, opacity 0.4s ease;
overflow: hidden;
padding: 0;
}
.dyk-container:hover .dyk-hover {
right: 60px;
opacity: 1;
pointer-events: auto;
}
.dyk-hover img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: none;
border-radius: 8px 8px 0 0;
line-height: 0;
}
.dyk-hover p {
padding: 0 15px;
margin-top: 10px;
font-size: 14px;
line-height: 1.4;
color: #333;
text-align: justify;
padding-bottom: 10px;
}
.dyk-hover p:first-of-type {
font-weight: bold;
color: #005656;
font-size: 20px;
text-align: center;
}
.image-transition-clone {
position: fixed;
z-index: 2002;
object-fit: cover;
transition: top 0.6s var(--ease-in-out-cubic),
left 0.6s var(--ease-in-out-cubic),
width 0.6s var(--ease-in-out-cubic),
height 0.6s var(--ease-in-out-cubic);
}
/*
* Connecting SVG line must overlay the cards and stay aligned while scrolling.
* Use fixed positioning (viewport space) so JS can use getBoundingClientRect()
* coordinates directly and the path will not be pushed outside the SVG.
*/
.connecting-line {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 40;
}
/* MODIFIED: Styles for the new dashed line effect */
#connecting-line-track {
fill: none;
stroke: rgb(220, 215, 211); /* Base dashed line color */
stroke-width: 1.5;
stroke-dasharray: 10 5; /* This creates the dashed effect */
}
#connecting-line-path {
fill: none;
stroke: #061f1f; /* This is the fill color that reveals on scroll */
stroke-width: 1.5;
stroke-dasharray: 10 5; /* This makes the filling animation dashed */
}
#mask-path {
fill: none;
stroke: white;
stroke-width: 30;
}
#arrow-marker {
fill: rgb(220, 215, 211);
opacity: 0;
transition: opacity 0.3s;
}
.connecting-line text {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 500;
fill: #B8B3AE;
text-transform: uppercase;
letter-spacing: 0.15em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.category-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
gap: 8px;
background-color: rgba(24, 23, 22, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 50px;
padding: 6px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.category-nav.is-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
}
.category-nav-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
transition: background-color 0.2s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.category-nav-arrow:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.category-nav-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.category-nav-title {
color: white;
font-family: var(--font-f-suisse);
font-weight: 500;
padding: 0 8px;
white-space: nowrap;
}
.category-nav-image {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
#category-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px; /* space between items */
padding: 16px 11px
border-radius: 999px;
max-width: 360px; /* tweak as you like */
box-sizing: border-box;
}
/* Prev / Next buttons */
#prev-category-button,
#next-category-button {
flex: 0 0 40px; /* fixed size so they never get squashed */
width: 37px;
height: 37px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: white;
cursor: pointer;
transition: background-color 0.2s;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
#category-nav-thumb{
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
display: block;
}
#category-nav-title {
flex: 1 1 auto; /* take remaining space between arrows */
text-align: center;
padding: 0 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* long titles won't push out right button */
}
/* Wrapper title style */
.title.section-title.title-scroll-reveal {
display: inline-block;
position: relative;
overflow: hidden;
white-space: nowrap; /* Optional – remove if you want wrapping */
}
/* Base state for each character */
.title.section-title.title-scroll-reveal .char {
display: inline-block;
opacity: 0;
transform: translateY(40%);
transition:
opacity 0.45s ease-out,
transform 0.45s ease-out;
transition-delay: calc(var(--char-index) * 0.04s);
}
/* If scrolling from top vs bottom – optional flavour */
.title.section-title.title-scroll-reveal.reveal-from-top .char {
transform: translateY(-40%);
}
/* Reveal state – plays per char because of delay */
.title.section-title.title-scroll-reveal.is-revealed .char {
opacity: 1;
transform: translateY(0);
}
.category-selector .category-nav .category-nav-title {
text-align: center;
flex-grow: 1;
padding: 0 16px;
}
.title-section-pleach {
width: 66%;
margin: auto;
margin-top: 0px;
text-align: center;
padding: 0px 115px 60px 115px;
border-radius: 55px;
background: url(images/karnataka-map.png) no-repeat -24px 26px;
background-size: 25%;
}
.title-text{
font-size: 45px;
padding: 6px 140px;
line-height: 48px;
}
.subtitle-text{
font-size: 23px; position: relative; display: inline-block; margin: 15px 0px;
}
.popup-over{
position: absolute;
font-family: sans-serif;
bottom: 0;
left: 60px;
right: 23px;
padding: 5px 7px;
z-index: -1;
font-size: 14px;
border-radius: 2px;
background: #fff;
visibility: hidden;
opacity: 0;
-o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition: all .5s
cubic-bezier(0.68, -0.55, 0.265, 1.55);
-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all .5s
cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: 51px;
margin-left: 53px;
width: 196px;
top: -7px;
height: 48px; border: 1px solid #ababab;
border-radius: 15px;
min-width: 196px;
max-width: 420px;
width: max-content;
padding: 10px 14px;
white-space: normal;
word-wrap: break-word;
}
.popup-over:before{
content:'';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position:absolute;
bottom:-5px;
left:40px;
}
.subtitle-text:hover .popup-over{
bottom:50px;
visibility:visible;
opacity:1;
}
.subtitle-text-context{
font-family: "Playfair Display", serif;
font-size: 24px;
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.01em;
color: #5F5F5F;
max-width: 980px;
margin: 120px auto 0;
padding: 0 60px;
text-align: center;
}
.inner-main-menu {text-align: center; padding-top: 40px; display: none;}
.inner-main-menu ul{
}
.inner-main-menu ul li{
list-style: none; display: inline-block; padding: 5px 14px;
}
.inner-main-menu ul li a{ font-weight: bold;}
/* Responsive Detail Page Text Columns */
.detail-content.two-column .detail-text {
/*display: flex;*/
gap: 0rem;
width: 100%;
max-width: 100%;
}
.detail-content.two-column .text-col-content {
flex: 1;
min-width: 0;
}
/* === HERO: reference-style slide-up + wipe === */
/* ===== RESPONSIVE STYLES ===== */
/* Tablet Styles */
@media (max-width: 1024px) {
.title-section-pleach {
padding: 35px 25px;
width: 96%;
}
.title-text {
font-size: 30px;
line-height: 1.2;
padding: 16px 80px;
}
.subtitle-text-context {
font-size: 16px;
line-height: 1.5;
}
.subtitle-heading {
margin-left: -150px;
}
.subtitle-text{
font-size: 19px;
}
.popup-over{
left: 48px;
max-width: 304px;
}
.inner-slider-main .phx-badami-slider[data-mode="inline"] {
height: 430px;
}
.inner-slider-main{padding-bottom: 15px;}
}
/* Mobile Styles */
@media (max-width: 767px) {
.page-header {
width: 95%;
margin-top: 30px;
padding: 0 3vw;
}
.page-header .logo img {
height: 80px;
}
.title-section-pleach {
padding: 10px 10px;
border-radius: 30px;
}
.title-text {
font-size: 28px;
padding: 10px 0;
}
.subtitle-text-context {
font-size: 16px;
}
.inner-main-menu ul {
padding: 0 10px;
}
.inner-main-menu ul li {
padding: 5px 10px;
}
.heading {
top: 60px;
}
.subtitle-heading {
font-size: 24px;
margin-left: 0;
text-align: center;
margin-bottom: -30px;
}
.title {
font-size: 18vw;
}
.detail-page {
padding: 10vh 5vw 12vh;
}
.detail-image {
height: auto;
}
.detail-content.two-column {
flex-direction: column;
}
.detail-content.two-column .detail-text {
flex-direction: column;
gap: 0;
}
.detail-footer {
width: calc(100% - 20px);
}
}
/* CIRCLE BTN 2 */
.circle-btn ul{
}
.circle-btn ul li{
width: 13px;
height: 13px;
border-radius: 50%;
border: 2px solid #f05a28;
display: inline-block;
margin-right: 5px;
}
.circle-btn ul li:hover{
background: #f05a28;;
}
.circle-btn.btn-2 .icon {
color: #233d4d;
}
.circle-btn.btn-2:hover .icon {
animation: arrowmove 0.75s ease-in-out;
animation-fill-mode: forwards;
}
.circle-btn.btn-2 .circle-bg::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 76px;
height: 76px;
border-radius: 100%;
background:#ffb281;
}
.circle-btn.btn-2 .circle-bg span {
position: absolute;
width: 50%;
height: 100%;
overflow: hidden;
}
.circle-btn.btn-2 .circle-bg span em {
position: absolute;
border-radius: 999px;
width: 100%;
height: 100%;
background: #136170;
transition: transform 0.25s linear;
}
.circle-btn.btn-2 .circle-bg span:first-child {
left: 0%;
}
.circle-btn.btn-2 .circle-bg span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
transform-origin: 0% 50%;
}
.circle-btn.btn-2 .circle-bg span:last-child {
left: 50%;
}
.circle-btn.btn-2 .circle-bg span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transform-origin: 100% 50%;
transition-delay: 0.25s;
}
.circle-btn.btn-2:hover .circle1 span:first-child em,
.circle-btn.btn-2:hover .circle-bg span:first-child em {
transform: rotate(-180deg);
transition: transform 0.5s ease-out;
transition-delay: 0.25s;
}
.circle-btn.btn-2:hover .circle1 span:last-child em,
.circle-btn.btn-2:hover .circle-bg span:last-child em {
transform: rotate(-180deg);
transition: transform 0.25s ease-in-out;
}
/* Base state for detail content */
.detail-page .detail-image,
.detail-page #project-text-container {
transition: transform 0.28s ease, opacity 0.28s ease;
transform: translateX(0);
opacity: 1; overflow:hidden;
}
/* Slide OUT to left (next) */
.detail-page.detail-slide-out.detail-slide-next .detail-image,
.detail-page.detail-slide-out.detail-slide-next #project-text-container {
transform: translateX(-40px);
opacity: 0;
}
/* Slide OUT to right (prev) */
.detail-page.detail-slide-out.detail-slide-prev .detail-image,
.detail-page.detail-slide-out.detail-slide-prev #project-text-container {
transform: translateX(40px);
opacity: 0;
}
/* Slide IN (both directions) */
.detail-page.detail-slide-in.detail-slide-next .detail-image,
.detail-page.detail-slide-in.detail-slide-next #project-text-container,
.detail-page.detail-slide-in.detail-slide-prev .detail-image,
.detail-page.detail-slide-in.detail-slide-prev #project-text-container {
transform: translateX(0);
opacity: 1;
}
@keyframes circleround {
0% {
transform: rotate(-90deg);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 0;
}
}
@keyframes arrowmove {
0% {
top: 2px;
}
100% {
top: -3px;
}
}
.circle-btn {
cursor: pointer;
display: block;
position: relative;
width: 200px;
height: 24px;
line-height: 30px;
overflow: hidden;
left: 45%;
margin-left: -40px;
top: -2px;
}
.icon {
position: absolute;
top: 0;
left: 0;
z-index: 2;
font-size: 30px;
width: 100%;
height: 100%;
color: #fe7f2d;
text-align: center;
line-height: 80px;
transition: color 0.2s ease-in;
}
@media (max-width: 559.98px) {
.popup-over{
top: -40px; left: -67px;
}
#slideshow .slide .text{
bottom: 10rem;;
}
.pre-skip{
bottom: 55px;
}
.detail-footer {
width: calc(74% - 20px);
}
}
.main-header{display:none !important;}
.phx-dot-nav{position:fixed;right:26px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:1100;pointer-events:auto}
.phx-dot-nav__item{position:relative;appearance:none;border:0;background:transparent;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:flex-end}
.phx-dot-nav__dot{ transition:transform .22s ease,background-color .22s ease, }
.phx-dot-nav__petal{
width:18px;
height:18px;
display:block;
opacity:.5;
transition:all .3s ease;
filter:grayscale(100%);
}
.phx-dot-nav__item:hover .phx-dot-nav__dot,.phx-dot-nav__item.is-active .phx-dot-nav__dot{ transform:scale(1.28); }
.phx-dot-nav__tooltip{position:absolute;right:35px;top:50%;transform:translateY(-50%) translateX(8px);background:#FF7931;color:#fff;padding:10px 14px;border-radius:999px;font-size:13px;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.phx-dot-nav__item:hover .phx-dot-nav__tooltip,.phx-dot-nav__item:focus-visible .phx-dot-nav__tooltip,.phx-dot-nav__item.is-active .phx-dot-nav__tooltip{opacity:1;transform:translateY(-50%) translateX(0)}
.phx-dot-nav__item:hover .phx-dot-nav__petal,
.phx-dot-nav__item.active .phx-dot-nav__petal,
.phx-dot-nav__item.is-visible .phx-dot-nav__petal{
opacity:1;
transform:scale(1.15);
filter:
brightness(0)
saturate(100%)
invert(67%)
sepia(86%)
saturate(2650%)
hue-rotate(334deg)
brightness(102%)
contrast(102%);
}
.phx-dot-nav__item:focus-visible{outline:none}
@media (max-width:991px){.phx-dot-nav{right:14px;gap:10px}.phx-dot-nav__tooltip{display:none}}
/* Coming Soon detail state */
.detail-content.is-coming-soon {
width: 100%;
min-height: 62vh;
display: flex !important;
align-items: center;
justify-content: center;
padding: clamp(24px, 4vw, 70px) 18px;
}
.detail-content.is-coming-soon .detail-image {
display: none !important;
}
.detail-content.is-coming-soon .detail-text {
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.phx-coming-soon {
position: relative;
isolation: isolate;
width: min(860px, 100%);
min-height: 430px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: clamp(34px, 6vw, 82px) clamp(22px, 5vw, 70px);
text-align: center;
color: #fff;
border: 1px solid rgba(255,255,255,.22);
border-radius: 34px;
background:
radial-gradient(circle at 18% 10%, rgba(255, 175, 94, .34), transparent 34%),
radial-gradient(circle at 86% 22%, rgba(255, 255, 255, .16), transparent 30%),
linear-gradient(135deg, #17110d 0%, #3b2415 48%, #0f0d0b 100%);
box-shadow: 0 34px 100px rgba(0,0,0,.34);
}
.phx-coming-soon::before {
content: "";
position: absolute;
inset: 18px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 26px;
pointer-events: none;
}
.phx-coming-soon-orbit {
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
top: -120px;
right: -80px;
border: 42px solid rgba(255, 121, 49, .20);
filter: blur(.2px);
z-index: -1;
}
.phx-coming-soon-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
margin-bottom: 22px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: #FFE7D2;
background: rgba(255, 121, 49, .18);
border: 1px solid rgba(255, 210, 170, .24);
}
.phx-coming-soon h3 {
margin: 0;
font-family: var(--font-f-big-caslon, Georgia, serif);
font-size: clamp(48px, 8vw, 106px);
line-height: .86;
letter-spacing: -.04em;
}
.phx-coming-soon-title {
margin-top: 20px;
font-size: clamp(20px, 3vw, 38px);
line-height: 1.15;
font-weight: 700;
color: #FFD9BA;
}
.phx-coming-soon p {
max-width: 560px;
margin: 18px auto 0;
font-size: clamp(15px, 1.7vw, 19px);
line-height: 1.65;
color: rgba(255,255,255,.78);
}
@media (max-width: 768px) {
.detail-content.is-coming-soon { min-height: 56vh; }
.phx-coming-soon { min-height: 360px; border-radius: 24px; }
.phx-coming-soon::before { inset: 12px; border-radius: 18px; }
}
/* Full details page Coming Soon state when no sections/cards are added */
.phx-coming-soon-page {
width: min(980px, calc(100% - 40px));
margin: 70px auto 90px;
min-height: 430px;
}
.phx-empty-state { width:min(980px, calc(100% - 40px)); margin:60px auto; }
/* =========================================================
Pleach Explore responsive + Coming Soon grid fixes
Added: 2026-06-02
- Keeps existing JS/functionality intact
- Prevents mobile/tablet horizontal scrolling
- Dot navigation starts from Chronicles section via JS .is-visible
- Shows Coming Soon on grid hover for checked coming-soon items
========================================================= */
html, body { max-width: 100%; overflow-x: hidden; }
.app, #main-content, .section, .cases { max-width: 100%; box-sizing: border-box; }
img, video, iframe { max-width: 100%; }
.phx-dot-nav { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateX(18px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.phx-dot-nav.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.case.is-coming-soon-card { overflow: hidden; }
.case.is-coming-soon-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: rgba(8, 7, 5, 0.38);
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
transition: opacity .28s ease, backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
pointer-events: none;
}
/* .case.is-coming-soon-card::after {
content: "Coming Soon";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(.92);
z-index: 5;
padding: 10px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: #17231a;
font-family: var(--font-f-suisse, Arial, sans-serif);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
opacity: 0;
white-space: nowrap;
box-shadow: 0 14px 34px rgba(0,0,0,.18);
transition: opacity .28s ease, transform .28s ease;
pointer-events: none;
} */
.case.is-coming-soon-card::after{
content:none !important;
display:none !important;
}
.case.is-coming-soon-card:hover::after{
content:none !important;
display:none !important;
}
.case.is-coming-soon-card:hover::before { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.case.is-coming-soon-card:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.case.is-coming-soon-card .plus-icon,
.case.is-coming-soon-card .case-hover-title {
display: none !important;
}
/* Tablet layout */
@media (max-width: 1024px) {
.inner-slider-main,
.phx-badami-slider,
.phx-slide { width: 100% !important; max-width: 100% !important; }
.section { padding-top: 34vh; overflow: hidden; }
.section:first-of-type { padding-top: 0vh; }
.heading { top: 0px; height: auto; min-height: 20vh; margin-bottom: -20vh; padding: 0 16px; }
.title { font-size: clamp(60px, 10vw, 131px) !important; max-width: 100%; white-space: normal; text-align: center; line-height: .9; }
.subtitle-heading { margin-left: 0 !important; margin-bottom: 8px !important; font-size: clamp(14px, 3.2vw, 28px) !important; text-align: center; }
.cases { width: calc(100% - 28px) !important;
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 5.333vw !important;
padding-bottom: 90px !important;}
.case { grid-column: span 4 !important; margin-top: 0 !important; }
.case:nth-child(odd) { transform: translateY(20px); }
.case:hover { transform: translateY(20px) scale(1.03); }
.case:nth-child(even):hover { transform: scale(1.03); }
.connecting-line { display: none !important; }
.is-one .case:nth-child(6n+1), .is-three .case:nth-child(6n+1) {
grid-column: 4 / 7 !important;
}
.case, .is-one .case, .is-two .case, .is-three .case, .is-four .case {
grid-column: auto !important;
margin-top: 25vw !important;
aspect-ratio: 180 / 220 !important;
transform: none !important;
}
.is-one .case:nth-child(6n+2), .is-three .case:nth-child(6n+2) {
grid-column: 1 / 4 !important;
}
.is-one .case:nth-child(6n+3), .is-three .case:nth-child(6n+3) {
grid-column: 3 / 7 !important;
margin: 17vw 0.667vw 0 19.333vw !important;
}
.is-one .case:nth-child(6n+4), .is-three .case:nth-child(6n+4) {
grid-column: 2 / 5 !important;
}
.is-one .case:nth-child(6n+5), .is-three .case:nth-child(6n+5) {
grid-column: 4 / 7 !important;
}
.is-one .case:nth-child(6n+5), .is-three .case:nth-child(6n+5) {
grid-column: 4 / 7 !important;
}
{
grid-column: 2 / 6 !important;
}
}
/* Mobile layout */
@media (max-width: 767px) {
body { width: 100%; }
.phx-dot-nav { right: 8px; gap: 8px; }
.phx-dot-nav__item { padding: 10px; }
.phx-dot-nav__dot { width: 14px;
height: 10px; }
.section { padding-top: 24vh; }
.section:first-of-type { padding-top: 28px; }
.heading { position: relative; top: auto; height: auto; min-height: auto; margin-bottom: 20px; opacity: 1; visibility: visible; transform: none; }
.heading:not(.is-active) { opacity: 1; visibility: visible; }
.title { font-size: clamp(46px, 18vw, 76px) !important; letter-spacing: -.04em; white-space: normal !important; overflow-wrap: anywhere; }
.subtitle-heading { font-size: 15px !important; line-height: 1.2; margin: 0 0 8px !important; }
.cases { width: calc(100% - 32px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; padding-bottom: 72px; }
.case, .is-one .case, .is-two .case, .is-three .case, .is-four .case { grid-column: auto !important; margin: 0 !important; aspect-ratio: 4 / 5; }
.case:nth-child(odd) { transform: none; }
.case:hover, .case:nth-child(even):hover, .case:nth-child(odd):hover { transform: scale(1.02); }
.plus-icon { display: none; }
.case-hover-title { display: none; }
.detail-page { padding: 90px 14px 100px !important; }
.detail-title { font-size: clamp(38px, 12vw, 64px) !important; padding: 0 8px; }
.detail-content, .detail-content.two-column, .detail-content.two-column .detail-text { width: 100%; max-width: 100%; }
.detail-image { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; }
.detail-footer { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; transform: none !important; }
.phx-coming-soon { min-height: 300px; padding: 36px 18px; }
.phx-coming-soon h3 { font-size: clamp(42px, 16vw, 70px); }
}
@media (max-width: 480px) {
.cases { width: calc(100% - 24px) !important; gap: 14px !important; }
.title { font-size: clamp(30px, 17vw, 40px) !important; }
.case.is-coming-soon-card::after { font-size: 11px; padding: 8px 12px; }
}
/* =========================================================
FINAL MOBILE/TABLET CHRONICLES LINE FIX
Keep the original staggered thumbnail composition on mobile
and keep the dashed connecting line visible.
========================================================= */
@media (max-width: 1024px) {
.connecting-line,
#connecting-line-svg {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
@media (max-width: 767px) {
.section {
overflow: visible !important;
}
.cases {
width: calc(100% - 28px) !important;
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 5.333vw !important;
padding-bottom: 90px !important;
}
.case,
.is-one .case,
.is-two .case,
.is-three .case,
.is-four .case {
grid-column: auto !important;
margin-top: 20vw !important;
aspect-ratio: 335 / 447 !important;
transform: none !important;
}
.is-one .case:nth-child(6n+1),
.is-three .case:nth-child(6n+1) {
grid-column: 4 / 7 !important;
}
.is-one .case:nth-child(6n+2),
.is-three .case:nth-child(6n+2) {
grid-column: 1 / 4 !important;
}
.is-one .case:nth-child(6n+3),
.is-three .case:nth-child(6n+3) {
grid-column: 3 / 7 !important;
margin: 20vw -5.333vw 0 5.333vw !important;
}
.is-one .case:nth-child(6n+4),
.is-three .case:nth-child(6n+4) {
grid-column: 2 / 5 !important;
}
.is-one .case:nth-child(6n+5),
.is-three .case:nth-child(6n+5) {
grid-column: 4 / 7 !important;
}
.is-one .case:nth-child(6n+6),
.is-three .case:nth-child(6n+6) {
grid-column: 2 / 6 !important;
}
.is-two .case:nth-child(6n+1),
.is-four .case:nth-child(6n+1) {
grid-column: 1 / 4 !important;
}
.is-two .case:nth-child(6n+2),
.is-four .case:nth-child(6n+2) {
grid-column: 3 / 7 !important;
}
.is-two .case:nth-child(6n+3),
.is-four .case:nth-child(6n+3) {
grid-column: 1 / 5 !important;
}
.is-two .case:nth-child(6n+4),
.is-four .case:nth-child(6n+4) {
grid-column: 3 / 6 !important;
}
.is-two .case:nth-child(6n+5),
.is-four .case:nth-child(6n+5) {
grid-column: 1 / 4 !important;
}
.is-two .case:nth-child(6n+6),
.is-four .case:nth-child(6n+6) {
grid-column: 3 / 7 !important;
}
.case:hover,
.case:nth-child(even):hover,
.case:nth-child(odd):hover {
transform: scale(1.025) !important;
}
.connecting-line {
z-index: 38 !important;
}
}
/* =========================================================
FINAL smooth scrolling overrides
========================================================= */
html {
scroll-behavior: smooth;
overflow-y: auto !important;
height: auto !important;
}
body:not(.detail-view-active) {
overflow-y: auto !important;
height: auto !important;
position: static !important;
}
body.detail-view-active .detail-page.active {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
body.detail-view-active:not(:has(.detail-page.active)) {
overflow-y: auto !important;
height: auto !important;
position: static !important;
}
.timeline-scroll-wrap,
.timeline-rail {
overscroll-behavior-x: contain;
overscroll-behavior-y: auto !important;
touch-action: pan-y pan-x !important;
}
/* =========================================================
Pleach Explore final wheel/touch scroll fix
Native page scrolling must not be blocked by plugin wrappers.
========================================================= */
html, body {
overflow-y: auto !important;
height: auto !important;
min-height: 100% !important;
position: static !important;
overscroll-behavior-y: auto !important;
touch-action: pan-y !important;
-webkit-overflow-scrolling: touch !important;
}
body:not(.detail-view-active) {
overflow-y: auto !important;
}
.app,
#main-content,
.phx-explorer-shell,
#explorer {
overflow: visible !important;
height: auto !important;
max-height: none !important;
touch-action: pan-y !important;
}
.phx-badami-slider,
.inner-slider-main {
touch-action: pan-y !important;
}
/* =========================================================
Requested non-destructive UI refinements
========================================================= */
/* Full-width landing/Introduction slider */
.inner-slider-main { width:100% !important; max-width:none !important; padding-left:0; padding-right:0; }
.inner-slider-main .phx-badami-slider[data-mode="inline"] { border-radius:0; width:100%; }
/* Introduction map/background safety */
#introduction, .title-section-pleach { /* background-size:cover !important; background-position:center !important; */}
#introduction img, .title-section-pleach img { max-width:100%; height:auto; }
/* Bottom hanging strip: content-sized on every viewport */
.detail-footer { width:max-content !important; max-width:calc(100vw - 24px) !important; min-width:0 !important; }
.detail-project-nav { width:auto !important; min-width:0 !important; max-width:100% !important; }
#detail-nav-title { white-space:normal; overflow-wrap:anywhere; }
@media (max-width:767px){
.detail-footer { left:50% !important; right:auto !important; transform:translateX(-50%) !important; padding:8px 10px !important; }
.detail-project-nav { display:inline-flex !important; width:auto !important; }
#detail-nav-title { max-width:min(48vw, 230px); font-size:12px; line-height:1.2; }
}
/* Readable template card labels and visible petal */
.case::after { content:""; position:absolute; inset:auto 0 0; height:48%; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); z-index:1; opacity:.8; }
.case .plus-icon { z-index:4; background:transparent; box-shadow:none; }
.case-hover-title { background:rgba(16,16,16,.78) !important; color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.65); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.case .plus-icon::after { opacity:1; }
.phx-dot-nav__petal { filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); opacity:.72; }
.phx-dot-nav__item:hover .phx-dot-nav__petal, .phx-dot-nav__item.is-active .phx-dot-nav__petal { opacity:1; transform:scale(1.12); }
/* Explore home controls remain four clear buttons */
.phx-grid-root .topbar--tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.phx-grid-root .topbar--tabs .tab { min-height:44px; border-radius:999px; }
@media(max-width:767px){ .phx-grid-root .topbar--tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* GTranslate/Google translator: transparent, no country flags */
.gtranslate_wrapper, .gt_switcher, .gt_float_switcher, .goog-te-gadget, .goog-te-combo { background:transparent !important; box-shadow:none !important; }
.gt_switcher img, .gt_float_switcher img, .gtranslate_wrapper img, .goog-te-gadget img, .glink img { display:none !important; }
/* Fix logo behind WordPress admin bar */
body.postid-5147 header.elementor-location-header{
position:absolute !important;
top:0 !important;
left:0 !important;
width:100%;
z-index:99999;
}
body.postid-5147 header.elementor-location-header .e-con{
position:absolute !important;
top:30px !important;
left:0 !important;
width:100%;
background:transparent !important;
}
/* body.postid-5147 #main-content .cases .case{ overflow:hidden; }
body.postid-5147 #main-content .cases .case img{
transform: scale(1.25); /* zoom in to push the white margin out of view */
} */
/* .case.is-coming-soon-card::after{
display:none !important;
content:none !important;
}
.case.is-coming-soon-card:hover::after{
display:none !important;
content:none !important;
} */
/* Hide old Coming Soon hover elements */
body.postid-5147 .case.is-coming-soon-card::after{
content:none !important;
display:none !important;
}
body.postid-5147 .case.is-coming-soon-card .plus-icon{
display:none !important;
}
body.postid-5147 .case.is-coming-soon-card .case-hover-title{
display:none !important;
}
/* New Coming Soon badge */
body.postid-5147 .case.is-coming-soon-card .card-coming-soon-badge{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:9999;
padding:12px 22px;
border-radius:999px;
background:#fff;
color:#17231a;
font-size:13px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
white-space:nowrap;
opacity:0;
visibility:hidden;
transition:opacity .3s ease;
pointer-events:none;
}
body.postid-5147 .case.is-coming-soon-card:hover .card-coming-soon-badge{
opacity:1;
visibility:visible;
}
body.postid-5147 .phx-slide-content{
width: 90vw !important;
max-width: 1400px !important;
}
body.postid-5147 .phx-slide-content .phx-anim-h{
max-width: 100%;
white-space: normal;
line-height: 0.9;
}
/* Move hero content slightly down - Hoysaleswara only */
body.postid-5147 .phx-badami-slider .phx-slide-content{
margin-top: 0 !important;
padding-top: 90px !important;
}
.detail-image{
position: relative;
display: inline-block;
overflow: visible !important;
}
.detail-image::before,
.detail-image::after{
content: "";
position: absolute;
width: 90px;
height: 90px;
pointer-events: none;
z-index: 10;
}
.detail-image::before{
top: -22px;
left: -22px;
border-top: 4px solid #005656;
border-left: 4px solid #005656;
}
.detail-image::after{
bottom: -22px;
right: -22px;
border-bottom: 4px solid #005656;
border-right: 4px solid #005656;
}
/* Image */
.detail-image-inner img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease;
transform:translate(0,0);
}
/* Move image slightly */
.detail-image:hover .detail-image-inner img{
transform:translate(-6px,-6px);
}
/* Decorative borders */
.detail-image::before,
.detail-image::after{
content:"";
position:absolute;
width:128px;
height:128px;
transition:transform .45s ease;
pointer-events:none;
}
.detail-image::before{
top:-14px;
left:-14px;
border-top:4px solid #94b6b5;
border-left:4px solid #94b6b5;
}
.detail-image::after{
bottom:-14px;
right:-14px;
border-bottom:4px solid #94b6b5;
border-right:4px solid #94b6b5;
}
/* Move borders away from image */
.detail-image:hover::before{
transform:translate(-8px,-8px);
}
.detail-image:hover::after{
transform:translate(8px,8px);
}
/* ==========================================
Detail Page Petal
Only for Detail Page
========================================== */
.detail-page .detail-image{
position:relative;
overflow:visible !important;
}
.detail-page .pleach-detail-petal{
position:absolute;
left:50%;
bottom:-32px;
transform:translateX(-50%);
width:68px;
height:68px;
background:#ffffff;
border:2px solid #ececec;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
z-index:50;
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.detail-page .pleach-detail-petal img{
width:28px;
height:auto;
display:block;
opacity:1;
filter:none;
animation:pleachPetalPulse 2.2s ease-in-out infinite;
}
@keyframes pleachPetalPulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.12);
}
100%{
transform:scale(1);
}
}
.detail-page{
background:#FAF9F6 !important;
}
/* Apply header overlay to all Hampi project detail pages */
body.single-hampi_project header.elementor-location-header{
position:absolute !important;
top:0 !important;
left:0 !important;
width:100%;
z-index:99999;
}
body.single-hampi_project header.elementor-location-header .e-con{
position:absolute !important;
top:30px !important;
left:0 !important;
width:100%;
background:transparent !important;
}
/* ==========================================
Detail Title + Period
========================================== */
.detail-title{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.detail-title-main{
display:block;
}
.detail-period{
display:block;
margin-top:16px;
font-family:"Cinzel", serif;
font-size:32px;
font-weight:500;
color:#6F9E9E;
letter-spacing:2px;
}
@media (max-width:768px){
.detail-period{
font-size:20px;
margin-top:12px;
}
}
.sub-title-year{
font-weight:300 !important;
}
.sub-title-year .kuvempu-name{
font-weight:700 !important;
}
/* Language selector */
.pleach-gt-btn{
background: transparent !important;
border: 1px solid rgba(255,255,255,.7) !important;
border-radius: 12px !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Remove flag */
.pleach-gt-btn-flag{
display: none !important;
}
/* Remove left space */
.pleach-gt-btn{
padding: 10px 18px !important;
gap: 8px !important;
}
/* Text */
.pleach-gt-btn-text{
color: #fff !important;
font-size: 16px !important;
font-weight: 500 !important;
}
/* Arrow */
.pleach-gt-btn-caret{
color: #fff !important;
}
/* =========================================================
SECTION HEADINGS - SMOOTH BIDIRECTIONAL SCROLL
========================================================= */
.phx-heading-fixed-copy {
position: fixed !important;
top: 80px !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 42vh !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
z-index: 50 !important;
pointer-events: none !important;
background: transparent !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translate3d(0, 12px, 0) !important;
will-change: opacity, transform;
transition:
opacity 450ms ease,
transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 450ms !important;
}
.phx-heading-fixed-copy.is-visible {
opacity: 1 !important;
visibility: visible !important;
transform: translate3d(0, 0, 0) !important;
transition:
opacity 450ms ease,
transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
visibility 0s linear 0s !important;
}
/*
* Keep the original heading in its real section position.
* It is hidden only while its fixed visual copy is active.
*/
.phx-original-heading-hidden {
visibility: hidden !important;
}
/*
* Prevent cloned heading animation classes from
* creating a second movement.
*/
.phx-heading-fixed-copy .phx-letter {
transform: none !important;
opacity: 1 !important;
}
/* Heading must be transparent so content can show through */
.phx-heading-fixed-copy {
background: transparent !important;
z-index: 5 !important;
pointer-events: none !important;
}
/* Section content stays in front of heading */
#main-content > .section .cases {
position: relative !important;
z-index: 20 !important;
}
/* Cards/images remain visible over the heading */
#main-content > .section .cases > li {
position: relative;
z-index: 20;
}
/* =========================================================
PLEACH WEATHER POPUP
========================================================= */
#phx-live-weather-popup {
position: fixed !important;
width: 300px !important;
box-sizing: border-box !important;
padding: 20px !important;
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(120, 95, 60, 0.25) !important;
border-radius: 8px !important;
box-shadow:
0 18px 50px rgba(0, 0, 0, 0.20) !important;
z-index: 2147483647 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform:
translate(-50%, -100%) translateY(10px) !important;
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0s linear 0.22s !important;
color: #181818 !important;
text-align: left !important;
}
#phx-live-weather-popup.is-visible {
opacity: 1 !important;
visibility: visible !important;
transform:
translate(-50%, -100%) translateY(0) !important;
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0s linear 0s !important;
}
#phx-live-weather-popup
.phx-weather-location {
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
}
#phx-live-weather-popup
.phx-weather-main {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
#phx-live-weather-popup
.phx-weather-icon {
width: 58px !important;
height: 58px !important;
object-fit: contain !important;
}
#phx-live-weather-popup
.phx-weather-temperature {
font-size: 38px !important;
line-height: 1 !important;
font-weight: 500 !important;
}
#phx-live-weather-popup
.phx-weather-description {
margin-top: 5px !important;
font-size: 14px !important;
text-transform: capitalize !important;
}
#phx-live-weather-popup
.phx-weather-details {
display: grid !important;
grid-template-columns:
repeat(3, 1fr) !important;
gap: 10px !important;
margin-top: 16px !important;
padding-top: 14px !important;
border-top:
1px solid rgba(120, 95, 60, 0.15) !important;
}
#phx-live-weather-popup
.phx-weather-detail {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
#phx-live-weather-popup
.phx-weather-detail span {
font-size: 10px !important;
opacity: 0.6 !important;
}
#phx-live-weather-popup
.phx-weather-detail strong {
font-size: 12px !important;
font-weight: 600 !important;
}
#phx-live-weather-popup
.phx-weather-source {
margin-top: 14px !important;
font-size: 9px !important;
text-align: right !important;
opacity: 0.5 !important;
}
/* =========================================================
KEEP SECTION PATH BEHIND CARDS / IMAGES
DO NOT CHANGE HEADING OR SCROLLING
========================================================= */
/* Path / SVG layer stays behind section content */
#main-content > .section > svg,
#main-content > .section > .path,
#main-content > .section > .phx-path,
#main-content > .section .phx-scroll-path {
position: absolute !important;
z-index: 1 !important;
pointer-events: none !important;
}
/* Section content stays above the path */
#main-content > .section .cases,
#main-content > .section .cases li,
#main-content > .section .case,
#main-content > .section .elementor-element {
position: relative;
z-index: 10 !important;
}
/* =========================================================
DOTTED PATH BEHIND IMAGES
========================================================= */
/* Keep the dotted path layer behind */
.phx-path,
.phx-dotted-path,
.dotted-path,
.path-line,
svg {
z-index: 1 !important;
}
/* Keep all section images above the path */
.elementor-widget-image,
.elementor-widget-image img,
.phx-slide,
.phx-slide img,
.elementor-element img {
position: relative;
z-index: 5 !important;
}
/* Make sure image/card containers create their own layer */
.elementor-widget-image,
.phx-slide {
isolation: isolate;
}