/* ===================================================================== csr.css — CSR page redesign (Phase 1 foundation) CSR-specific styles ONLY, extracted verbatim from the new static CSR page design (public/csr/assets/css/style.css lines 11431-12277 and public/csr/assets/css/responsive.css lines 524-603). Loaded ONLY on /csr via the @stack('styles') hook, so none of these rules reach any other page. The shared public/assets/css/style.css and responsive.css remain untouched. Depends on shared style.css for: font families (gen/gen-med/gen-bold/ gen-semi/read), generic .heading styles, buttons, .fade-effect animation classes, navbar/footer styles and Bootstrap. Those shared dependencies are NOT duplicated here. ===================================================================== */ /* CSR design tokens (defined in the CSR fork's :root, absent from the shared stylesheet). Scoped to this file — csr.css loads only on /csr. */ :root { --csr-head: #8D6100; --csr-main: #CAE5C6; } /* The static CSR page set a green page background inline on and on the site-wide .multi-adv block; the shared partials cannot carry inline styles, so scope them to the CSR page via the body data-page hook. */ body[data-page="csr"] { background-color: var(--csr-main); } body[data-page="csr"] .multi-adv { background-color: var(--csr-main) !important; } .banner-img { padding-bottom: 2rem; text-align: start; bottom: 15%; left: 05%; color: var(--light-color); width: auto; top: 15%; } .csr-banner-heading { padding: 2rem 1.5rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 30px; position: relative; z-index: 2; /* keeps the hero text above the drifting cloud (z-index: 1) */ } .hero-csr { background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; background-position: center center; background-size: cover; height: 100vh; /* fallback for older browsers */ /* height: 80svh; */ /* small-viewport units: no mobile URL-bar overflow, = 100vh on desktop */ /* min-height: 560px; */ /* guard for very short laptop windows */ position: relative; z-index: 1; } .hero-csr .csr-banner-heading h1 { font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; color: var(--light-color); overflow-wrap: break-word; /* split-text spans must never force horizontal clipping */ } .hero-csr .csr-banner-heading p { color: var(--light-color); overflow-wrap: break-word; } .hero-csr .csr-banner-heading { /* Required to make transforms work on text */ display: inline-block; /* Initial state (Normal size) */ transform: scale(1); /* SMOOTH REVERSE: This handles the zoom-out. - 0.5s is 'little fast' but still smooth. - cubic-bezier makes it feel more premium/pro. */ transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Good for performance */ will-change: transform; } .hero-csr .csr-banner-heading:hover { /* ZOOM IN: - 1.1 means 10% larger. - 1.05 is subtle, 1.2 is very large. */ transform: scale(1.1); } @media (max-width: 767.98px) { .hero-csr .csr-banner-heading h1 { font-size: clamp(1.5rem, 5.8vw, 2rem) !important; line-height: 1.3; } } .hero-csr::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(42, 123, 155, 0) 0%, rgba(87, 199, 133, 0) 66%, rgba(185, 225, 188, 1) 94%, rgba(202, 229, 198, 1) 100%); z-index: -1; } .honge-tree { padding: var(--space-xl-2xl) 0; position: relative; } .honge-tree .heading h2 { color: var(--csr-head); font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } .honge-tree::after { content: ''; position: absolute; right: 0; width: 450px; height: 275px; bottom: 0%; /* transform: translateY(-120px); */ background: url('../img/card/csr/right-side.png'); z-index: 2; background-repeat: no-repeat; background-size: contain; } .native-cards { padding: var(--space-s-m) 0; } /* .native-card-box{ padding: 2rem; box-shadow: rgba(255, 255, 255, 0.15) 1.95px 1.95px 2.6px; border-radius: 30px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } */ .native-card-box { position: relative; text-align: center; background: rgba(0, 0, 0, 0.0355); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); padding: 5rem 1rem; border-radius: 90px 0 90px 0; border: 1px solid transparent; /* reserved so the hover border causes no layout jump */ overflow: hidden; opacity: 0.8; transition: transform 0.7s; transform: scale(1); /* Good for performance */ will-change: transform; } .native-card-box:hover { opacity: 1; transform: scale(1.1); display: inline-block; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.15) 3.95px 3.95px 4.6px; } /* Premium emboss hover — same lift language as the legacy tabs */ /* @media (hover: hover) and (pointer: fine) { .native-card-box:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.65); box-shadow: 0 14px 28px rgba(43, 63, 39, 0.16), 0 4px 8px rgba(43, 63, 39, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); } } */ /* Left line + top-left curve */ .native-card-box::before { content: ""; position: absolute; top: 0px; bottom: 40px; left: 0px; width: 100px; border-left: 1.3px solid rgba(255, 255, 255, 0.45); border-top: 1.3px solid rgba(255, 255, 255, 0.45); border-radius: 90px 0 0 0; pointer-events: none; } /* Right line + bottom-right curve */ .native-card-box::after { content: ""; position: absolute; top: 20px; right: 0px; bottom: 0px; width: 90px; border-right: 1.3px solid rgba(255, 255, 255, 0.45); border-bottom: 1.3px solid rgba(255, 255, 255, 0.45); border-radius: 0 0 90px 0; pointer-events: none; } .native-card-box h3 { color: var(--csr-head); } .native-card-box img { padding-bottom: 1rem; } .legacy { position: relative; padding: clamp(8.5rem, 6vh, 4.5rem) 0; /* was var(--space-2xl-3xl) (up to 7.5rem) — viewport-aware so the section fits ~one desktop screen */ } .legacy::before { content: ''; position: absolute; left: 0; width: 247px; height: 150px; top: -2%; /* transform: translateY(-120px); */ background: url('../img/card/csr/left-side.png'); z-index: 2; background-repeat: no-repeat; background-size: contain; } .legacy .heading { color: var(--csr-head); padding-bottom: clamp(1.5rem, 3vh, 2.5rem); } /* Legacy section tab styling */ .legacy-tabs { margin-top: clamp(2rem, 4vw, 4rem); position: relative; z-index: 10; } .legacy-tabs .nav-pills { border: none; gap: 1.5rem; } .legacy-tabs .nav-link { font-family: 'read', serif; font-size: clamp(1.4rem, 2.5vw, 2.2rem); color: #4e624b; /* elegant dark forest green/olive that contrasts well */ background: none !important; border: 1px solid transparent; /* reserved so the hover border causes no layout jump */ border-radius: 16px; padding: 0.5rem 1.25rem; margin-left: -1.25rem; /* compensates hover padding — text position unchanged */ text-align: left; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; display: flex; align-items: center; position: relative; font-weight: 500; cursor: pointer; } /* Keyboard focus: the global button:focus reset must not leave tabs unfocusable */ .legacy-tabs .nav-link:focus-visible { outline: 2px solid var(--csr-head); outline-offset: 3px; } /* Premium emboss hover (pointer devices only — no sticky hover on touch) */ @media (hover: hover) and (pointer: fine) { .legacy-tabs .nav-link:hover { color: var(--csr-head); transform: translate(5px, -4px); background-color: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.65); box-shadow: 0 14px 28px rgba(43, 63, 39, 0.18), 0 4px 8px rgba(43, 63, 39, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85); } } .legacy-tabs .nav-link::before { content: '▶'; font-size: 0.75em; margin-right: 12px; color: var(--csr-head); opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; display: inline-block; } .legacy-tabs .nav-link.active { color: var(--csr-head) !important; font-weight: 600; } .legacy-tabs .nav-link.active::before { opacity: 1; transform: translateX(0); } /* Tab content and image wrapper */ .tab-image-wrapper { position: relative; overflow: hidden; } /* Slide transition (Five Experiences): while the cross-slide runs, the tab container acts as a clipping window so the outgoing and incoming images glide past each other without spilling over the tabs/text. */ .tab-content.is-sliding { position: relative; overflow: hidden; } .tab-image-wrapper img { display: block; width: 100%; height: auto; /*max-height: calc(100vh - 330px);*/ /* keeps the section within ~one desktop viewport on short screens */ object-fit: cover; object-position: center; border-radius: 0 18px 18px 0; transition: transform 0.5s ease; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } /* Overlay card inside tab pane */ .tab-overlay-card { position: absolute; bottom: -13px; left: 20px; right: -6px; background: #9C9D7E; /* translucent brown glassmorphism tint */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 20px solid var(--csr-main); border-radius: 16px; padding: 24px; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); z-index: 5; transition: all 0.3s ease; } .tab-overlay-card h4 { font-size: clamp(1.1rem, 2vw, 1.4rem) !important; margin-bottom: 8px; color: #fff; font-weight: 600; letter-spacing: -0.01em; } .tab-overlay-card p { font-family: 'gen', sans-serif; font-size: clamp(0.85rem, 1.5vw, 1rem); margin-bottom: 0; opacity: 0.9; font-weight: 400; } /* Responsive adjustment for vertical tabs on mobile */ @media (max-width: 767.98px) { .legacy-tabs .nav-pills { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; gap: 1rem; -webkit-overflow-scrolling: touch; justify-content: flex-start; border-bottom: 1px solid rgba(141, 97, 0, 0.15); margin-bottom: 20px; } .legacy-tabs .nav-link { font-size: 1.1rem; white-space: nowrap; padding: 0.5rem 1rem; margin-left: 0; /* reset desktop hover-compensation margin in the mobile pill row */ border-radius: 20px; border: 1px solid rgba(78, 98, 75, 0.25); } .legacy-tabs .nav-link::before { display: none; /* hide triangle bullet on mobile row view */ } .legacy-tabs .nav-link.active { background-color: var(--csr-head) !important; color: #fff !important; border-color: var(--csr-head); } .tab-image-wrapper { border-left-width: 6px; border-bottom-width: 6px; border-bottom-left-radius: 24px; } .tab-overlay-card { bottom: 10px; left: 0px; right: 10px; padding: 15px; position: relative; } } .nav-pills .nav-link { font-size: 1.3rem; font-family: 'read' !important; } .carry { padding: 0 0 var(--space-2xl-3xl) ; position: relative; } .carry::after { content: ''; position: absolute; right: 0; width: 247px; height: 180px; bottom: 80%; /* transform: translateY(-120px); */ background: url('../img/card/csr/right-side-three.png'); z-index: 2; background-repeat: no-repeat; background-size: contain; } .carry-card-box { position: relative; background: rgba(0, 0, 0, 0.015); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); padding: 1rem 1rem; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 20px; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; background: #CAE5C6; height: 100%; box-shadow: inset 4px 4px 8px 0 rgba(116, 150, 179, 0.32), inset -4px -4px 6px 0 #d6f7d2 } .carry-card-box:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(28, 117, 188, 0.12); cursor: pointer; } .carry-card-box img { width: 36%; } .carry-card-box p { text-align: start; padding-left: 5%; font-family: 'read' !important; line-height: 1.7rem; margin-bottom: 0 !important; font-size: 1.1rem !important; } .mtt-5 { margin-top: 2rem !important; } .carry .second-heading h2 { color: var(--csr-head); text-align: center; padding-bottom: 1rem; font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } .carry .heading h2 { color: var(--csr-head); font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } .carry .heading { padding-bottom: 1rem; } .legacy .heading h2 { font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } .gen-tree .heading h2 { color: var(--csr-head); font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } /* Custom Timeline Styles */ .csr-timeline-wrapper { position: relative; padding: 30px 0 40px; width: 100%; } /* Horizontal Line (Desktop) */ .timeline-line-wrapper { position: absolute; top: 50px; left: 15px; right: 15px; height: 2px; z-index: 1; } .timeline-line { width: 100%; height: 100%; background-color: #000000; } .timeline-line-wrapper::before, .timeline-line-wrapper::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: #000000; border-radius: 50%; top: 50%; transform: translateY(-50%); } .timeline-line-wrapper::before { left: 0; } .timeline-line-wrapper::after { right: 0; } /* Timeline Steps Row */ .timeline-steps-row { position: relative; z-index: 2; } /* Timeline Step Column */ .timeline-step { position: relative; padding-top: 50px; margin-bottom: 30px; } /* Triangle Marker (Desktop) */ .timeline-step .timeline-marker { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; } .timeline-step .timeline-marker img { display: block; width: 21px; height: 18px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Timeline Step Content Container */ .timeline-step .timeline-content { display: flex; align-items: center; gap: 15px; background: transparent; padding: 10px; transition: transform 0.3s ease; } .timeline-step:hover .timeline-content { transform: translateY(-5px); } .timeline-step:hover .timeline-marker img { transform: scale(1.3); } /* Icon Container */ .timeline-step .timeline-icon { flex-shrink: 0; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; } .timeline-step .timeline-icon img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; } .timeline-step:hover .timeline-icon img { transform: scale(1.1); } /* Text Container */ .timeline-step .timeline-text { flex-grow: 1; } .timeline-step .timeline-text h3 { font-family: 'read', serif; font-size: clamp(1.3rem, 2vw, 1.6rem) !important; color: var(--csr-head); margin-bottom: 5px; font-weight: normal; } .timeline-step .timeline-text p { font-family: 'gen', sans-serif; font-size: 14px; color: #192b1b; line-height: 1.45; margin-bottom: 0; } /* Responsive Styling (Mobile & Tablets) */ @media (max-width: 991.98px) { .csr-timeline-wrapper { padding: 20px 0 10px; } .timeline-step { padding-top: 0; padding-left: 55px; margin-bottom: 40px; } /* Vertical Line (Mobile) */ .timeline-vertical-line { position: absolute; left: 30px; top: 25px; bottom: 55px; width: 2px; background-color: #000000; z-index: 1; } /* Dots for Vertical Line */ .timeline-vertical-line::before, .timeline-vertical-line::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: #000000; border-radius: 50%; left: 50%; transform: translateX(-50%); } .timeline-vertical-line::before { top: 0; } .timeline-vertical-line::after { bottom: 0; } .timeline-step .timeline-marker { border-left: 10px solid #000000; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: none; top: 25px; left: 30px; transform: translateY(-50%); z-index: 3; } .timeline-step:hover .timeline-marker { transform: translateY(-50%) scale(1.3); } .timeline-step .timeline-content { padding: 0; } .timeline-step .timeline-icon { width: 50px; height: 50px; } } .plan-today { padding: 2rem 1.5rem; position: relative; background: rgba(0, 0, 0, 0.015); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 20px; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; animation: heartbeat 2.5s ease-in-out infinite both; } .plan-today .heading { padding-left: 3rem; } .plan-today .heading h2 { color: var(--csr-head); font-size: clamp(2rem, 4vw + 0.5rem, 2.4rem) !important; } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.995); transform: scale(0.995); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.97); transform: scale(0.97); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .cloud-move { position: absolute; bottom: 50%; left: 100px; cursor: pointer; /* z-index must stay ABOVE 0: the hero background is painted on the .hero-csr element itself, so z-index:-1 renders the cloud BEHIND that background and it disappears (looks like movement "stopped"). 1 = above the hero background, below the heading (z-index: 2). */ z-index: -1; /* Continuous drift — no hover needed. Alternate + infinite = the cloud floats back and forth on its own. */ animation: cloud-drift 12s ease-in-out infinite alternate; } @keyframes cloud-drift { from { transform: translate(0, 0); } to { /* translateX(-120px): drift left. translateY(-15px): gentle 'bob'. */ transform: translate(-120px, -15px); } } /* CSR responsive rules — extracted verbatim from public/csr/assets/css/responsive.css lines 524-603 (inside its 767px media query). */ @media (max-width: 767px) { .legacy { padding-bottom: 2rem; } .cloud-move { top: 0 !important; left: 0 !important; } /* ----- csr-new edits----- */ .hero-csr img { width: 55% !important; } .honge-tree::after { width: 200px !important; bottom: 50px; } .native-cards .col-md-3 { width: 50%; } .native-card-box { padding: 3rem 1rem; margin-bottom: 1rem; } .legacy::before { width: 150px; } .carry { padding-top: 1rem; } .carry::after { display: none; } .carry-card-box { display: block; margin-bottom: 1rem; text-align: center; height: 100%; } .mtt3 { margin-top: 2rem !important; } .carry-card-box img { width: 45%; } .carry-card-box p { font-size: 1.4rem !important; padding-top: 1rem; } .mob-carry-box .col-md-3 { width: 50%; } .carry .second-heading h2 { padding-top: 3rem; } .timeline-step .timeline-marker { display: none; } .timeline-vertical-line { display: none; } .timeline-line-wrapper { display: none; } } /* CSR menu icon: the original static CSR page rendered the hamburger icon black over the light hero (filter: brightness(0)), matching the shared header's per-page treatment of /about-us. The fade animation itself (fade-bottom-active, 1.2s) is applied to .fade-effect elements by the shared fade.js and already runs here. Scoped twice: this stylesheet only loads on the CSR page, and the body[data-page] selector pins it to CSR. */ body[data-page="csr"] .hamburger-btn img.fade-effect { filter: brightness(0); }