/* ========================================================================== SHOP4HOST — WHMCS BRAND WRAPPER STYLES (Nexus theme) Only styles .s4h-* classes (the new header/footer we added). Does NOT touch any of WHMCS's own Bootstrap-based classes, so nothing about the actual client area functionality changes. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { --s4h-primary-700: #1046a3; --s4h-primary-600: #1552bd; --s4h-primary-100: #e3ecfd; --s4h-primary-50: #f2f6fe; --s4h-ink-900: #0f1b2d; --s4h-ink-700: #33455e; --s4h-ink-500: #64748b; --s4h-ink-100: #e7ecf3; --s4h-surface: #f7f9fc; --s4h-surface-raised: #ffffff; } /* Nexus sets a dark navy background (#111827) on BOTH and via "html, body { background-color: var(--bg-inverted); }" in theme.css. Overriding body alone wasn't enough — html's own dark background was still showing through wherever body didn't fully cover the viewport. */ html, body { background: var(--s4h-surface) !important; } /* ---- Brand navbar ---- */ .s4h-navbar { background: var(--s4h-surface-raised); border-bottom: 1px solid var(--s4h-ink-100); font-family: 'Inter', sans-serif; } .s4h-navbar-inner { max-width: 1280px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .s4h-logo { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; color: var(--s4h-primary-700); text-decoration: none; } .s4h-logo-badge { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 8px; background: var(--s4h-primary-700); color: #fff; font-size: 13px; } .s4h-navbar-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .s4h-navbar-links > a, .s4h-nav-dropdown-trigger { padding: 8px 14px; border-radius: 8px; color: var(--s4h-ink-700); text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color 0.15s ease, color 0.15s ease; display: inline-block; } .s4h-navbar-links > a:hover, .s4h-nav-dropdown-trigger:hover { background: var(--s4h-primary-50); color: var(--s4h-primary-700); } .s4h-navbar-account { display: flex; align-items: center; gap: 12px; } .s4h-account-link { font-size: 14px; font-weight: 500; color: var(--s4h-ink-700); text-decoration: none; } .s4h-account-link:hover { color: var(--s4h-primary-700); } .s4h-account-cta { display: inline-flex; align-items: center; border-radius: 8px; background: var(--s4h-primary-700); color: #fff; padding: 8px 16px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .s4h-account-cta:hover { background: var(--s4h-primary-600); } /* ---- Nav dropdowns (Hosting / Domain / Solutions / Support) ---- Pure CSS :hover — no JavaScript. The menu is positioned absolutely under its trigger and hidden by default (opacity/visibility, not display:none, so the transition can animate); appears on hover of the whole .s4h-nav-dropdown wrapper (trigger OR menu), so moving the mouse from the link down into the menu doesn't close it. */ .s4h-nav-dropdown { position: relative; display: inline-block; } .s4h-nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 220px; background: var(--s4h-surface-raised); border: 1px solid var(--s4h-ink-100); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 27, 45, 0.12), 0 4px 12px rgba(15, 27, 45, 0.06); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 60; } .s4h-nav-dropdown:hover .s4h-nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .s4h-nav-dropdown-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--s4h-ink-700); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; } .s4h-nav-dropdown-menu a:hover { background: var(--s4h-primary-50); color: var(--s4h-primary-700); } /* Small screens: the whole .s4h-navbar-links row wraps anyway (see flex-wrap above), and hover doesn't really apply on touch devices — fall back to a simple always-visible-on-tap dropdown via :focus-within so the menu is still reachable by tapping the trigger link itself. */ @media (hover: none) { .s4h-nav-dropdown:focus-within .s4h-nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } } /* ---- Brand footer ---- */ .s4h-footer { background: var(--s4h-surface-raised); border-top: 1px solid var(--s4h-ink-100); font-family: 'Inter', sans-serif; margin-top: 40px; } .s4h-footer-inner { max-width: 1280px; margin: 0 auto; padding: 48px 24px; } .s4h-footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; } @media (max-width: 900px) { .s4h-footer-grid { grid-template-columns: repeat(2, 1fr); } .s4h-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .s4h-footer-grid { grid-template-columns: 1fr; } } .s4h-footer-tagline { margin-top: 12px; font-size: 14px; color: var(--s4h-ink-500); } .s4h-footer-social { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .s4h-footer-social a { display: inline-flex; align-items: center; justify-content: center; height: 32px; width: 32px; border-radius: 8px; background: var(--s4h-surface); border: 1px solid var(--s4h-ink-100); color: var(--s4h-ink-500); transition: color 0.15s ease, border-color 0.15s ease; } .s4h-footer-social a:hover { color: var(--s4h-primary-700); border-color: var(--s4h-primary-100); } .s4h-footer-social svg { height: 16px; width: 16px; } .s4h-footer-heading { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; color: var(--s4h-ink-900); } .s4h-footer-links { list-style: none; margin: 16px 0 0; padding: 0; } .s4h-footer-links li { margin-top: 10px; } .s4h-footer-links a { font-size: 14px; color: var(--s4h-ink-500); text-decoration: none; } .s4h-footer-links a:hover { color: var(--s4h-primary-700); } /* ---- Payment badges ---- Text-based badges in each brand's real associated color, matching the exact approach already used on the main site's footer — reads as distinct payment options rather than identical gray pills. */ .s4h-footer-payments { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--s4h-ink-100); } .s4h-footer-payments-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s4h-ink-500); } .s4h-footer-payments-label svg { height: 16px; width: 16px; } .s4h-footer-payments-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .s4h-badge { display: inline-flex; align-items: center; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; border-width: 1px; border-style: solid; } .s4h-badge-pink { background: #fdf2f8; color: #be185d; border-color: #fce7f3; } .s4h-badge-orange { background: #fff7ed; color: #c2410c; border-color: #ffedd5; } .s4h-badge-purple { background: #faf5ff; color: #7e22ce; border-color: #f3e8ff; } .s4h-badge-slate { background: #f8fafc; color: #334155; border-color: #f1f5f9; } .s4h-badge-blue { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; } .s4h-footer-bottom { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--s4h-ink-100); } .s4h-footer-bottom p { font-size: 12px; color: var(--s4h-ink-500); margin: 0; } /* ========================================================================== HIDE WHMCS'S REDUNDANT PRODUCT MENU + NATIVE FOOTER Pure CSS, no markup changes — fully reversible by deleting this block. NOTE: we deliberately do NOT hide the whole #header — it also contains the knowledgebase search and live cart count, which are real functionality we haven't replicated elsewhere. Only the specific .main-navbar-wrapper row (the "Store / Web Hosting / Reseller Hosting.../Login" menu) is hidden, since that's the genuinely redundant part duplicating our own navbar's links. ========================================================================== */ .main-navbar-wrapper { display: none !important; } #footer.footer { display: none !important; } /* WHMCS's own logo (the "Shop4Host.com" wordmark image) is redundant with our own S4 logo in the navbar above it. Hide just the logo link, keep the search form and cart icon in the same row visible. */ .navbar-brand { display: none !important; } /* section#main-body uses a slightly different light-gray shade (var(--bg-lifted), aka neutral-100) than our surface color, creating a faint visible seam where it meets other sections. Match it exactly to eliminate the seam. */ section#main-body { background-color: var(--s4h-surface) !important; } /* Knowledgebase search box + cart icon row, hidden per request — this row sat between our own navbar and the page content, duplicating search (we don't have a search feature to duplicate) and displaying the cart in a spot that felt disconnected from the rest of the nav. Two rules: the desktop layout (.container.mt-2.mb-2, confirmed as the only element matching that combination) and the mobile hamburger-menu copy of the search box specifically (scoped narrowly to avoid hiding any other unrelated .d-xl-none element elsewhere on the page). */ .container.mt-2.mb-2 { display: none !important; } .collapse.navbar-collapse .input-group.search { display: none !important; }