/* ================================================================ header.css – Shivap Solutions | Shared Header + Footer Styles Import on every page: ================================================================ */ /* ── Google Font is loaded in each page's ── */ /* ── Tailwind is loaded from CDN on each page ── */ /* ───────────────────────────────────────── CSS Custom Properties (Brand tokens) ───────────────────────────────────────── */ :root { --ss-font: 'Poppins', sans-serif; --ss-blue-50: #eff6ff; --ss-blue-100: #dbeafe; --ss-blue-200: #bfdbfe; --ss-blue-400: #60a5fa; --ss-blue-500: #3b82f6; --ss-blue-600: #1d4ed8; --ss-blue-700: #1e40af; --ss-blue-800: #1e3a8a; --ss-blue-900: #172554; --ss-teal-50: #f0fdfa; --ss-teal-100: #ccfbf1; --ss-teal-500: #14b8a6; --ss-teal-600: #0d9488; --ss-orange-300: #fdba74; --ss-orange-500: #f97316; --ss-orange-600: #ea580c; --ss-slate-900: #0f172a; --ss-slate-800: #1e293b; --ss-slate-700: #334155; --ss-slate-400: #94a3b8; --ss-white: #ffffff; --ss-nav-h: 66px; --ss-topbar-h: 36px; --ss-shadow-nav: 0 1px 12px rgba(0,0,0,.07); --ss-transition: .22s ease; --ss-radius-lg: 14px; --ss-radius-xl: 18px; --ss-radius-pill: 50px; } /* ───────────────────────────────────────── Container helper ───────────────────────────────────────── */ .ss-container { max-width: 1220px; margin: 0 auto; padding: 0 20px; } /* ───────────────────────────────────────── TOP BAR ───────────────────────────────────────── */ .ss-topbar { background: var(--ss-blue-800); color: rgba(255,255,255,.75); font-size: 12px; font-family: var(--ss-font); height: var(--ss-topbar-h); display: flex; align-items: center; } .ss-topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ss-topbar-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .ss-topbar-left a, .ss-topbar-left span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--ss-transition); white-space: nowrap; } .ss-topbar-left a:hover { color: var(--ss-orange-300); } .ss-topbar-left i { color: var(--ss-orange-500); font-size: 11px; } .ss-topbar-right { display: flex; align-items: center; gap: 6px; } .ss-follow-label { color: rgba(255,255,255,.45); font-size: 11px; margin-right: 2px; } .ss-social { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); font-size: 10px; text-decoration: none; transition: background var(--ss-transition), color var(--ss-transition); } .ss-social:hover { background: var(--ss-orange-500); color: #fff; } /* Hide topbar on small screens */ @media (max-width: 767px) { .ss-topbar { display: none; } } /* ───────────────────────────────────────── MAIN NAVBAR ───────────────────────────────────────── */ .ss-navbar { position: sticky; top: 0; z-index: 999; background: rgba(255,255,255,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(0,0,0,.06); box-shadow: var(--ss-shadow-nav); font-family: var(--ss-font); transition: box-shadow .3s; } .ss-navbar.ss-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.1); } .ss-nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--ss-nav-h); gap: 16px; } /* Logo */ .ss-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; } .ss-logo-mark { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--ss-blue-600), var(--ss-teal-600)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ss-font); font-weight: 700; font-size: 15px; box-shadow: 0 4px 14px rgba(29,78,216,.3); transition: transform var(--ss-transition), box-shadow var(--ss-transition); } .ss-logo:hover .ss-logo-mark { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(29,78,216,.38); } .ss-logo-text { line-height: 1; } .ss-logo-name { display: block; font-size: 17px; font-weight: 800; color: #0f172a; letter-spacing: -.3px; } .ss-logo-name em { font-style: normal; color: var(--ss-blue-600); } .ss-logo-tag { display: block; font-size: 9.5px; font-weight: 500; color: var(--ss-slate-400); letter-spacing: 1.8px; text-transform: uppercase; margin-top: 2px; } /* Desktop nav links */ .ss-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .ss-nav-a { display: block; padding: 7px 12px; font-size: 13.5px; font-weight: 500; color: var(--ss-slate-700); text-decoration: none; border-radius: 9px; transition: color var(--ss-transition), background var(--ss-transition); white-space: nowrap; position: relative; } .ss-nav-a::after { content: ''; position: absolute; bottom: 3px; left: 12px; right: 12px; height: 2px; background: var(--ss-orange-500); border-radius: 2px; transform: scaleX(0); transition: transform .25s ease; } .ss-nav-a:hover, .ss-nav-a.ss-active { color: var(--ss-blue-600); background: var(--ss-blue-50); } .ss-nav-a.ss-active::after, .ss-nav-a:hover::after { transform: scaleX(1); } /* CTA button + hamburger wrapper */ .ss-nav-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .ss-btn-quote { display: inline-flex; align-items: center; gap: 7px; background: var(--ss-blue-600); color: #fff; font-family: var(--ss-font); font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 14px rgba(29,78,216,.3); transition: background var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition); white-space: nowrap; } .ss-btn-quote:hover { background: var(--ss-blue-700); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(29,78,216,.38); } .ss-btn-quote i { font-size: 11px; } /* Hamburger */ .ss-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; background: none; border: none; border-radius: 9px; cursor: pointer; padding: 6px; transition: background var(--ss-transition); } .ss-hamburger:hover { background: #f1f5f9; } .ss-hamburger span { display: block; height: 2px; width: 100%; background: var(--ss-slate-700); border-radius: 2px; transition: transform .3s, opacity .3s; transform-origin: center; } .ss-hamburger.ss-open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .ss-hamburger.ss-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .ss-hamburger.ss-open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); } /* Mobile menu */ .ss-mobile-menu { max-height: 0; overflow: hidden; transition: max-height .38s ease; border-top: 1px solid transparent; } .ss-mobile-menu.ss-open { max-height: 600px; border-top-color: rgba(0,0,0,.06); } .ss-mobile-menu .ss-container { padding-top: 12px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 2px; } .ss-mob-link { display: block; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--ss-slate-700); text-decoration: none; border-radius: 10px; transition: background var(--ss-transition), color var(--ss-transition); } .ss-mob-link:hover, .ss-mob-link.ss-active { background: var(--ss-blue-50); color: var(--ss-blue-600); } .ss-mob-quote { display: block; margin-top: 8px; padding: 11px 14px; background: var(--ss-blue-600); color: #fff; font-size: 14px; font-weight: 600; border-radius: 12px; text-align: center; text-decoration: none; transition: background var(--ss-transition); } .ss-mob-quote:hover { background: var(--ss-blue-700); } /* Responsive: show hamburger, hide desktop links */ @media (max-width: 1279px) { .ss-nav-links { display: none; } .ss-hamburger { display: flex; } .ss-btn-quote { padding: 9px 14px; font-size: 12px; } } @media (max-width: 479px) { .ss-btn-quote { display: none; } } /* ───────────────────────────────────────── SCROLL-TO-TOP BUTTON ───────────────────────────────────────── */ .ss-scroll-top { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 44px; height: 44px; background: var(--ss-blue-600); color: #fff; border: none; border-radius: 13px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(29,78,216,.35); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s, background .2s; } .ss-scroll-top:hover { background: var(--ss-blue-700); } .ss-scroll-top.ss-show { opacity: 1; pointer-events: all; transform: translateY(0); } /* ───────────────────────────────────────── SHARED FOOTER ───────────────────────────────────────── */ .ss-footer { background: #0f172a; color: #94a3b8; font-family: var(--ss-font); } .ss-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-top: 56px; padding-bottom: 12px; } .ss-footer-brand p { font-size: 13.5px; line-height: 1.7; max-width: 280px; margin: 14px 0 18px; } .ss-footer-socials { display: flex; gap: 8px; } .ss-footer-social { width: 34px; height: 34px; border-radius: 9px; background: #1e293b; color: #94a3b8; font-size: 12px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background var(--ss-transition), color var(--ss-transition); } .ss-footer-social.ln:hover { background: #0a66c2; color: #fff; } .ss-footer-social.tw:hover { background: #1da1f2; color: #fff; } .ss-footer-social.ig:hover { background: #e1306c; color: #fff; } .ss-footer-social.gh:hover { background: #374151; color: #fff; } .ss-footer-social.yt:hover { background: #ff0000; color: #fff; } .ss-footer-col h4 { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; } .ss-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ss-footer-links a { color: #94a3b8; font-size: 13.5px; text-decoration: none; transition: color var(--ss-transition), padding-left var(--ss-transition); display: inline-block; } .ss-footer-links a:hover { color: var(--ss-blue-400); padding-left: 5px; } .ss-footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 13px; font-size: 13.5px; } .ss-footer-contact-item i { color: var(--ss-blue-400); margin-top: 2px; font-size: 12px; width: 14px; } .ss-newsletter { margin-top: 16px; } .ss-newsletter h4 { margin-bottom: 10px; } .ss-newsletter-form { display: flex; gap: 7px; } .ss-newsletter-input { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; color: #cbd5e1; font-family: var(--ss-font); outline: none; transition: border-color var(--ss-transition); } .ss-newsletter-input::placeholder { color: #475569; } .ss-newsletter-input:focus { border-color: var(--ss-blue-500); } .ss-newsletter-btn { background: var(--ss-blue-600); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; font-family: var(--ss-font); cursor: pointer; white-space: nowrap; transition: background var(--ss-transition); } .ss-newsletter-btn:hover { background: var(--ss-blue-700); } .ss-footer-bottom { border-top: 1px solid #1e293b; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #475569; } .ss-footer-bottom a { color: var(--ss-blue-400); text-decoration: none; transition: color var(--ss-transition); } .ss-footer-bottom a:hover { color: #fff; } .ss-footer-bottom-links { display: flex; gap: 16px; flex-wrap: wrap; } .ss-footer-heart { color: #ef4444; } /* Footer responsive */ @media (max-width: 1023px) { .ss-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 639px) { .ss-footer-grid { grid-template-columns: 1fr; gap: 28px; } }