/* ========== EPBD Header & Footer — HostingExplorers style ========== */ .epbdhf-header, .epbdhf-header *, .epbdhf-footer, .epbdhf-footer *, .epbdhf-drawer, .epbdhf-drawer * { box-sizing: border-box; } /* ---------- HEADER ---------- */ .epbdhf-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #fff; transition: box-shadow .25s ease, transform .25s ease, background .25s ease; will-change: box-shadow, transform; } .epbdhf-header.is-scrolled { box-shadow: 0 6px 22px rgba(15,23,42,.10); background: rgba(255,255,255,.96); backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); } /* Spacer reserves vertical space so page content isn't hidden behind fixed header. JS keeps its height in sync. */ .epbdhf-spacer { display:block; width:100%; height:76px; } /* Body-lock helper for drawer open (prevents layout shift from scrollbar). */ html.epbdhf-locked, body.epbdhf-locked { overflow: hidden !important; } body.epbdhf-locked { padding-right: var(--epbdhf-sbw, 0px); } /* When drawer is open, keep the fixed header aligned with the shifted body. */ body.epbdhf-locked .epbdhf-header { padding-right: var(--epbdhf-sbw, 0px); } .epbdhf-header { border-bottom: 1px solid #eef0f3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#0f172a; } .epbdhf-header__inner { max-width: 1360px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 14px 24px; } .epbdhf-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex-shrink:0; } .epbdhf-logo__img { max-height:44px; width:auto; } .epbdhf-logo__text { display:flex; flex-direction:column; line-height:1; } .epbdhf-logo__brand { font-size:20px; font-weight:800; letter-spacing:-.01em; color:#0f172a; } .epbdhf-logo__tag { font-size:9px; font-weight:700; letter-spacing:.28em; color:#64748b; margin-top:5px; } .epbdhf-nav { flex:1; display:flex; justify-content:center; } .epbdhf-nav .epbdhf-menu, .epbdhf-nav .menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; } .epbdhf-nav li { position:relative; } .epbdhf-nav a { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; font-size:15px; font-weight:600; color:#0f172a; text-decoration:none; border-radius:8px; transition:background .15s; } .epbdhf-nav a:hover { background:#f1f5f9; color:#2563eb; } .epbdhf-nav .menu-item-has-children > a::after, .epbdhf-nav li.has-children > a::after { content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:4px; margin-top:-3px; opacity:.65; } /* Dropdown */ .epbdhf-nav .sub-menu, .epbdhf-nav ul.children { position:absolute; top:100%; left:0; min-width:240px; background:#fff; border:1px solid #eef0f3; border-radius:12px; box-shadow:0 20px 40px -20px rgba(15,23,42,.25); padding:8px; margin:6px 0 0; list-style:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s; display:block; } .epbdhf-nav li:hover > .sub-menu, .epbdhf-nav li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); } .epbdhf-nav .sub-menu a { padding:9px 12px; font-size:14px; font-weight:500; display:block; } .epbdhf-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; } .epbdhf-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; font-size:14px; font-weight:700; color:#fff !important; text-decoration:none; background:linear-gradient(135deg,#6366f1,#8b5cf6); border-radius:10px; box-shadow:0 8px 20px -8px rgba(99,102,241,.6); transition:transform .15s, box-shadow .15s; } .epbdhf-cta:hover { transform:translateY(-1px); box-shadow:0 12px 24px -10px rgba(99,102,241,.7); } .epbdhf-cta__badge { font-style:normal; font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:4px; background:#f59e0b; color:#111827; } .epbdhf-partner { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #e5e7eb; border-radius:999px; font-size:13px; font-weight:600; color:#334155; } .epbdhf-icon-btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; background:#fff; border-radius:999px; cursor:pointer; color:#0f172a; transition:background .15s, color .15s; } .epbdhf-icon-btn:hover { background:#f1f5f9; color:#2563eb; } .epbdhf-burger { display:none; flex-direction:column; gap:4px; } .epbdhf-burger span { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; } .epbdhf-search { display:none; padding:14px 24px; border-top:1px solid #eef0f3; background:#f8fafc; } .epbdhf-search.is-open { display:flex; gap:8px; max-width:1360px; margin:0 auto; } .epbdhf-search input { flex:1; padding:10px 14px; border:1px solid #e5e7eb; border-radius:8px; font-size:15px; } .epbdhf-search button { padding:10px 18px; border-radius:8px; border:0; background:#2563eb; color:#fff; font-weight:600; cursor:pointer; } /* ---------- MOBILE DRAWER ---------- */ .epbdhf-drawer { position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); background:#fff; z-index:1001; padding:24px 20px; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; box-shadow:-20px 0 40px rgba(15,23,42,.15); } .epbdhf-drawer.is-open { transform:translateX(0); } .epbdhf-drawer__scroll ul, .epbdhf-drawer .menu { list-style:none; margin:0 0 20px; padding:0; } .epbdhf-drawer a { display:block; padding:12px 8px; font-size:16px; font-weight:600; color:#0f172a; text-decoration:none; border-bottom:1px solid #f1f5f9; } .epbdhf-drawer .sub-menu { padding-left:16px; } .epbdhf-drawer .sub-menu a { font-size:14px; font-weight:500; color:#475569; } .epbdhf-cta--block { display:flex; justify-content:center; margin-top:12px; } .epbdhf-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1000; opacity:0; visibility:hidden; transition:.2s; } .epbdhf-backdrop.is-open { opacity:1; visibility:visible; } /* -------- A11y focus & close buttons -------- */ .epbdhf-icon-btn:focus-visible, .epbdhf-header a:focus-visible, .epbdhf-header button:focus-visible, .epbdhf-drawer a:focus-visible, .epbdhf-drawer button:focus-visible, .epbdhf-search input:focus-visible, .epbdhf-search button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px; } .epbdhf-drawer__close, .epbdhf-search__close { position: absolute; background: transparent; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: #0f172a; padding: 6px 10px; } .epbdhf-drawer { padding-top: 44px; } .epbdhf-drawer__close { top: 8px; right: 12px; } .epbdhf-search { position: relative; } .epbdhf-search__close { top: 50%; right: 8px; transform: translateY(-50%); font-size: 22px; } .epbdhf-search[hidden] { display: none !important; } /* -------- Active / current menu highlight -------- */ .epbdhf-nav .epbdhf-menu > li > a { position: relative; transition: color .18s ease; } .epbdhf-nav .epbdhf-menu > li.current-menu-item > a, .epbdhf-nav .epbdhf-menu > li.current-menu-parent > a, .epbdhf-nav .epbdhf-menu > li.current-menu-ancestor > a, .epbdhf-nav .epbdhf-menu > li.current_page_item > a, .epbdhf-nav .epbdhf-menu > li > a[aria-current="page"] { color: #2563eb; font-weight: 700; } .epbdhf-nav .epbdhf-menu > li.current-menu-item > a::after, .epbdhf-nav .epbdhf-menu > li.current-menu-parent > a::after, .epbdhf-nav .epbdhf-menu > li.current-menu-ancestor > a::after, .epbdhf-nav .epbdhf-menu > li.current_page_item > a::after, .epbdhf-nav .epbdhf-menu > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px; height: 3px; background: linear-gradient(90deg, #2563eb, #f59e0b); border-radius: 2px; } /* Drawer active state */ .epbdhf-drawer .current-menu-item > a, .epbdhf-drawer .current-menu-parent > a, .epbdhf-drawer .current-menu-ancestor > a, .epbdhf-drawer .current_page_item > a, .epbdhf-drawer a[aria-current="page"] { color: #2563eb; background: #eff6ff; border-left: 3px solid #2563eb; padding-left: 10px; } /* CTA active state */ .epbdhf-cta.is-current { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); } /* ---------- FOOTER ---------- */ .epbdhf-footer { background:#0b1220; color:#cbd5e1; margin-top:60px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .epbdhf-footer__inner { max-width: 1360px; margin:0 auto; padding: 60px 24px 40px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:40px; } .epbdhf-flogo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; } .epbdhf-flogo .epbdhf-logo__mark path[stroke="#f59e0b"]{ stroke:#f59e0b; } .epbdhf-flogo span { display:flex; flex-direction:column; line-height:1.1; } .epbdhf-flogo b { color:#fff; font-weight:800; font-size:18px; } .epbdhf-flogo em { font-style:normal; font-size:9px; letter-spacing:.28em; color:#64748b; margin-top:4px; } .epbdhf-footer__desc { margin:18px 0; font-size:14px; line-height:1.7; color:#94a3b8; max-width:320px; } .epbdhf-socials { display:flex; gap:10px; } .epbdhf-socials a { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:#1e293b; color:#cbd5e1; border-radius:8px; transition:.15s; } .epbdhf-socials a:hover { background:#2563eb; color:#fff; } .epbdhf-fcol h4 { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#e2e8f0; margin:0 0 18px; } .epbdhf-fcol ul, .epbdhf-fcol .menu { list-style:none; margin:0; padding:0; } .epbdhf-fcol li { margin-bottom:12px; } .epbdhf-fcol a { color:#94a3b8; text-decoration:none; font-size:14px; transition:color .15s; } .epbdhf-fcol a:hover { color:#fff; } .epbdhf-footer__bottom { border-top:1px solid #1e293b; } .epbdhf-footer__bottom-inner { padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:#64748b; } .epbdhf-footer__legal { list-style:none; margin:0; padding:0; display:flex; gap:22px; } .epbdhf-footer__legal a { color:#94a3b8; text-decoration:none; font-size:13px; } .epbdhf-footer__legal a:hover { color:#fff; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1100px) { .epbdhf-partner { display:none; } .epbdhf-footer__inner { grid-template-columns: 1fr 1fr 1fr; } .epbdhf-footer__brand { grid-column: 1 / -1; } } @media (max-width: 900px) { .epbdhf-nav { display:none; } .epbdhf-burger { display:inline-flex; } .epbdhf-cta span { display:none; } .epbdhf-cta { padding:10px 12px; } .epbdhf-header__inner { gap:12px; padding:12px 16px; } .epbdhf-logo__brand { font-size:16px; } .epbdhf-logo__tag { font-size:8px; letter-spacing:.22em; } } @media (max-width: 640px) { .epbdhf-cta__badge { display:none; } .epbdhf-footer__inner { grid-template-columns: 1fr 1fr; padding:44px 20px 30px; gap:30px; } .epbdhf-footer__brand { grid-column: 1 / -1; } .epbdhf-footer__bottom-inner { flex-direction:column; text-align:center; } .epbdhf-footer__legal { justify-content:center; } } @media (max-width: 480px) { .epbdhf-logo__text { display:none; } .epbdhf-footer__inner { grid-template-columns: 1fr; } } @media (min-width: 1600px) { .epbdhf-header__inner, .epbdhf-footer__inner { max-width:1560px; } .epbdhf-nav a { font-size:16px; padding:12px 16px; } } /* Theme-override safety net — prevent Elementor/Hello Elementor button styles from bleeding in */ .epbdhf-header .epbdhf-icon-btn, .epbdhf-header button.epbdhf-icon-btn { border-color:#e5e7eb !important; background:#fff !important; color:#0f172a !important; box-shadow:none !important; text-shadow:none !important; } .epbdhf-header .epbdhf-icon-btn:hover { background:#f1f5f9 !important; color:#2563eb !important; } .epbdhf-header .epbdhf-burger span { background:currentColor !important; } .epbdhf-header .epbdhf-cta { border:0 !important; color:#fff !important; } .epbdhf-header .epbdhf-cta:hover { color:#fff !important; } .epbdhf-footer a, .epbdhf-footer h4, .epbdhf-footer p, .epbdhf-footer span, .epbdhf-footer b, .epbdhf-footer em { text-shadow:none !important; } /* -------------------------------------------------------------- * Fix: /contact/ page