block.
══════════════════════════════════════════ */
/* NAV logo image — adjust height to scale logo */
/* Recommended: 36px–42px for desktop nav */
.nav-logo-img {
height: 38px; /* ← nav height. Width scales automatically (logo is ~1.83:1) */
width: auto;
display: block;
flex-shrink: 0; /* prevents logo from shrinking inside flex nav-logo container */
min-width: 0; /* ensures flex doesn't collapse it */
max-width: 160px; /* prevents logo being too wide on large screens */
}
/* FOOTER logo image — white version via CSS filter */
/* Recommended: 28px–36px for footer */
.f-logo-img {
height: 32px; /* ← CHANGE THIS to resize footer logo */
width: auto;
display: block;
}
.nav-links { display:flex;gap:0;list-style:none; }
.nav-links li a { display:block;padding:0 1.2rem;height:72px;line-height:72px;font-family:'Inter';font-size:0.82rem;font-weight:500;color:var(--slate2);text-decoration:none;letter-spacing:0.2px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap; }
.nav-links li a:hover { color:var(--red);border-bottom-color:var(--red); }
.nav-links li a.active-link { color:var(--red);border-bottom-color:var(--red); }
.nav-cta { padding:10px 26px;background:var(--red);color:#fff;font-family:'Outfit';font-size:0.82rem;font-weight:600;text-decoration:none;letter-spacing:0.3px;transition:background .2s,transform .2s;border:none;cursor:pointer;clip-path:polygon(0 0,95% 0,100% 20%,100% 100%,5% 100%,0 80%); }
.nav-cta:hover { background:var(--red2);transform:translateY(-1px); }
.hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer; }
.hamburger span { width:22px;height:2px;background:var(--slate);transition:all .3s; }
.mobile-menu { position:fixed;inset:0;background:var(--white);z-index:450;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:0;pointer-events:none;transition:opacity .3s; }
.mobile-menu.open { opacity:1;pointer-events:all; }
.mobile-menu a { font-family:'Outfit';font-size:2.2rem;font-weight:700;color:var(--slate);text-decoration:none;transition:color .2s; }
.mobile-menu a:hover { color:var(--red); }
/* BREADCRUMB */
.breadcrumb-bar { background:var(--pearl);padding:1.2rem 5rem;border-bottom:1px solid var(--border); }
.breadcrumb-bar nav { position:static;box-shadow:none;border:none;padding:0;height:auto;background:transparent; }
.breadcrumb { font-family:'Inter';font-size:0.75rem;color:var(--slate-light);display:flex;align-items:center;gap:8px; }
.breadcrumb a { color:var(--slate-light);text-decoration:none; }
.breadcrumb .sep { color:var(--border); }
.breadcrumb .current { color:var(--red); }
/* SECTION BASE */
.section { padding:6rem 5rem; }
.section-inner { max-width:1360px;margin:0 auto; }
.section-eyebrow { display:flex;align-items:center;gap:10px;margin-bottom:0.8rem; }
.section-eyebrow::before { content:'';width:24px;height:2px;background:var(--red); }
.section-eyebrow span { font-family:'Inter';font-size:0.7rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--red); }
.section-title { font-family:'Outfit';font-weight:800;font-size:clamp(2rem,4vw,3.2rem);color:var(--slate);letter-spacing:-0.8px;line-height:1.1;margin-bottom:1rem; }
.section-title .muted { color:var(--slate-light);font-weight:300; }
.section-desc { font-size:1rem;color:var(--slate3);line-height:1.75;max-width:580px;font-weight:400; }
/* BUTTONS */
.btn-primary { padding:13px 34px;background:var(--red);color:#fff;font-family:'Outfit';font-size:0.9rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;letter-spacing:0.3px; }
.btn-primary:hover { background:var(--red2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(192,57,43,0.3); }
.btn-outline { padding:13px 34px;background:transparent;color:var(--slate);font-family:'Outfit';font-size:0.9rem;font-weight:600;text-decoration:none;border:1.5px solid var(--border);transition:border-color .2s,color .2s,transform .2s;cursor:pointer;letter-spacing:0.3px; }
.btn-outline:hover { border-color:var(--slate);color:var(--slate);transform:translateY(-2px); }
/* MARQUEE */
.marquee-band { background:var(--red);padding:13px 0;overflow:hidden; }
.marquee-track { display:flex;white-space:nowrap;animation:marquee 24s linear infinite; }
.marquee-track span { font-family:'Outfit';font-size:0.78rem;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.75);padding:0 3rem;border-right:1px solid rgba(255,255,255,0.2); }
.marquee-track span.accent { color:#fff;font-weight:700; }
@keyframes marquee { from{transform:translateX(0)}to{transform:translateX(-50%)} }
/* MODAL */
.modal-overlay { position:fixed;inset:0;background:rgba(44,51,64,0.6);backdrop-filter:blur(4px);z-index:700;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s; }
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal-box { background:var(--white);max-width:660px;width:90%;max-height:86vh;overflow-y:auto;border-top:3px solid var(--red);box-shadow:var(--shadow-lg);transform:translateY(16px);transition:transform .3s;position:relative; }
.modal-overlay.open .modal-box { transform:translateY(0); }
.modal-header { padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid var(--border2); }
.modal-chip { display:inline-block;padding:4px 12px;background:var(--red-pale);border:1px solid rgba(192,57,43,0.2);font-family:'Inter';font-size:0.62rem;font-weight:600;color:var(--red);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:0.8rem; }
.modal-box h2 { font-family:'Outfit';font-weight:800;font-size:1.6rem;color:var(--slate);letter-spacing:-0.5px; }
.modal-body { padding:2rem 2.5rem; }
/* ── Modal product image — fixed square, image fits inside without cropping ── */
.modal-img-wrap {
width: 100%;
height: 260px; /* fixed height — change to resize the image area */
background: linear-gradient(145deg, #F2EEE8 0%, #E8E2DA 100%);
border: 1px solid var(--border2);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
margin-bottom: 1.5rem;
position: relative;
}
.modal-img-wrap img {
width: 100%;
height: 100%;
object-fit: contain; /* fits whole image inside the box, no cropping */
object-position: center;
padding: 16px; /* breathing room around transparent-bg product images */
box-sizing: border-box;
display: block;
}
.modal-body p { font-size:0.92rem;color:var(--slate3);line-height:1.75;margin-bottom:1.5rem; }
.modal-specs-grid { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border2);margin-bottom:2rem; }
.modal-spec-cell { background:var(--pearl);padding:1rem 1.2rem; }
.modal-spec-cell .sk { font-family:'Inter';font-size:0.68rem;color:var(--slate-light);letter-spacing:1px;margin-bottom:3px;text-transform:uppercase; }
.modal-spec-cell .sv { font-family:'Outfit';font-weight:600;font-size:0.88rem;color:var(--slate); }
.modal-close { position:absolute;top:1.5rem;right:1.5rem;width:32px;height:32px;border:1.5px solid var(--border);background:transparent;cursor:pointer;color:var(--slate2);font-size:0.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s; }
.modal-close:hover { border-color:var(--red);color:var(--red); }
/* ════════════════════════════════════════════════════════
PAGE & SCROLL ANIMATION SYSTEM
════════════════════════════════════════════════════════
PAGE ENTRY — smooth wipe from solid color on every load
─────────────────────────────────────────────────────── */
/* Full-page entry wipe overlay */
.page-wipe {
position: fixed; inset: 0; z-index: 9000;
background: var(--slate);
transform-origin: top;
animation: wipeOut 0.75s cubic-bezier(0.76,0,0.24,1) 0.05s both;
pointer-events: none;
}
/* Red accent strip that leads the wipe */
.page-wipe::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--red);
}
@keyframes wipeOut {
0% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
/* ─────────────────────────────────────────────────────────
REVEAL CLASSES — add to any element to animate on scroll
The JS in shared.js watches for class="reveal [variant]"
─────────────────────────────────────────────────────── */
/* Base state — hidden before visible */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade {
opacity: 0;
will-change: transform, opacity;
}
/* Transition timing shared across all variants */
.reveal { transform: translateY(36px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.reveal-left { transform: translateX(-44px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.reveal-right { transform: translateX(44px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
.reveal-scale { transform: scale(0.93); transition: opacity 0.60s cubic-bezier(0.16,1,0.3,1), transform 0.60s cubic-bezier(0.16,1,0.3,1); }
.reveal-fade { transform: none; transition: opacity 0.70s ease; }
/* Visible state — all variants snap to natural position */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal-fade.visible {
opacity: 1;
transform: none;
}
/* Stagger delay helpers — add alongside reveal class */
/* e.g.
*/
.stagger-1 { transition-delay: 0.07s !important; }
.stagger-2 { transition-delay: 0.14s !important; }
.stagger-3 { transition-delay: 0.21s !important; }
.stagger-4 { transition-delay: 0.28s !important; }
.stagger-5 { transition-delay: 0.35s !important; }
.stagger-6 { transition-delay: 0.42s !important; }
/* ─────────────────────────────────────────────────────────
HERO ENTRANCE — elements that animate on first load
Uses CSS animation (not scroll), triggered by class
─────────────────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity:0; transform: translateY(22px); }
to { opacity:1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity:0; }
to { opacity:1; }
}
@keyframes slideInLeft {
from { opacity:0; transform: translateX(-30px); }
to { opacity:1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity:0; transform: translateX(30px); }
to { opacity:1; transform: translateX(0); }
}
@keyframes scaleIn {
from { opacity:0; transform: scale(0.94); }
to { opacity:1; transform: scale(1); }
}
/* ─────────────────────────────────────────────────────────
HOVER LIFT — add to any card/element for subtle lift
─────────────────────────────────────────────────────── */
.hover-lift { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* FOOTER */
footer { background:var(--slate);border-top:3px solid var(--red); }
.footer-main { max-width:1360px;margin:0 auto;padding:4rem 5rem 3rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:4rem; }
.footer-brand .f-logo { display:flex; align-items:center; gap:10px; margin-bottom:0.8rem; }
.footer-brand .f-logo-mark { width:36px;height:36px;background:var(--red);display:flex;align-items:center;justify-content:center; }
.footer-brand .f-logo-mark span { font-family:'Outfit';font-weight:800;font-size:0.95rem;color:#fff; }
.footer-brand .f-name { font-family:'Outfit'; font-weight:700; font-size:0.85rem; color:rgba(255,255,255,0.85); letter-spacing:-0.2px; }
.footer-brand p { font-size:0.85rem;color:rgba(255,255,255,0.45);line-height:1.7;max-width:240px;margin-top:0.5rem; }
.footer-col h5 { font-family:'Outfit';font-weight:700;font-size:0.75rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:1.2rem; }
.footer-col a { display:block;font-size:0.87rem;color:rgba(255,255,255,0.65);text-decoration:none;margin-bottom:0.6rem;transition:color .2s;font-family:'Inter'; }
.footer-col a:hover { color:#fff; }
.footer-col span { display:block;font-size:0.87rem;color:rgba(255,255,255,0.65);margin-bottom:0.6rem;font-family:'Inter'; }
.footer-bottom { max-width:1360px;margin:0 auto;padding:1.5rem 5rem;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem; }
.footer-bottom p { font-size:0.75rem;color:rgba(255,255,255,0.35);font-family:'Inter'; }
.make-india-badge { display:flex;align-items:center;gap:8px;font-family:'Inter';font-size:0.72rem;color:rgba(255,255,255,0.4); }
.make-india-badge strong { color:var(--red-light); }
/* RESPONSIVE */
@media(max-width:1100px) { .footer-main { grid-template-columns:1fr 1fr; } }
@media(max-width:900px) {
.section { padding:4rem 2rem; }
nav { padding:0 1.5rem; }
.topbar { padding:8px 1.5rem; }
.nav-links,.nav-cta { display:none; }
.hamburger { display:flex; }
.breadcrumb-bar { padding:1.2rem 1.5rem; }
}
@media(max-width:600px) {
/* Topbar: hide company name, keep contact links */
.topbar { padding:6px 1rem; }
.topbar-left { display:none; }
.topbar-right { gap:0.8rem; font-size:0.66rem; }
.topbar-right a { font-size:0.66rem; }
/* Section padding */
.section { padding:3rem 1.2rem; }
/* Footer */
.footer-main { grid-template-columns:1fr; padding:2.5rem 1.2rem; gap:2rem; }
.footer-bottom { padding:1.2rem; flex-direction:column; gap:0.6rem; text-align:center; }
.footer-bottom p { font-size:0.7rem; }
/* Marquee smaller on phone */
.marquee-track span { padding:0 1.8rem; font-size:0.7rem; }
}