/* ========================================================= KAMALNAYAN GROUP — MASTER STYLESHEET 1. Variables 2. Reset 3. Typography 4. Header 5. Navigation 6. Hero 7. Components 8. Page-specific sections 9. Footer 10. WhatsApp 11. Animations 12. Responsive ========================================================= */ /* ---------- 1. VARIABLES ---------- */ :root{ --sky: #38BDF8; --sky-dark: #C9A227; --navy: #000080; --navy-2: #000080; --gold: #C9A227; --gold-soft: #E4C766; --bg-soft: #F4FAFE; --white: #FFFFFF; --text: #17324D; --text-muted: #64748B; --line: rgba(23,50,77,0.10); --line-strong: rgba(23,50,77,0.16); --shadow-sm: 0 2px 10px rgba(11,31,51,0.06); --shadow-md: 0 12px 32px rgba(11,31,51,0.10); --shadow-lg: 0 24px 60px rgba(11,31,51,0.16); --font-display: "Fraunces", "DM Sans", serif; --font-body: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif; --container: 1240px; --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --ease: cubic-bezier(.22,.61,.36,1); --header-h: 72px; --header-h-scrolled: 60px; --footer-h: 60px; } /* ---------- SINGLE-SCREEN SHELL (desktop) ---------- Desktop/laptop: the whole page fits one viewport, no page scroll. Mobile (<=768px): reverts to normal flow so content stays readable. */ @media (min-width: 769px){ html, body{ height: 100%; } body{ overflow: hidden; } .page-shell{ height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .page-shell > .site-header{ flex-shrink: 0; } .page-shell > main{ flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .page-shell > .site-footer{ flex-shrink: 0; } } @media (max-width: 768px){ .page-shell > main{ flex: none; } } /* ---------- 2. RESET ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; font-family: var(--font-body); color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul{ list-style: none; margin: 0; padding: 0; } button{ font-family: inherit; cursor: pointer; } input, textarea, select{ font-family: inherit; font-size: 1rem; } h1,h2,h3,h4,p,figure{ margin: 0; } :focus-visible{ outline: 2px solid var(--sky-dark); outline-offset: 3px; } ::selection{ background: var(--sky); color: var(--white); } .container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; } /* ---------- 3. TYPOGRAPHY ---------- */ h1, h2, h3{ font-family: var(--font-display); color: var(--navy); font-weight: 600; letter-spacing: -0.01em; } h1{ font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; font-weight: 600; } h2{ font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.14; } h3{ font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.3; font-family: var(--font-body); font-weight: 700; } p{ line-height: 1.75; color: var(--text); font-size: 17px; } .lead{ font-size: 1.2rem; line-height: 1.7; color: var(--text-muted); } .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky-dark); } .eyebrow::before{ content: ""; width: 28px; height: 1.5px; background: linear-gradient(90deg, var(--gold), var(--sky-dark)); } .section-label{ font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } /* ---------- BODY LOAD REVEAL ---------- Opacity-only: a transform on would create a containing block for descendant position:fixed elements (header, mobile menu, WhatsApp button), breaking their viewport-relative positioning. */ body{ opacity: 0; transition: opacity .6s var(--ease); } body.is-ready{ opacity: 1; } /* ---------- 4. HEADER ---------- */ .site-header{ position: sticky; top: 0; z-index: 1000; width: 100%; height: var(--header-h); display: flex; align-items: center; background: rgba(244,250,254,0.75); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .site-header.is-scrolled{ height: var(--header-h-scrolled); background: rgba(255,255,255,0.92); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } body.menu-open .site-header{ background: rgba(11,31,51,0.96); border-bottom-color: transparent; } body.menu-open .brand-text, body.menu-open .brand-text span{ color: var(--white); } body.menu-open .brand-text span{ color: var(--sky); } .header-inner{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; } .brand{ display: flex; align-items: center; gap: 10px; font-weight: 700; } .brand img{ height: 56px; width: auto; transition: height .35s var(--ease); } .site-header.is-scrolled .brand img{ height: 40px; } .brand-text{ font-family: var(--font-display); font-size: 1.02rem; color: var(--navy); letter-spacing: 0.02em; line-height: 1.05; } .brand-text span{ display: block; font-family: var(--font-body); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; color: var(--sky-dark); margin-top: 1px; } /* ---------- 5. NAVIGATION ---------- */ .main-nav{ display: flex; align-items: center; gap: 2px; } .main-nav a{ position: relative; display: inline-block; padding: 8px 12px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text); border-radius: var(--radius-s); transition: color .25s var(--ease), background .25s var(--ease); } .main-nav a::after{ content:""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: linear-gradient(90deg, var(--sky-dark), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .main-nav a:hover{ color: var(--sky-dark); } .main-nav a:hover::after{ transform: scaleX(1); } .main-nav a.active{ color: var(--navy); font-weight: 700; } .main-nav a.active::after{ transform: scaleX(1); } .nav-cta{ margin-left: 6px; padding: 8px 18px !important; background: var(--navy); color: var(--white) !important; border-radius: 999px; } .nav-cta::after{ display: none; } .nav-cta:hover{ background: var(--sky-dark); color: var(--white) !important; } .hamburger{ display: none; width: 44px; height: 44px; border: none; background: transparent; position: relative; z-index: 1100; } .hamburger span{ display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px auto; transition: transform .35s var(--ease), opacity .25s var(--ease); } .hamburger.is-open span{ background: var(--white); } .hamburger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2){ opacity: 0; } .hamburger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-menu{ position: fixed; inset: 0; z-index: 950; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); display: flex; flex-direction: column; justify-content: center; padding: 32px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s linear .5s; } .mobile-menu.is-open{ transform: translateY(0); opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s; } .mobile-menu nav{ display: flex; flex-direction: column; gap: 6px; } .mobile-menu a{ color: var(--white); font-family: var(--font-display); font-size: 1.7rem; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); } .mobile-menu a.active{ color: var(--sky); } .mobile-menu .mm-foot{ margin-top: 32px; color: rgba(255,255,255,0.55); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- 6. HERO (global page hero) ---------- */ .page-hero{ position: relative; padding: 130px 0 90px; overflow: hidden; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 100%); } .page-hero::before{ content: ""; position: absolute; top: -180px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.28), rgba(56,189,248,0) 70%); filter: blur(4px); pointer-events: none; } .page-hero .hero-lines{ position: absolute; inset: 0; pointer-events: none; opacity: 0.5; } .page-hero-content{ position: relative; z-index: 2; max-width: 780px; } .page-hero h1{ margin-top: 18px; } .page-hero .lead{ margin-top: 22px; max-width: 620px; } /* HOME hero (split) */ .home-hero{ position: relative; padding: 150px 0 100px; overflow: hidden; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--white) 92%); } .home-hero::before{ content:""; position: absolute; top: -220px; left: 50%; transform: translateX(-30%); width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,0.22), rgba(56,189,248,0) 65%); pointer-events: none; } .home-hero-grid{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } .home-hero h1{ margin-top: 20px; } .home-hero .lead{ margin-top: 24px; max-width: 560px; } .home-hero-visual{ position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; } .home-hero-visual img{ width: 100%; height: 100%; object-fit: cover; } .home-hero-visual .visual-badge{ position: absolute; bottom: 22px; left: 22px; background: rgba(11,31,51,0.72); backdrop-filter: blur(8px); color: var(--white); padding: 12px 18px; border-radius: var(--radius-m); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; gap: 12px; } .home-hero-visual .visual-badge img{ height: 30px; width: auto; } .home-hero-visual .visual-badge span{ font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); } /* signature horizon line */ .horizon-line{ width: 100%; height: 90px; margin: 10px 0 0; } .horizon-line path{ fill: none; stroke: url(#horizonGrad); stroke-width: 1.4; stroke-dasharray: 6 6; animation: dashflow 22s linear infinite; } @keyframes dashflow{ to{ stroke-dashoffset: -400; } } .horizon-labels{ display: flex; justify-content: space-between; margin-top: -6px; } .horizon-labels span{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } /* ---------- 7. COMPONENTS ---------- */ /* Buttons */ .btn{ position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px; border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); white-space: nowrap; } .btn .arrow{ transition: transform .3s var(--ease); } .btn:hover .arrow{ transform: translateX(4px); } .btn-primary{ background: #000080 !important; color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover{ background: var(--sky-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-outline{ background: transparent; color: var(--navy); border-color: var(--line-strong); } .btn-outline:hover{ border-color: var(--sky-dark); color: var(--sky-dark); transform: translateY(-2px); } .btn-gold{ background: linear-gradient(120deg, var(--gold), var(--gold-soft)); color: var(--navy); } .btn-gold:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-light{ background: rgba(255,255,255,0.12); color: var(--white); border-color: rgba(255,255,255,0.3); } .btn-light:hover{ background: rgba(255,255,255,0.2); transform: translateY(-2px); } /* Section wrapper */ .section{ padding: 110px 0; position: relative; } .section-tight{ padding: 80px 0; } .section-alt{ background: var(--bg-soft); } .section-navy{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: rgba(255,255,255,0.9); } .section-navy h2, .section-navy h3{ color: var(--white); } .section-navy p{ color: rgba(255,255,255,0.72); } .section-navy .eyebrow{ color: var(--sky); } .section-navy .eyebrow::before{ background: linear-gradient(90deg, var(--gold), var(--sky)); } .section-head{ max-width: 720px; margin-bottom: 56px; } .section-head h2{ margin-top: 16px; } .section-head.center{ margin-left: auto; margin-right: auto; text-align: center; } /* Editorial split */ .split{ display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split.reverse .split-media{ order: 2; } .split-media{ position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-md); } .split-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .split-media:hover img{ transform: scale(1.04); } .split-text p + p{ margin-top: 18px; } /* profile split (two images) */ .profile-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .profile-grid img{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-sm); } .profile-grid .tall{ grid-row: span 2; } /* Pull quote */ .pull-quote{ position: relative; padding: 40px 0 40px 32px; border-left: 3px solid var(--gold); margin: 48px 0; } .pull-quote p{ font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--navy); font-weight: 500; line-height: 1.5; } /* Cards */ .card-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .card-grid-4{ grid-template-columns: repeat(4, 1fr); } .card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 34px 30px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(56,189,248,0.35); } .card .num{ font-family: var(--font-display); font-size: 0.95rem; color: var(--gold); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 18px; display: block; } .card h3{ margin-bottom: 12px; } .card p{ font-size: 0.98rem; color: var(--text-muted); } .card-dark{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-l); padding: 34px 30px; transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); } .card-dark:hover{ transform: translateY(-6px); background: rgba(255,255,255,0.07); border-color: rgba(56,189,248,0.4); } .card-dark .num{ color: var(--sky); font-family: var(--font-display); font-weight: 600; display:block; margin-bottom: 16px; } .card-dark h3{ color: var(--white); margin-bottom: 10px; } .card-dark p{ color: rgba(255,255,255,0.68); font-size: 0.96rem; } /* Numbered vertical list */ .stack-list{ display: flex; flex-direction: column; } .stack-item{ display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 34px 0; border-top: 1px solid var(--line); } .stack-item:last-child{ border-bottom: 1px solid var(--line); } .stack-item .num{ font-family: var(--font-display); color: var(--gold); font-size: 1.3rem; font-weight: 600; } .stack-item h3{ margin-bottom: 10px; } .stack-item p{ color: var(--text-muted); } /* Ecosystem architecture stat band */ .stat-band{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border-radius: var(--radius-l); overflow: hidden; margin-top: 20px; } .stat-cell{ background: var(--navy-2); padding: 40px 30px; text-align: center; } .stat-cell .stat-num{ font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--gold-soft); font-weight: 600; line-height: 1; } .stat-cell .stat-label{ margin-top: 10px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); } /* Full width statement */ .statement{ padding: 100px 0; text-align: center; } .statement p{ font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--navy); line-height: 1.4; font-weight: 500; max-width: 900px; margin: 0 auto; } /* Divider */ .divider{ height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); margin: 0; } /* Bottom CTA pair (internal pages) */ .cta-pair{ padding: 90px 0; background: var(--bg-soft); border-top: 1px solid var(--line); } .cta-pair-inner{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; } .cta-pair h2{ max-width: 480px; } .cta-pair-actions{ display: flex; gap: 16px; flex-wrap: wrap; } /* Five dummy buttons (home) */ .dummy-btns{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .dummy-btn{ display: flex; flex-direction: column; gap: 14px; padding: 28px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); } .dummy-btn .db-num{ font-family: var(--font-display); color: var(--gold); font-weight: 600; font-size: 0.95rem; } .dummy-btn .db-label{ font-weight: 700; color: var(--navy); font-size: 0.98rem; display: flex; align-items: center; justify-content: space-between; } .dummy-btn:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--sky); background: linear-gradient(180deg, #fff, var(--bg-soft)); } .dummy-btn:hover .arrow{ transform: translateX(4px); } .dummy-btn .arrow{ transition: transform .3s var(--ease); color: var(--sky-dark); } /* Ecosystem flow (home, sky/horizon/connection) */ .flow-row{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .flow-node{ display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 90px; } .flow-dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--sky-dark); box-shadow: 0 0 0 6px rgba(56,189,248,0.14); } .flow-node span{ font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .flow-connector{ flex: 1; height: 1px; background: linear-gradient(90deg, var(--sky-dark), var(--gold)); min-width: 24px; margin: 0 -4px 26px; opacity: .5; } /* Contact page */ .contact-grid{ display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; } .info-item{ padding: 22px 0; border-top: 1px solid var(--line); } .info-item:last-child{ border-bottom: 1px solid var(--line); } .info-item .il{ font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .info-item .iv{ font-family: var(--font-display); font-size: 1.15rem; color: var(--navy); } .category-chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .chip{ padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.84rem; font-weight: 600; color: var(--text); background: var(--white); transition: all .25s var(--ease); } .chip input{ display: none; } .chip:hover{ border-color: var(--sky-dark); color: var(--sky-dark); } .chip.is-active{ background: var(--navy); color: var(--white); border-color: var(--navy); } .form-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 40px; box-shadow: var(--shadow-md); } .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field{ margin-bottom: 20px; } .field label{ display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .field input, .field textarea{ width: 100%; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--bg-soft); color: var(--text); transition: border-color .25s var(--ease), background .25s var(--ease); } .field input:focus, .field textarea:focus{ border-color: var(--sky-dark); background: var(--white); outline: none; } .field textarea{ resize: vertical; min-height: 130px; } .form-note{ font-size: 0.8rem; color: var(--text-muted); margin-top: 14px; } /* News page */ .news-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .news-card{ border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); display: flex; flex-direction: column; } .news-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); } .news-card-top{ padding: 30px 30px 0; } .news-meta{ display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } .news-cat{ font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-dark); } .news-date{ font-size: 0.78rem; color: var(--text-muted); } .news-card h3{ margin-bottom: 12px; } .news-card p{ color: var(--text-muted); font-size: 0.96rem; } .news-card-bottom{ padding: 22px 30px 30px; margin-top: auto; } .read-more{ font-size: 0.84rem; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; } .read-more .arrow{ transition: transform .3s var(--ease); } .news-card:hover .read-more .arrow{ transform: translateX(4px); } .news-tag-note{ font-size: 0.78rem; color: var(--text-muted); background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius-s); padding: 14px 18px; margin-bottom: 40px; } /* ---------- 9. FOOTER (compact single row) ---------- */ .site-footer{ background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%); color: rgba(255,255,255,0.7); padding: 9px 0; } .footer-row{ display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-brand-compact{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .footer-brand-compact img{ height: 36px; width: auto; } .footer-brand-compact span{ font-family: var(--font-display); font-size: 0.86rem; color: var(--white); white-space: nowrap; } .footer-desc-inline{ color: rgba(255,255,255,0.5); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .footer-links-inline{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-links-inline a{ font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.62); white-space: nowrap; transition: color .2s var(--ease); } .footer-links-inline a:hover{ color: var(--sky); } .footer-copy{ font-size: 0.7rem; color: rgba(255,255,255,0.42); white-space: nowrap; flex-shrink: 0; } /* ---------- 10. WHATSAPP ---------- */ .wa-float{ position: fixed; right: 20px; bottom: 45px; z-index: 800; width: 50px; height: 50px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(37,211,102,0.4); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .wa-float:hover{ transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 34px rgba(37,211,102,0.5); } .wa-float svg{ width: 28px; height: 28px; fill: var(--white); } .wa-tooltip{ position: absolute; right: 68px; top: 50%; transform: translateY(-50%) translateX(6px); background: var(--navy); color: var(--white); padding: 8px 14px; border-radius: var(--radius-s); font-size: 0.8rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .wa-float:hover .wa-tooltip{ opacity: 1; transform: translateY(-50%) translateX(0); } /* ---------- 11. ANIMATIONS ---------- */ .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{ opacity: 1; transform: translateY(0); } .reveal-delay-1{ transition-delay: .08s; } .reveal-delay-2{ transition-delay: .16s; } .reveal-delay-3{ transition-delay: .24s; } .reveal-delay-4{ transition-delay: .32s; } .reveal-delay-5{ transition-delay: .4s; } @keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } } .floaty{ animation: floatY 7s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- 13. SINGLE-SCREEN DESKTOP COMPOSITIONS ---------- Two parallel content blocks per page: a dense single-viewport grid for desktop/laptop (no page scroll), and the original readable stacked layout for mobile (<=768px, scrolls normally). */ .shell-mobile{ display: none; } @media (min-width: 769px){ .shell-desktop{ height: 100%; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .shell-container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; height: 100%; display: flex; flex-direction: column; min-height: 0; } } @media (max-width: 768px){ .shell-desktop{ display: block; } .shell-mobile{ display: none; } } /* Editorial multi-column body copy for dense desktop pages */ .editorial-copy { column-count: 1 !important; columns: 1 !important; column-width: auto !important; column-gap: 0 !important; display: block !important; width: 100% !important; } .editorial-copy-3{ column-count: 3; column-gap: 24px; } .editorial-copy p{ margin-bottom: 0.65em; font-size: inherit; line-height: inherit; } .editorial-copy p:last-child{ margin-bottom: 0; } /* Compact eyebrow / kicker for shell headers */ .shell-eyebrow{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky-dark); } .shell-eyebrow::before{ content:""; width: 20px; height: 1.5px; background: linear-gradient(90deg, var(--gold), var(--sky-dark)); } /* Compact stat band for shell layouts */ .shell-stats{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,0.14); border-radius: var(--radius-m); overflow: hidden; } .shell-stats .cell{ background: var(--navy-2); padding: 10px 12px; text-align: center; } .shell-stats .cell .n{ font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.9rem); color: var(--gold-soft); font-weight: 600; line-height: 1; } .shell-stats .cell .l{ margin-top: 3px; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .shell-stats.light .cell{ background: var(--bg-soft); } .shell-stats.light .cell .n{ color: var(--sky-dark); } .shell-stats.light .cell .l{ color: var(--text-muted); } /* Compact card grid for shell layouts */ .shell-cards{ display: grid; gap: 10px; } .shell-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .shell-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(56,189,248,0.35); } .shell-card .n{ font-family: var(--font-display); color: var(--gold); font-size: 0.72rem; font-weight: 600; } .shell-card h3{ font-size: 0.86rem; font-weight: 700; color: var(--navy); line-height: 1.25; } .shell-card p{ font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); margin: 0; } /* Compact CTA pair (bottom two buttons) for shell layouts */ .shell-cta-pair{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .shell-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .shell-btn .arrow{ transition: transform .2s var(--ease); font-size: 0.8em; } .shell-btn:hover .arrow{ transform: translateX(3px); } .shell-btn-primary{ background: var(--navy); color: var(--white); } .shell-btn-primary:hover{ background: var(--sky-dark); transform: translateY(-1px); } .shell-btn-outline{ background: transparent; color: var(--navy); border-color: var(--line-strong); } .shell-btn-outline:hover{ border-color: var(--sky-dark); color: var(--sky-dark); transform: translateY(-1px); } /* Compact image frame */ .shell-media{ position: relative; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-md); flex-shrink: 0; } .shell-media img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Thin divider used between shell blocks */ .shell-divider{ height: 1px; background: var(--line); flex-shrink: 0; } .shell-divider-light{ height: 1px; background: rgba(255,255,255,0.12); flex-shrink: 0; } /* Pull quote, compact */ .shell-quote{ border-left: 2px solid var(--gold); padding-left: 12px; font-family: var(--font-display); font-size: clamp(0.85rem, 1vw, 1.05rem); color: var(--navy); font-weight: 500; line-height: 1.4; } .shell-quote.on-dark{ color: var(--white); } /* ---------- HOME: single-screen composition ---------- */ @media (min-width: 769px){ .home-shell{ display: grid; grid-template-rows: minmax(0, 1.55fr) minmax(0, 0.85fr) auto; gap: clamp(10px, 1.6vh, 18px); height: 100%; min-hight: 0; padding: clamp(10px, 1.6vh, 18px) 0; min-height: 0; } .home-shell-hero{ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; min-height: 0; } .home-shell-hero h1{ font-size: clamp(1.7rem, 2.6vw, 2.5rem); margin-top: 8px; line-height: 1.08; } .home-shell-hero .lead{ margin-top: 12px; font-size: clamp(0.82rem, 0.95vw, 0.96rem); line-height: 1.55; color: var(--text-muted); max-width: 560px; } .home-shell-hero .hero-actions{ margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; } .home-shell-visual{ position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-lg); height: 100%; min-height: 0; } .home-shell-visual img{ width: 100%; height: 100%; object-fit: cover; } .home-shell-visual .badge{ position: absolute; left: 14px; bottom: 14px; background: rgba(11,31,51,0.72); backdrop-filter: blur(8px); color: var(--white); padding: 7px 12px; border-radius: var(--radius-s); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; gap: 8px; font-size: 0.66rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.88); } .home-shell-visual .badge img{ height: 18px; width: auto; } .home-shell-row2{ display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 2vw, 28px); min-height: 0; } .home-shell-panel{ min-height: 0; display: flex; flex-direction: column; } .home-shell-panel h2{ font-size: clamp(1rem, 1.3vw, 1.3rem); margin-top: 6px; line-height: 1.2; } .home-shell-panel .editorial-copy{ margin-top: 10px; font-size: clamp(0.68rem, 0.78vw, 0.78rem); line-height: 1.5; color: var(--text-muted); } .home-shell-panel .shell-quote{ margin-top: 10px; } .home-shell-vision{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); border-radius: var(--radius-l); padding: clamp(14px, 2vh, 22px) clamp(16px, 2vw, 24px); color: rgba(255,255,255,0.85); display: flex; flex-direction: column; min-height: 0; } .home-shell-vision .shell-eyebrow{ color: var(--sky); } .home-shell-vision .shell-eyebrow::before{ background: linear-gradient(90deg, var(--gold), var(--sky)); } .home-shell-vision h2{ color: var(--white); font-size: clamp(1rem, 1.3vw, 1.3rem); margin-top: 6px; line-height: 1.2; } .home-shell-vision p{ font-size: clamp(0.7rem, 0.8vw, 0.8rem); line-height: 1.5; color: rgba(255,255,255,0.68); margin-top: 8px; } .home-shell-vision .shell-stats{ margin-top: auto; padding-top: 12px; } .home-shell-buttons{ min-height: 0; position: relative; top: -25px; } .home-shell-buttons .hs-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 25px; } .home-shell-buttons .hs-label h2{ font-size: clamp(0.95rem, 1.2vw, 1.15rem); } .home-dummy-row{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .home-dummy-btn{ display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--white); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .home-dummy-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky); background: linear-gradient(180deg,#fff,var(--bg-soft)); } .home-dummy-btn .n{ font-family: var(--font-display); color: var(--gold); font-weight: 600; font-size: 0.72rem; } .home-dummy-btn .l{ font-weight: 700; color: var(--navy); font-size: 0.76rem; display: flex; align-items: center; justify-content: space-between; } .home-dummy-btn .arrow{ transition: transform .25s var(--ease); color: var(--sky-dark); font-size: 0.85em; } .home-dummy-btn:hover .arrow{ transform: translateX(3px); } } /* ---------- INTERNAL PAGES: single-screen profile/editorial shell ---------- */ @media (min-width: 769px){ .profile-shell{ display: grid; grid-template-columns: 230px 1fr; gap: clamp(18px, 2.4vw, 32px); height: 100%; padding: clamp(10px, 1.6vh, 18px) 0; min-height: 0; } .profile-shell-images{ display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; height: 100%; } .profile-shell-images img{ width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-sm); } .profile-shell-content{ display: flex; flex-direction: column; min-height: 0; height: 100%; } .profile-shell-title{ flex-shrink: 0; margin-bottom: 10px; } .profile-shell-title h1{ font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin-top: 4px; line-height: 1.05; } .profile-shell-title .role{ margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; } .profile-shell-body{ flex: 1 1 auto; min-height: 0; font-size: clamp(0.8rem, 1vw, 0.94rem); line-height: 1.46; color: var(--text); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; } .profile-shell-body .col{ min-width: 0; } .profile-shell-body p{ margin: 0 0 0.6em; font-size: inherit; line-height: inherit; } .profile-shell-body p:last-child{ margin-bottom: 0; } .profile-shell-body .shell-quote{ font-size: clamp(0.78rem, 0.9vw, 0.92rem); margin: 4px 0; break-inside: avoid-column; } .profile-shell-footer{ flex-shrink: 0; margin-top: 10px; } } /* Generic shell page title block used across internal pages */ @media (min-width: 769px){ .shell-page-title{ margin-bottom: 10px; } .shell-page-title h1{ font-size: clamp(1.5rem, 2.2vw, 2.1rem); margin-top: 4px; line-height: 1.05; } .shell-page-title .role{ margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; } } /* ---------- KAMALNAYAN page: image + description + capability grid ---------- */ @media (min-width: 769px){ .kn-shell{ display: grid; grid-template-columns: 230px 1fr; gap: clamp(18px, 2.4vw, 32px); height: 100%; padding: clamp(10px, 1.6vh, 18px) 0; min-height: 0; } .kn-shell-image{ height: 100%; min-height: 0; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-sm); } .kn-shell-image img{ width: 100%; height: 100%; object-fit: cover; } .kn-shell-content{ display: flex; flex-direction: column; min-height: 0; height: 100%; } .kn-fit{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: 20px; font-size: clamp(0.78rem, 0.95vw, 0.9rem); line-height: 1.46; color: var(--text); } .kn-fit p, .kn-fit h3{ font-size: inherit; line-height: inherit; } .kn-fit p{ margin: 0 0 0.6em; } .kn-fit-desc{ display: flex; flex-direction: column; justify-content: center; gap: 22px; min-height: 0; } .kn-fit-desc .shell-quote{ font-size: 1.1em; } .kn-fit-cards{ display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; min-height: 0; margin-right: 5px !important; } .kn-fit-cards .shell-card{ padding: 8px 10px; gap: 2px; justify-content: center; } .kn-fit-cards .shell-card .n{ font-size: 0.80em; } .kn-fit-cards .shell-card h3{ font-size: 1.01em; font-weight: 600; } .kn-fit-cards .shell-card p{ font-size: 0.9em; margin: 0; line-height: 1.3; color: var(--text-muted); } .kn-shell-bottom{ flex-shrink: 0; margin-top: 10px; display: flex; align-items: center; gap: 22px; } .kn-shell-bottom .shell-stats{ flex-shrink: 0; width: 320px; } .kn-shell-bottom p{ font-size: 0.74rem; line-height: 1.42; color: var(--text-muted); margin: 0; } .kn-shell-footer{ flex-shrink: 0; margin-top: 10px; } } /* ---------- UNIVERSE HOLDING page: image + intro + 2x2 approach grid ---------- */ @media (min-width: 769px){ .uh-fit{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 12px; font-size: clamp(0.78rem, 0.95vw, 0.9rem); line-height: 1.46; color: var(--text); } .uh-fit p, .uh-fit h3{ font-size: inherit; line-height: inherit; } .uh-fit > p{ margin: 0; color: var(--text-muted); } .uh-fit-cards{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, auto) minmax(0, auto); gap: 10px; min-height: 0; } .uh-fit-card{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-height: 0; } .uh-fit-card .num{ font-family: var(--font-display); color: var(--gold); font-size: 0.88em; font-weight: 600; } .uh-fit-card h3{ font-weight: 700; color: var(--navy); font-size: 1.05em; } .uh-fit-card p{ font-size: 0.9em; color: var(--text-muted); margin: 0; } } /* ---------- NSC CONSULTING page: practice matrix + 3-col copy ---------- */ @media (min-width: 769px){ .nsc-fit{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 14px; font-size: clamp(0.88rem, 0.95vw, 0.9rem); line-height: 1.46; color: var(--text); } .nsc-fit p, .nsc-fit h3{ font-size: inherit; line-height: inherit; } .nsc-matrix{ display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 16px; } .nsc-matrix-tile{ border: 1px solid var(--line); border-radius: var(--radius-s); padding: 20px 10px; display: flex; align-items: center; gap: 8px; background: var(--bg-soft); } .nsc-matrix-tile .num{ font-family: var(--font-display); color: var(--gold); font-size: 1em; font-weight: 600; flex-shrink: 0; } .nsc-matrix-tile h3{ font-size: 0.9em; font-weight: 700; color: var(--navy); line-height: 1.2; } .nsc-copy{ display: grid; grid-template-columns: 1fr; gap: 24px; min-height: 0; align-content: center; } .nsc-copy .col{ min-width: 0; } .nsc-copy p{ margin: 0 0 0.55em; } .nsc-copy p:last-child{ margin-bottom: 0; } .nsc-copy .shell-quote{ font-size: 1.05em; margin: 4px 0; } } /* ---------- NV ASSOCIATES page: intro + practice grid + side column ---------- */ @media (min-width: 769px){ .nva-fit{ flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 12px; font-size: clamp(0.78rem, 0.95vw, 0.9rem); line-height: 1.46; color: var(--text); } .nva-fit p, .nva-fit h3{ font-size: inherit; line-height: inherit; } .nva-fit > p{ margin: 0; color: var(--text-muted); } .nva-fit-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; min-height: 0; } .nva-practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto !important; column-gap: 10px !important; row-gap: 10px !important; align-content: start !important; min-height: 0; } .nva-practice-tile{ border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; height: 105px; } .nva-practice-tile .num{ font-family: var(--font-display); color: var(--gold); font-size: 0.85em; font-weight: 600; } .nva-practice-tile h3{ font-weight: 700; color: var(--navy); font-size: 1em; } .nva-practice-tile p{ font-size: 0.86em; color: var(--text-muted); margin: 0; } .nva-side{ display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; } .nva-side p{ margin: 0; } .nva-side .shell-quote{ font-size: 1.05em; } } /* ---------- CONTACT page: single-screen composition ---------- */ @media (min-width: 769px){ .contact-shell{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 3.5vw, 48px); height: 100%; padding: clamp(10px, 1.8vh, 20px) 0; min-height: 0; align-items: center; } .contact-shell-left{ display: flex; flex-direction: column; gap: 30px; min-height: 0; } .contact-shell-left h1{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-top: 10px; line-height: 1.08; } .contact-shell-left .lead{ font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); margin-top: 14px; max-width: 460px; } .contact-info-row{ display: flex; gap: 30px; flex-wrap: wrap; } .contact-info-row .info-item{ padding: 0; border: none; flex: 1 1 140px; } .contact-info-row .il{ font-size: 0.72rem; margin-bottom: 5px; } .contact-info-row .iv{ font-size: 1rem; } .contact-shell-left .category-chips{ margin-top: 8px; gap: 9px; } .contact-shell-left .chip{ padding: 8px 16px; font-size: 0.8rem; } .contact-shell-left .section-label{ font-size: 0.74rem; } .contact-form-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-md); } .contact-form-card .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .contact-form-card .field{ margin-bottom: 18px; } .contact-form-card .field label{ font-size: 0.72rem; margin-bottom: 6px; } .contact-form-card .field input, .contact-form-card .field textarea{ padding: 12px 15px; font-size: 0.92rem; } .contact-form-card .field textarea{ min-height: 78px; } .contact-form-card .btn{ padding: 14px 22px; font-size: 0.88rem; } .contact-form-card .form-note{ font-size: 0.72rem; margin-top: 10px; } } /* ---------- NEWS page: compact newsroom grid ---------- */ @media (min-width: 769px){ .news-shell{ display: flex; flex-direction: column; height: 100%; padding: clamp(10px, 1.8vh, 20px) 0; min-height: 0; justify-content: center; gap: clamp(16px, 2.4vh, 26px); } .news-shell-title h1{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 8px; } .news-shell-title .lead{ margin-top: 10px; font-size: 0.92rem; max-width: 560px; } .news-shell-note{ font-size: 0.76rem; color: var(--text-muted); background: var(--bg-soft); border: 1px dashed var(--line-strong); border-radius: var(--radius-s); padding: 10px 16px; display: inline-block; } .news-shell-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .news-shell-card{ border: 1px solid var(--line); border-radius: var(--radius-l); padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .news-shell-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); } .news-shell-card .meta{ display: flex; flex-direction: column; gap: 4px; } .news-shell-card .cat{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sky-dark); } .news-shell-card .date{ font-size: 0.7rem; color: var(--text-muted); } .news-shell-card h3{ font-size: 1rem; line-height: 1.28; color: var(--navy); font-weight: 700; } .news-shell-card p{ font-size: 0.82rem; line-height: 1.4; color: var(--text-muted); margin: 0; flex: 1; } .news-shell-card .read-more{ font-size: 0.78rem; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; } } @media (max-width: 1100px){ .card-grid{ grid-template-columns: repeat(2,1fr); } .card-grid-4{ grid-template-columns: repeat(2,1fr); } .dummy-btns{ grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px){ .main-nav{ display: none; } .hamburger{ display: block; } .split, .home-hero-grid, .contact-grid{ grid-template-columns: 1fr; } .split .split-media{ order: -1 !important; } .stat-band{ grid-template-columns: 1fr; } .news-grid{ grid-template-columns: 1fr; } } @media (max-width: 720px){ .container{ padding: 0 20px; } .header-inner{ padding: 0 20px; } .section{ padding: 70px 0; } .statement{ padding: 60px 0; } h1{ font-size: clamp(2.1rem, 8vw, 3rem); } .card-grid{ grid-template-columns: 1fr; } .card-grid-4{ grid-template-columns: 1fr; } .dummy-btns{ grid-template-columns: 1fr; } .form-row{ grid-template-columns: 1fr; } .cta-pair-inner{ flex-direction: column; align-items: flex-start; } .profile-grid{ grid-template-columns: 1fr; } .profile-grid .tall{ grid-row: auto; } .stack-item{ grid-template-columns: 1fr; gap: 10px; } .wa-float{ right: 16px; bottom: 16px; width: 48px; height: 48px; } .home-hero, .page-hero{ padding-top: 120px; } .horizon-labels{ flex-wrap: wrap; gap: 8px 14px; justify-content: flex-start; } .horizon-labels span{ font-size: 0.62rem; } .horizon-line{ height: 60px; } .footer-row{ flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; } .footer-links-inline{ gap: 10px 14px; } .editorial-copy, .editorial-copy-3{ column-count: 1 !important; } } /* ===================================================== MOBILE RESPONSIVE - DESKTOP CONTENT ===================================================== */ @media (max-width: 768px) { /* Desktop version visible */ .shell-desktop { display: block !important; width: 100%; } .shell-mobile { display: none !important; } /* Main desktop shell */ .shell-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; height: auto !important; min-height: 0 !important; } /* HERO */ .home-shell-hero { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-height: 0 !important; } /* Hero text */ .home-shell-hero > .reveal:first-child { order: 1 !important; width: 100% !important; padding: 32px 18px 24px !important; box-sizing: border-box; } /* Hero image */ .home-shell-hero > .reveal:last-child { order: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .home-shell-visual { width: 100% !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } .home-shell-visual img { width: 100% !important; height: auto !important; max-height: 280px !important; object-fit: contain !important; display: block !important; } /* Hero heading */ .home-shell-hero h1 { font-size: 2.15rem !important; line-height: 1.08 !important; margin: 8px 0 16px !important; } /* Hero paragraph */ .home-shell-hero p { font-size: 1rem !important; line-height: 1.65 !important; margin-bottom: 20px !important; } /* Hero buttons */ .hero-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .hero-actions a { max-width: 100% !important; box-sizing: border-box; } /* COLLECTIVE EXPERIENCE */ .home-shell-row { display: block !important; width: 100% !important; margin: 0 !important; padding: 28px 18px !important; box-sizing: border-box; } .home-shell-panel { width: 100% !important; padding: 0 !important; } .home-shell-panel h2 { font-size: 1.65rem !important; line-height: 1.2 !important; } .home-shell-panel p { font-size: 0.98rem !important; line-height: 1.55 !important; } /* FIVE COMPANY BUTTONS */ .home-shell-buttons { width: 100% !important; margin: 0 !important; padding: 0 18px 28px !important; box-sizing: border-box; } .home-dummy-row { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; } .home-dummy-btn { width: 100% !important; min-height: 48px !important; box-sizing: border-box !important; margin: 0 !important; } /* FOOTER */ .site-footer { width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } .footer-row { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 20px 18px !important; box-sizing: border-box !important; } .footer-links-inline { display: flex !important; flex-wrap: wrap !important; gap: 12px 18px !important; width: 100% !important; } .footer-links-inline a { white-space: normal !important; } } @media (max-width: 768px) { /* ============================== COLLECTIVE EXPERIENCE SPACING ============================== */ .home-shell-row { margin-top: 0 !important; padding: 30px 18px 20px !important; width: 100% !important; box-sizing: border-box !important; background: #ffffff !important; } /* ============================== 5 COMPANY BUTTONS ============================== */ .home-shell-buttons { width: 100% !important; padding: 10px 45px 30px !important; margin: 0 !important; box-sizing: border-box !important; } .home-dummy-row { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; width: 100% !important; } .home-dummy-row .home-dummy-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 0 15px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 8px !important; font-size: 0.95rem !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; transition: none !important; } /* ============================== DARK BUTTONS 1, 3, 5 ============================== */ .home-dummy-row .home-dummy-btn:nth-child(odd) { background: #0b1f33 !important; color: #ffffff !important; border: 1px solid #0b1f33 !important; } .home-dummy-row .home-dummy-btn:nth-child(odd) .n, .home-dummy-row .home-dummy-btn:nth-child(odd) .l, .home-dummy-row .home-dummy-btn:nth-child(odd) .arrow { color: #ffffff !important; } /* ============================== LIGHT BUTTONS 2, 4 ============================== */ .home-dummy-row .home-dummy-btn:nth-child(even) { background: #ffffff !important; color: #0b1f33 !important; border: 1px solid #0b1f33 !important; } .home-dummy-row .home-dummy-btn:nth-child(even) .n, .home-dummy-row .home-dummy-btn:nth-child(even) .l, .home-dummy-row .home-dummy-btn:nth-child(even) .arrow { color: #0b1f33 !important; } /* ============================== PREVENT OLD HOVER COLORS ============================== */ .home-dummy-row .home-dummy-btn:hover { transform: none !important; } .home-dummy-row .home-dummy-btn:nth-child(odd):hover { background: #0b1f33 !important; color: #ffffff !important; } .home-dummy-row .home-dummy-btn:nth-child(even):hover { background: #ffffff !important; color: #0b1f33 !important; } } @media (max-width: 768px) { /* HERO IMAGE */ .shell-mobile .home-hero-visual { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; overflow: visible !important; position: relative !important; } .shell-mobile .home-hero-visual img { display: block !important; width: 100% !important; height: auto !important; position: relative !important; } /* COLLECTIVE EXPERIENCE SECTION */ .shell-mobile .section-alt { position: relative !important; margin-top: 0 !important; padding-top: 35px !important; clear: both !important; background: #fff !important; z-index: 5 !important; } .shell-mobile .section-alt .section-head { position: relative !important; margin-top: 0 !important; padding-top: 0 !important; transform: none !important; } .shell-mobile .section-alt .section-label { position: relative !important; display: block !important; margin-top: 0 !important; } } @media (min-width: 769px) { .home-dummy-row > a.home-dummy-btn { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; position: relative !important; } .home-dummy-row > a.home-dummy-btn .n, .home-dummy-row > a.home-dummy-btn .l { display: inline !important; position: static !important; float: none !important; text-align: center !important; } .home-dummy-row > a.home-dummy-btn .l { margin-left: 6px !important; } } .kn-shell-image { width: 100% !important; height: 310px !important; overflow: hidden !important; align-self: start !important; border-radius: 10px !important; } .kn-shell-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; border-radius: 10px !important; } @media (min-width: 769px) { .kn-shell-image { width: 100% !important; overflow: visible !important; } .kn-shell-image img { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; object-position: center center !important; border-radius: 10px !important; } } @media (min-width: 769px) { /* NS CONSULTING - 40% IMAGE / 60% CONTENT */ .shell-desktop .kn-shell { grid-template-columns: 40fr 60fr !important; } .shell-desktop .kn-shell-image { width: 100% !important; height: auto !important; overflow: hidden !important; } .shell-desktop .kn-shell-image img { width: 100% !important; height: auto !important; object-fit: contain !important; object-position: center !important; display: block !important; } } /* ========================================================= UNIVERSAL RESPONSIVE SAFETY LAYER Applies to all pages ========================================================= */ /* 1. Prevent width/box calculation problems */ *, *::before, *::after { box-sizing: border-box; } html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; } /* 2. Make media responsive */ img, video, iframe { max-width: 100%; } img { height: auto; } /* 3. Prevent long text from breaking layouts */ h1, h2, h3, h4, h5, h6, p, a, span, div { overflow-wrap: break-word; } /* 4. Main containers */ .container, .shell-container, .shell-desktop, .shell-mobile, .home-shell { width: 100%; max-width: 100%; } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 1199px) { .shell-container, .shell-desktop, .home-shell { width: 100%; max-width: 100%; } /* Prevent grid overflow */ [class*="grid"] { min-width: 0; } [class*="fit"], [class*="row"] { min-width: 0; } /* Images */ img { max-width: 100%; height: auto; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { /* Convert multi-column layouts to safer 1 column */ .nva-fit, .nsc-fit, .home-shell-hero, .home-shell-row2 { grid-template-columns: 1fr !important; display: grid !important; } /* Practice/service grids */ .nva-practice-grid, .nsc-matrix, [class*="practice-grid"], [class*="matrix"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Side content */ .nva-side, .nsc-side, [class*="side"] { width: 100%; max-width: 100%; min-width: 0; } /* Prevent fixed dimensions from causing overlap */ [class*="fit"], [class*="row"], [class*="panel"], [class*="copy"] { min-width: 0; max-width: 100%; } } /* ========================================================= KAMALNAYAN - MOBILE RESPONSIVE FIX ========================================================= */ @media (max-width: 767px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; margin: 0 !important; padding: 0 !important; } *, *::before, *::after { box-sizing: border-box !important; } /* ---------- MAIN CONTAINERS ---------- */ .shell-container, .shell-desktop, .home-shell, .home-shell-hero, .home-shell-row2 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ---------- HERO: IMAGE + CONTENT ---------- */ .home-shell-hero { display: flex !important; flex-direction: column !important; gap: 25px !important; } .home-shell-hero > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ---------- HERO IMAGE ---------- */ .home-shell-visual { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } .home-shell-visual img { display: block !important; width: 75% !important; max-width: 75% !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; } /* ---------- ALL TEXT CONTENT ---------- */ .home-shell h1, .home-shell h2, .home-shell h3, .home-shell p { max-width: 100% !important; min-width: 0 !important; overflow-wrap: normal !important; word-break: normal !important; } /* Main heading */ .home-shell h1 { font-size: clamp(32px, 9vw, 48px) !important; line-height: 1.08 !important; white-space: normal !important; } /* ---------- PARAGRAPHS ---------- */ .home-shell p { width: 100% !important; max-width: 100% !important; font-size: 16px !important; line-height: 1.55 !important; } /* ---------- QUOTE ---------- */ .shell-quote { max-width: 100% !important; width: 100% !important; overflow-wrap: normal !important; } /* ---------- CARDS / CONSULTING BOXES ---------- */ [class*="tile"], [class*="card"], [class*="matrix"], [class*="practice"] { max-width: 100% !important; min-width: 0 !important; } /* Any grid should become one column */ .nsc-matrix, .nva-practice-grid, [class*="matrix"], [class*="practice-grid"] { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; gap: 12px !important; } /* ---------- BUTTONS ---------- */ .shell-btn, .shell-btn-primary, .shell-btn-outline { max-width: 100% !important; white-space: normal !important; } /* ---------- ALL IMAGES ---------- */ img { max-width: 100% !important; } /* ---------- PREVENT FLEX CHILD OVERFLOW ---------- */ .col, [class*="col"] { min-width: 0 !important; max-width: 100% !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .shell-container, .home-shell { padding-left: 16px !important; padding-right: 16px !important; } .home-shell h1 { font-size: 34px !important; line-height: 1.08 !important; } .home-shell p { font-size: 15px !important; } .home-shell-hero { gap: 20px !important; } } /* ========================================================= NV ASSOCIATES - RESPONSIVE FIX ONLY Does NOT change colours, fonts or visual design ========================================================= */ /* Main NV Associates layout */ .nv-fit { width: 100%; max-width: 100%; min-width: 0; } /* Main content columns */ .nv-fit .nv-main, .nv-fit .nv-grid, .nv-fit .nv-layout { width: 100%; max-width: 100%; min-width: 0; } /* Main image */ .nv-fit img { max-width: 100%; height: auto; } /* Text must never force the right side outside */ .nv-fit p, .nv-fit h1, .nv-fit h2, .nv-fit h3, .nv-fit h4 { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* Practice area cards */ .nv-fit .nv-fit-cards { width: 100%; max-width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Individual cards */ .nv-fit .shell-card { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } /* Card text */ .nv-fit .shell-card p, .nv-fit .shell-card h3 { max-width: 100%; min-width: 0; overflow-wrap: break-word; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .nv-fit { width: 100%; max-width: 100%; } .nv-fit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nv-fit .shell-card { padding: 16px !important; } } /* ========================================================= SMALL LAPTOP ========================================================= */ @media (max-width: 1000px) { .nv-fit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nv-fit .shell-card { padding: 14px !important; } .nv-fit .shell-card p { font-size: 13px; line-height: 1.45; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .nv-fit { width: 100%; } .nv-fit-cards { grid-template-columns: 1fr 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .nv-fit-cards { grid-template-columns: 1fr; } .nv-fit .shell-card { width: 100%; padding: 16px !important; } .nv-fit img { width: 100%; height: auto; } } /* NV ASSOCIATES - CONTENT OVERFLOW FIX ONLY */ @media (min-width: 769px) { body.nv-associates-page .nva-fit { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; } body.nv-associates-page .nva-fit-row { min-width: 0 !important; width: 100% !important; } body.nv-associates-page .nva-fit p, body.nv-associates-page .nva-fit h1, body.nv-associates-page .nva-fit h2, body.nv-associates-page .nva-fit h3, body.nv-associates-page .nva-fit h4 { max-width: 100% !important; overflow-wrap: break-word !important; } } /* NV ASSOCIATES - FIX NVA CONTENT STRUCTURE ONLY */ @media (min-width: 769px) { body.nv-associates-page .nva-fit { display: block !important; width: 100% !important; min-width: 0 !important; } body.nv-associates-page .nva-fit-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; width: 100% !important; min-width: 0 !important; } body.nv-associates-page .nva-practice-grid, body.nv-associates-page .nva-side { min-width: 0 !important; width: 100% !important; } } /* ========================================================= NV ASSOCIATES — FINAL LAYOUT FIX Scoped ONLY to NV Associates page ========================================================= */ .nv-associates-page .kn-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important; grid-template-rows: auto auto !important; column-gap: 10px !important; row-gap: 14px !important; align-items: start !important; } /* LEFT IMAGE */ .nv-associates-page .kn-shell-image { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: auto !important; overflow: hidden !important; } /* RIGHT CONTENT — move upward */ .nv-associates-page .kn-fit { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: start !important; margin-top: -4px !important; } /* BUTTONS — remove from image overlay */ .nv-associates-page .home-dummy-row { grid-column: 1 !important; grid-row: 2 !important; position: static !important; width: 100% !important; margin: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; transform: none !important; } /* Individual buttons */ .nv-associates-page .home-dummy-row .home-dummy-btn { position: static !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; transform: none !important; } /* Make sure image itself doesn't get pushed around */ .nv-associates-page .kn-shell-image img { display: block !important; width: 100% !important; height: auto !important; } /* ========================================================= NV ASSOCIATES — MOBILE ========================================================= */ @media (max-width: 768px) { .nv-associates-page .kn-shell { display: flex !important; flex-direction: column !important; gap: 14px !important; } .nv-associates-page .kn-shell-image { width: 100% !important; } .nv-associates-page .home-dummy-row { width: 100% !important; order: 2 !important; } .nv-associates-page .kn-fit { order: 3 !important; margin-top: 0 !important; width: 100% !important; } } .nv-associates-page .home-dummy-row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; width: 100% !important; } .nv-associates-page .home-dummy-row { margin-left: 0 !important; padding-left: 0 !important; box-sizing: border-box !important; width: 100% !important; } .nv-associates-page .home-dummy-row .home-dummy-btn:first-child { margin-left: 0 !important; } /* NS CONSULTING - BUTTONS BELOW IMAGE */ @media (min-width: 769px) { body.ns-consulting-page .kn-shell { display: grid !important; grid-template-columns: 1fr 1.5fr !important; gap: 24px !important; align-items: start !important; } body.ns-consulting-page .kn-shell-image { grid-column: 1 !important; grid-row: 1 !important; } body.ns-consulting-page .kn-shell-content { grid-column: 2 !important; grid-row: 1 / span 2 !important; } body.ns-consulting-page .home-dummy-row { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; margin: 20px 0 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } } /* FINAL KAMALNAYAN IMAGE SIZE FIX */ .home-shell-visual { width: 85% !important; max-width: 85% !important; justify-self: center !important; margin-left: auto !important; margin-right: auto !important; } .home-shell-visual img { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; }