/* ╔══════════════════════════════════════════════════════════╗ ║ SANDHRI ASSOCIATES — COMMON STYLESHEET ║ ║ Covers: CSS variables, reset, header, footer, ║ ║ typography, shared utility classes ║ ║ Import in every page's : ║ ║ ║ ╚══════════════════════════════════════════════════════════╝ */ /* ══════════════════════════════════════ RESET ══════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#ffffff; color:#1e293b; overflow-x:hidden; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* ══════════════════════════════════════ CSS VARIABLES (brand tokens) ══════════════════════════════════════ */ :root{ /* Blues */ --blue: #1a51a3; --blue-dark: #123a75; --blue-mid: #1a51a3; --blue-light: #3670c9; --blue-pale: #e8eef8; --blue-pale2: #f0f4fc; /* Accent */ --accent: #de2d26; /* Neutrals */ --white: #ffffff; --offwhite: #f8f9fc; --gray: #64748b; --gray-light:#f1f5f9; --border: #e2e8f0; --dark: #0f1729; --text: #1e293b; } /* ══════════════════════════════════════ TOP BAR ══════════════════════════════════════ */ .topbar{ background:var(--blue-dark); padding:9px 0; font-size:0.76rem; color:rgba(255,255,255,0.75); } .topbar-inner{ max-width:1280px;margin:0 auto;padding:0 48px; display:flex;justify-content:space-between;align-items:center;gap:16px; } .topbar a{color:rgba(255,255,255,0.75);text-decoration:none;transition:color 0.2s} .topbar a:hover{color:#fff} .topbar-left,.topbar-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .tb-dot{color:rgba(255,255,255,0.3)} /* ══════════════════════════════════════ NAVBAR ══════════════════════════════════════ */ nav{ background:var(--white); position:sticky;top:0;z-index:1000; box-shadow:0 1px 0 var(--border),0 4px 24px rgba(26,81,163,0.07); } .nav-inner{ max-width:1280px;margin:0 auto;padding:0 48px; display:flex;align-items:center;justify-content:space-between; height:76px;gap:24px; } .nav-logo img{height:54px;width:auto;display:block} .nav-links{display:flex;list-style:none;align-items:center;gap:4px} .nav-links a{ display:block;padding:8px 16px; text-decoration:none;color:var(--text); font-size:0.84rem;font-weight:600; letter-spacing:0.02em;border-radius:6px; transition:color 0.2s,background 0.2s; } .nav-links a:hover{color:var(--blue);background:var(--blue-pale)} .nav-links a.active{color:var(--blue)} .nav-cta{ background:var(--blue)!important;color:#fff!important; padding:10px 22px!important;border-radius:8px!important; font-weight:700!important;letter-spacing:0.03em!important; box-shadow:0 2px 8px rgba(26,81,163,0.25); transition:background 0.2s,transform 0.15s,box-shadow 0.2s!important; } .nav-cta:hover{ background:var(--blue-dark)!important;transform:translateY(-1px); box-shadow:0 4px 16px rgba(26,81,163,0.35)!important; } /* Nav active state: NOT applied to nav-cta */ .nav-links a.active:not(.nav-cta){color:var(--blue)} /* ── Hamburger ── */ .hamburger{ display:none;flex-direction:column;justify-content:center; gap:5px;cursor:pointer;background:none;border:none; padding:8px;border-radius:6px; } .hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Mobile Menu ── */ .mobile-menu{ display:none; background:var(--white);border-top:1px solid var(--border); padding:12px 24px 20px; } .mobile-menu.open{display:block} .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:2px} .mobile-menu ul a{ display:block;padding:12px 16px;text-decoration:none; color:var(--text);font-size:0.9rem;font-weight:600; border-radius:8px;letter-spacing:0.02em; transition:background 0.2s,color 0.2s; } .mobile-menu ul a:hover{background:var(--blue-pale);color:var(--blue)} .mobile-menu .m-cta{ background:var(--blue)!important;color:#fff!important; text-align:center;margin-top:8px;border-radius:8px!important; } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ footer{ background:var(--white); padding:72px 0 0; border-top:1px solid var(--border); } .foot-inner{max-width:1280px;margin:0 auto;padding:0 48px} .foot-top{ display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr; gap:60px;padding-bottom:52px;border-bottom:1px solid var(--border); } .foot-logo img{height:52px;width:auto;display:block;margin-bottom:20px} .foot-desc{color:var(--gray);font-size:0.87rem;line-height:1.72;margin-bottom:24px} .foot-social{display:flex;gap:8px} .soc{ width:38px;height:38px;border-radius:8px; border:1px solid var(--border); display:flex;align-items:center;justify-content:center; color:var(--gray);font-size:0.8rem;font-weight:700; text-decoration:none; transition:border-color 0.2s,color 0.2s,background 0.2s; } .soc:hover{border-color:var(--blue);color:#fff;background:var(--blue)} .foot-col h4{ font-family:'Barlow Condensed',sans-serif; font-size:1rem;font-weight:800;text-transform:uppercase; letter-spacing:0.1em;color:var(--dark);margin-bottom:20px; } .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .foot-col ul a{ text-decoration:none;color:var(--gray);font-size:0.86rem; display:flex;align-items:center;gap:6px;transition:color 0.2s; } .foot-col ul a:hover{color:var(--blue)} .foot-col ul a::before{content:'→';font-size:0.75rem;opacity:0.5} .ci{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px} .ci-icon{color:var(--blue);font-size:0.9rem;margin-top:2px;flex-shrink:0} .ci-text{color:var(--gray);font-size:0.85rem;line-height:1.6} .foot-bottom{ display:flex;justify-content:space-between;align-items:center; padding:22px 0;flex-wrap:wrap;gap:12px; } .foot-bottom p{color:var(--gray);font-size:0.78rem} .f-badge{ font-size:0.7rem;color:var(--blue); border:1px solid rgba(26,81,163,0.3); padding:4px 14px;border-radius:100px; letter-spacing:0.1em;text-transform:uppercase; font-weight:700;background:var(--blue-pale); } /* ══════════════════════════════════════ SHARED SECTION UTILITIES (used across home, about, contact, etc.) ══════════════════════════════════════ */ .sec{padding:88px 0} .container{max-width:1280px;margin:0 auto;padding:0 48px} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase; color:var(--blue);font-weight:700;margin-bottom:14px; } .eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--blue);border-radius:2px} .sec-title{ font-family:'Barlow Condensed',sans-serif; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:900;text-transform:uppercase; color:var(--dark);line-height:1.05;margin-bottom:16px; } .sec-title span{color:var(--blue)} .sec-sub{color:var(--gray);font-size:0.96rem;line-height:1.72;max-width:540px} /* ── Buttons ── */ .btn-blue{ background:var(--blue);color:#fff; padding:12px 28px;font-weight:700;font-size:0.87rem; letter-spacing:0.04em;text-transform:uppercase; text-decoration:none;border-radius:8px; box-shadow:0 4px 16px rgba(26,81,163,0.2); transition:background 0.2s,transform 0.15s; display:inline-block;border:none;cursor:pointer; font-family:'Inter',sans-serif; } .btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)} .btn-white{ background:#fff;color:var(--blue); padding:12px 28px;font-weight:700;font-size:0.87rem; letter-spacing:0.04em;text-transform:uppercase; text-decoration:none;border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); transition:transform 0.2s,box-shadow 0.2s;display:inline-block; } .btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.18)} .btn-ghost{ border:2px solid rgba(255,255,255,0.5);color:#fff; padding:12px 28px;font-weight:700;font-size:0.87rem; letter-spacing:0.04em;text-transform:uppercase; text-decoration:none;border-radius:8px; transition:background 0.2s,border-color 0.2s,transform 0.2s; display:inline-block;backdrop-filter:blur(4px); } .btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.8);transform:translateY(-2px)} /* ══════════════════════════════════════ RESPONSIVE — HEADER & FOOTER ══════════════════════════════════════ */ @media(max-width:1100px){ .topbar-inner,.nav-inner,.container,.foot-inner{padding:0 28px} .foot-top{grid-template-columns:1fr 1fr;gap:40px} footer{padding:56px 0 0} } @media(max-width:768px){ .topbar{display:none} .nav-links{display:none} .hamburger{display:flex} .sec{padding:64px 0} .foot-top{grid-template-columns:1fr 1fr;gap:36px 24px} .foot-top>div:first-child{grid-column:1/-1;text-align:center} .foot-top>div:first-child .foot-logo{display:flex;justify-content:center} .foot-logo img{height:60px} .foot-desc{max-width:420px;margin-left:auto;margin-right:auto} .foot-social{justify-content:center} .foot-top>div:nth-child(4){grid-column:1/-1} .soc:hover{border-color:var(--border);color:var(--gray);background:transparent} } @media(max-width:480px){ .topbar-inner,.nav-inner,.container,.foot-inner{padding:0 20px} }