/* ==================================================== STALWART.AE — GLOBAL HEADER CSS File: css/header.css Link in every page AFTER style.css ==================================================== */ /* ── CSS Variables (Light Mode) ─────────────────────── */ :root { --sh-nav-bg: #fff; --sh-nav-shadow: 0 2px 24px rgba(0,32,91,0.09); --sh-nav-link: #1a2b50; --sh-nav-link-hover: #753BBD; --sh-nav-border: rgba(0,169,206,0.10); --sh-topbar-bg: linear-gradient(90deg, #00205B 0%, #753BBD 60%, #00A9CE 100%); --sh-topbar-text: rgba(255,255,255,0.85); --sh-dropdown-bg: #fff; --sh-dropdown-shadow: 0 16px 48px rgba(0,32,91,0.14); --sh-dropdown-border: rgba(0,169,206,0.12); --sh-mobile-bg: #fff; --sh-logo-filter: none; --sh-toggle-bg: rgba(0,169,206,0.08); --sh-toggle-border: rgba(0,169,206,0.20); --sh-toggle-icon: #00A9CE; --sh-lang-bg: rgba(0,32,91,0.05); --sh-lang-border: rgba(0,32,91,0.10); --sh-lang-text: #1a2b50; --sh-progress-bg: linear-gradient(90deg, #00205B, #753BBD, #00A9CE); --sh-brand-grad: linear-gradient(135deg, #753BBD 0%, #00A9CE 100%); --sh-transition: all 0.28s cubic-bezier(0.25,0.8,0.25,1); } /* ── Dark Mode Variables ─────────────────────────────── */ html.sw-dark { --sh-nav-bg: #0d1b3e; --sh-nav-shadow: 0 2px 24px rgba(0,0,0,0.35); --sh-nav-link: rgba(255,255,255,0.85); --sh-nav-link-hover: #00A9CE; --sh-nav-border: rgba(0,169,206,0.15); --sh-topbar-bg: linear-gradient(90deg, #000d24 0%, #1a0a3e 60%, #003352 100%); --sh-topbar-text: rgba(255,255,255,0.65); --sh-dropdown-bg: #131f42; --sh-dropdown-shadow: 0 16px 48px rgba(0,0,0,0.45); --sh-dropdown-border: rgba(0,169,206,0.18); --sh-mobile-bg: #0d1b3e; --sh-logo-filter: brightness(1.15); --sh-toggle-bg: rgba(0,169,206,0.12); --sh-toggle-border: rgba(0,169,206,0.28); --sh-toggle-icon: #00A9CE; --sh-lang-bg: rgba(255,255,255,0.06); --sh-lang-border: rgba(255,255,255,0.12); --sh-lang-text: rgba(255,255,255,0.80); } /* Dark mode — site-wide sw- class overrides */ html.sw-dark body { background: #0a1628; color: rgba(255,255,255,0.80); } html.sw-dark .sw-benefits-section, html.sw-dark .sw-how-section, html.sw-dark .sw-hp-faq, html.sw-dark .sw-testi-section, html.sw-dark .sw-plans-section { background: #0a1628; } html.sw-dark .sw-light-bg, html.sw-dark [style*="background:var(--sw-light-bg)"], html.sw-dark [style*="background:#fff"] { background: #101e3b !important; } html.sw-dark .sw-benefit-card, html.sw-dark .sw-fiber-plan-card, html.sw-dark .sw-offer-card, html.sw-dark .sw-accordion-item, html.sw-dark .sw-testi-card { background: #131f42 !important; border-color: rgba(0,169,206,0.15) !important; } html.sw-dark .sw-section-title, html.sw-dark .sw-benefit-title, html.sw-dark .sw-fiber-plan-name, html.sw-dark .sw-offer-title { color: rgba(255,255,255,0.92) !important; } html.sw-dark .sw-section-sub, html.sw-dark .sw-benefit-desc, html.sw-dark .sw-offer-subtitle, html.sw-dark p { color: rgba(255,255,255,0.55) !important; } html.sw-dark .sw-compare-section { background: #0a1628; } html.sw-dark .sw-compare-table { border-color: rgba(0,169,206,0.15); } html.sw-dark .sw-compare-row > div, html.sw-dark .sw-compare-row--alt > div { color: rgba(255,255,255,0.65); } html.sw-dark .sw-compare-feature { color: rgba(255,255,255,0.85) !important; } html.sw-dark .sw-compare-stalwart { background: rgba(0,169,206,0.10) !important; } html.sw-dark .sw-compare-row--alt { background: rgba(255,255,255,0.025); } html.sw-dark .sw-tier-item { background: rgba(255,255,255,0.04); border-color: rgba(0,169,206,0.10); } html.sw-dark .sw-tier-now, html.sw-dark .sw-tier-speed, html.sw-dark .sw-fiber-price-num { color: rgba(255,255,255,0.90) !important; } html.sw-dark .sw-fiber-price-note, html.sw-dark .sw-fiber-best-for, html.sw-dark .sw-fiber-price-per { color: rgba(255,255,255,0.40) !important; } html.sw-dark .sw-accordion-trigger { color: rgba(255,255,255,0.85); background: transparent; } html.sw-dark .sw-accordion-body p { color: rgba(255,255,255,0.55) !important; } html.sw-dark .sw-faq-left .sw-section-title { color: rgba(255,255,255,0.90) !important; } html.sw-dark .sw-plan-feat-item { color: rgba(255,255,255,0.60); border-color: rgba(255,255,255,0.06); } html.sw-dark .sw-speed-stat-box { background: rgba(0,169,206,0.08); border-color: rgba(0,169,206,0.15); } html.sw-dark .sw-speed-stat-label { color: rgba(255,255,255,0.40); } html.sw-dark .sw-fiber-plan-body { background: #131f42; } html.sw-dark .sw-plan-feat-item strong { color: rgba(255,255,255,0.85) !important; } /* ── Scroll Progress Bar ─────────────────────────────── */ .sw-scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--sh-progress-bg); z-index: 10001; transition: width 0.08s linear; border-radius: 0 3px 3px 0; } /* ── Top Bar ─────────────────────────────────────────── */ .sw-header-wrap { position: relative; } .sw-topbar { background: var(--sh-topbar-bg); padding: 8px 0; position: relative; z-index: 9999; } .sw-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sw-topbar-socials { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .sw-topbar-socials li a { width: 28px; height: 28px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--sh-topbar-text); font-size: 11px; text-decoration: none; transition: var(--sh-transition); } .sw-topbar-socials li a:hover { background: rgba(255,255,255,0.22); color: #fff; transform: translateY(-1px); } .sw-topbar-contacts { display: flex; align-items: center; gap: 20px; } .sw-topbar-contact-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sh-topbar-text); text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 500; transition: var(--sh-transition); } .sw-topbar-contact-item:hover { color: #fff; } .sw-topbar-contact-item svg { opacity: 0.75; flex-shrink: 0; } .sw-topbar-contact-item:hover svg { opacity: 1; } /* ── Main Nav ────────────────────────────────────────── */ .sw-mainnav { background: var(--sh-nav-bg); box-shadow: var(--sh-nav-shadow); position: sticky; top: 0; z-index: 9998; border-bottom: 1px solid var(--sh-nav-border); transition: background 0.3s ease, box-shadow 0.3s ease; } .sw-mainnav-inner { display: flex; align-items: center; height: 68px; gap: 0; } /* Logo */ .sw-nav-logo { flex-shrink: 0; margin-right: 32px; } .sw-nav-logo img { max-height: 70px; filter: var(--sh-logo-filter); transition: var(--sh-transition); } .sw-nav-logo:hover img { opacity: 0.85; } /* Nav links */ .sw-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; } .sw-nav-item { position: relative; } .sw-nav-link { display: flex; align-items: center; gap: 5px; padding: 8px 14px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--sh-nav-link); text-decoration: none; border-radius: 8px; transition: var(--sh-transition); white-space: nowrap; cursor: pointer; background: transparent; border: none; line-height: 1; } .sw-nav-link:hover, .sw-nav-link.active { color: var(--sh-nav-link-hover); background: rgba(117,59,189,0.06); } .sw-nav-link--offers { color: #ff2244 !important; } .sw-nav-link--offers:hover { background: rgba(255,34,68,0.06) !important; } .sw-nav-link-chevron { width: 12px; height: 12px; opacity: 0.50; transition: transform 0.22s ease; } .sw-nav-item.open .sw-nav-link-chevron { transform: rotate(180deg); } /* Dropdown */ .sw-dropdown { position: absolute; top: calc(100% + 10px); left: 0; background: var(--sh-dropdown-bg); border: 1px solid var(--sh-dropdown-border); border-radius: 14px; box-shadow: var(--sh-dropdown-shadow); padding: 8px; min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.22s cubic-bezier(0.25,0.8,0.25,1); z-index: 100; } .sw-nav-item.open .sw-dropdown, .sw-nav-item:hover .sw-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sw-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--sh-nav-link); text-decoration: none; transition: var(--sh-transition); } .sw-dropdown-item:hover { background: rgba(117,59,189,0.06); color: var(--sh-nav-link-hover); } .sw-dropdown-item-icon { width: 32px; height: 32px; background: var(--sh-brand-grad); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sw-dropdown-item-text strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--sh-nav-link); transition: var(--sh-transition); } .sw-dropdown-item:hover .sw-dropdown-item-text strong { color: var(--sh-nav-link-hover); } .sw-dropdown-item-text span { font-size: 11px; color: #9aabbf; font-weight: 400; } .sw-dropdown-new { font-family: 'Poppins', sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px; background: var(--sh-brand-grad); color: #fff; padding: 2px 7px; border-radius: 100px; margin-left: auto; flex-shrink: 0; } .sw-dropdown-divider { height: 1px; background: var(--sh-dropdown-border); margin: 6px 10px; } /* Nav right controls */ .sw-nav-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* Dark mode toggle */ .sw-dark-toggle { width: 38px; height: 38px; background: var(--sh-toggle-bg); border: 1.5px solid var(--sh-toggle-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--sh-transition); color: var(--sh-toggle-icon); flex-shrink: 0; } .sw-dark-toggle:hover { background: rgba(0,169,206,0.15); transform: rotate(15deg); } .sw-dark-toggle .sw-icon-sun { display: none; } .sw-dark-toggle .sw-icon-moon { display: block; } html.sw-dark .sw-dark-toggle .sw-icon-sun { display: block; } html.sw-dark .sw-dark-toggle .sw-icon-moon { display: none; } /* Language switcher */ .sw-lang-switcher { position: relative; } .sw-lang-btn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--sh-lang-bg); border: 1.5px solid var(--sh-lang-border); border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; color: var(--sh-lang-text); cursor: pointer; transition: var(--sh-transition); white-space: nowrap; } .sw-lang-btn:hover { border-color: rgba(0,169,206,0.35); } .sw-lang-flag { font-size: 15px; line-height: 1; } .sw-lang-code { letter-spacing: 0.5px; } .sw-lang-chevron { width: 11px; height: 11px; opacity: 0.55; transition: transform 0.22s ease; } .sw-lang-switcher.open .sw-lang-chevron { transform: rotate(180deg); } .sw-lang-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--sh-dropdown-bg); border: 1px solid var(--sh-dropdown-border); border-radius: 12px; box-shadow: var(--sh-dropdown-shadow); padding: 6px; min-width: 160px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all 0.22s ease; z-index: 200; } .sw-lang-switcher.open .sw-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sw-lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 500; color: var(--sh-nav-link); cursor: pointer; transition: var(--sh-transition); } .sw-lang-option:hover { background: rgba(117,59,189,0.06); } .sw-lang-option.active { background: rgba(0,169,206,0.08); color: #00A9CE; font-weight: 700; } .sw-lang-option-flag { font-size: 18px; } .sw-lang-option-name { flex: 1; } .sw-lang-option-native { font-size: 11px; color: #9aabbf; } .sw-lang-check { width: 14px; height: 14px; color: #00A9CE; opacity: 0; flex-shrink: 0; } .sw-lang-option.active .sw-lang-check { opacity: 1; } /* Book Meeting button */ .sw-nav-book-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--sh-brand-grad); color: #fff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; border-radius: 9px; text-decoration: none; transition: var(--sh-transition); white-space: nowrap; flex-shrink: 0; letter-spacing: 0.3px; } .sw-nav-book-btn:hover { color: #fff; opacity: 0.92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(117,59,189,0.35); } /* ── Mobile Menu Toggle ──────────────────────────────── */ .sw-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: var(--sh-toggle-bg); border: 1.5px solid var(--sh-toggle-border); border-radius: 10px; cursor: pointer; flex-shrink: 0; } .sw-hamburger span { display: block; width: 18px; height: 2px; background: var(--sh-toggle-icon); border-radius: 2px; transition: all 0.25s ease; } .sw-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sw-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .sw-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile Menu Panel ───────────────────────────────── */ .sw-mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--sh-mobile-bg); z-index: 9997; overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.25,0.8,0.25,1); } .sw-mobile-menu.open { transform: translateX(0); } .sw-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--sh-nav-border); } .sw-mobile-menu-header img { max-height: 46px; filter: var(--sh-logo-filter); } .sw-mobile-close { width: 38px; height: 38px; background: var(--sh-toggle-bg); border: 1.5px solid var(--sh-toggle-border); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--sh-toggle-icon); } .sw-mobile-nav { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .sw-mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 10px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--sh-nav-link); text-decoration: none; transition: var(--sh-transition); cursor: pointer; } .sw-mobile-nav-link:hover, .sw-mobile-nav-link.active { background: rgba(117,59,189,0.06); color: var(--sh-nav-link-hover); } .sw-mobile-nav-link--offers { color: #ff2244 !important; } .sw-mobile-submenu { display: none; flex-direction: column; gap: 2px; margin: 4px 0 4px 12px; padding: 6px 0; border-left: 2px solid rgba(0,169,206,0.20); padding-left: 14px; } .sw-mobile-submenu.open { display: flex; } .sw-mobile-submenu a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: var(--sh-nav-link); text-decoration: none; transition: var(--sh-transition); } .sw-mobile-submenu a:hover { background: rgba(0,169,206,0.06); color: #00A9CE; } .sw-mobile-divider { height: 1px; background: var(--sh-nav-border); margin: 8px 16px; } .sw-mobile-footer-controls { padding: 20px 16px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--sh-nav-border); flex-wrap: wrap; } .sw-mobile-book-btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 13px 20px; background: var(--sh-brand-grad); color: #fff; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; border-radius: 10px; text-decoration: none; min-width: 180px; } /* ── RTL Support (Arabic / Urdu) ─────────────────────── */ html[dir="rtl"] .sw-mainnav-inner, html[dir="rtl"] .sw-topbar-inner { flex-direction: row-reverse; } html[dir="rtl"] .sw-nav-links { flex-direction: row-reverse; } html[dir="rtl"] .sw-nav-logo { margin-right: 0; margin-left: 32px; } html[dir="rtl"] .sw-dropdown { left: auto; right: 0; } html[dir="rtl"] .sw-lang-dropdown { right: auto; left: 0; } html[dir="rtl"] .sw-dropdown-item { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .sw-mobile-nav-link { flex-direction: row-reverse; } html[dir="rtl"] .sw-mobile-submenu { border-left: none; border-right: 2px solid rgba(0,169,206,0.20); padding-left: 0; padding-right: 14px; margin-left: 0; margin-right: 12px; } /* ── Responsive Breakpoints ──────────────────────────── */ @media (max-width: 1200px) { .sw-nav-link { padding: 8px 10px; font-size: 12.5px; } .sw-nav-logo { margin-right: 18px; } } @media (max-width: 992px) { .sw-nav-links { display: none; } .sw-hamburger { display: flex; } .sw-mobile-menu { display: block; } .sw-nav-book-btn { display: none; } .sw-topbar-contacts .sw-topbar-contact-item:not(:first-child) { display: none; } .sw-topbar-contacts .sw-topbar-contact-item:first-child { display: flex; } } @media (max-width: 576px) { .sw-topbar { display: none; } .sw-mainnav-inner { height: 60px; } .sw-nav-logo img { max-height: 44px; } }