/* ========================================================================== 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; position: sticky; top: 0; z-index: 100; } .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); } /* Cart link, relocated here at runtime by the script in footer.tpl (see that file for why) — restyled to match this navbar's look instead of its original Bootstrap nav-link/btn styling, which was built for a different context. */ .s4h-cart-link { display: inline-flex !important; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--s4h-ink-700) !important; text-decoration: none !important; padding: 0; background: none !important; border: none !important; } .s4h-cart-link:hover { color: var(--s4h-primary-700) !important; } /* ---- 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 (the cart itself was relocated into our own navbar instead — see the script in footer.tpl). 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). A third rule hides the row's own parent (.navbar.navbar-light, also confirmed unique) — that parent has an explicit min-height:70px of its own, so hiding just its child left an empty 70px gap behind. */ .container.mt-2.mb-2 { display: none !important; } .collapse.navbar-collapse .input-group.search { display: none !important; } .navbar.navbar-light { display: none !important; } /* ========================================================================== S4H REDESIGN v1 — STEP 1: SIDEBAR CONSOLIDATION Purely additive CSS on WHMCS's own standard .panel-sidebar markup — no template markup touched. All classes below confirmed live in Chrome on shop4host.com/index.php/store/ssd-web-hosting: .panel-sidebar, .collapsable-card-body, .panel-minimise, .panel-heading, .panel-title, .list-group-item, .cart-sidebar/.sidebar, .cart-body. BUG FIXED 2026-07-27: the original box-shadow here (0 8px 24px blur) bled ~12px past the sidebar's right edge. This theme's sidebar/content columns sit flush against each other with zero gutter (.cart-body has padding-left: 0) — verified live — so that shadow visually crossed into the "cPanel Hosting" heading, which is exactly the overlap you saw. Fixed by (a) shrinking the shadow so it doesn't reach past the boundary, and (b) adding real breathing room via .cart-body padding-left (see below) instead of relying on a gap that was never there. BUG FIXED 2026-07-27 (4th pass): on the Register/Transfer Domain pages (cart.php?a=add&domain=register / =transfer), WHMCS renders this same sidebar wrapper as just class="cart-sidebar" — missing the ".sidebar" class it adds on the hosting listing pages. Confirmed live on both domain pages. Every selector below now targets both ".sidebar" and ".cart-sidebar" so this applies consistently everywhere, not just on pages where WHMCS happens to add the extra class. TO REVERT JUST THIS STEP: delete from this comment down to the matching "END S4H REDESIGN v1 — STEP 1" comment below. ========================================================================== */ .sidebar, .cart-sidebar { border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08); border: 1px solid var(--s4h-ink-100); background: var(--s4h-surface-raised); } /* Real breathing room between the sidebar and main content — this template has zero native gutter between them (.cart-body's own padding-left is 0, confirmed live), which is what let the shadow above visually cross the boundary. Safe to add: .cart-body already uses box-sizing: border-box, confirmed live, so this only shifts content inward — it doesn't change the column's outer width or the row's total flex math. Selector had to be corrected after testing live: the theme's own theme.min.css sets this via "body #order-standard_cart .cart-body" (an ID selector), which beats a plain ".cart-body" rule even with !important, since ID specificity wins regardless. Matching that specificity here so the padding actually takes effect. */ body #order-standard_cart .cart-body { padding-left: 24px !important; } /* Strip each panel's own separate card chrome so the three stack as one continuous surface, divided only by a thin rule between sections. */ .sidebar .panel.panel-sidebar, .cart-sidebar .panel.panel-sidebar { border: none !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 0 !important; } .sidebar .panel.panel-sidebar + .panel.panel-sidebar, .cart-sidebar .panel.panel-sidebar + .panel.panel-sidebar { border-top: 1px solid var(--s4h-ink-100) !important; } /* First panel (Categories) gets the brand header treatment. */ .sidebar .panel.panel-sidebar:first-of-type .panel-heading, .cart-sidebar .panel.panel-sidebar:first-of-type .panel-heading { background: var(--s4h-primary-700); border: none; padding: 14px 18px; } .sidebar .panel.panel-sidebar:first-of-type .panel-heading .panel-title, .cart-sidebar .panel.panel-sidebar:first-of-type .panel-heading .panel-title, .sidebar .panel.panel-sidebar:first-of-type .panel-heading a, .cart-sidebar .panel.panel-sidebar:first-of-type .panel-heading a { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; } /* Collapse chevrons removed entirely per request — confirmed live that WHMCS binds the collapse click handler to this icon itself (not the whole heading), so hiding it also removes the ability to accidentally collapse a panel, not just the visual button. */ .sidebar .panel.panel-sidebar .panel-heading .panel-minimise, .cart-sidebar .panel.panel-sidebar .panel-heading .panel-minimise { display: none !important; } /* Actions + Currency panels: quiet uppercase subheadings, not full card headers — visually demotes them below Categories. */ .sidebar .panel.panel-sidebar:not(:first-of-type) .panel-heading, .cart-sidebar .panel.panel-sidebar:not(:first-of-type) .panel-heading { background: var(--s4h-surface); border: none; padding: 12px 18px 4px; } .sidebar .panel.panel-sidebar:not(:first-of-type) .panel-heading .panel-title, .cart-sidebar .panel.panel-sidebar:not(:first-of-type) .panel-heading .panel-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--s4h-ink-500); } /* Demote the Actions list (Register/Transfer/View Cart) to plain text links instead of full list-group rows — these already duplicate our own navbar's Domain dropdown. */ .sidebar .panel.panel-sidebar:nth-of-type(2) .list-group-item, .cart-sidebar .panel.panel-sidebar:nth-of-type(2) .list-group-item { border: none; padding: 6px 18px; font-size: 13px; color: var(--s4h-ink-700); background: transparent; } .sidebar .panel.panel-sidebar:nth-of-type(2) .list-group-item:hover, .cart-sidebar .panel.panel-sidebar:nth-of-type(2) .list-group-item:hover { color: var(--s4h-primary-700); background: var(--s4h-primary-50); } .sidebar .panel.panel-sidebar .list-group-item.active, .cart-sidebar .panel.panel-sidebar .list-group-item.active, .sidebar .panel.panel-sidebar .list-group-item.active:hover, .cart-sidebar .panel.panel-sidebar .list-group-item.active:hover { background: var(--s4h-primary-50) !important; color: var(--s4h-primary-700) !important; border: none !important; font-weight: 600; } .sidebar .panel.panel-sidebar .panel-body, .cart-sidebar .panel.panel-sidebar .panel-body, .sidebar .panel.panel-sidebar .collapsable-card-body, .cart-sidebar .panel.panel-sidebar .collapsable-card-body { padding-top: 4px; padding-bottom: 12px; } /* ========================================================================== END S4H REDESIGN v1 — STEP 1: SIDEBAR CONSOLIDATION ========================================================================== */ /* ========================================================================== S4H REDESIGN v1 — STEP 2: PAGE HEADER ACCENT (breadcrumb now HIDDEN) Gives the first heading in the main content area (e.g. "cPanel Hosting") a branded underline accent. .master-breadcrumb is confirmed real (present in header.tpl, confirmed live to be exactly the "Shopping Cart" bar) — per request, this is now hidden entirely rather than styled. TO REVERT JUST THIS STEP: delete from this comment down to the matching "END S4H REDESIGN v1 — STEP 2" comment below. ========================================================================== */ .master-breadcrumb { display: none !important; } .header-lined h1, .header-lined h2 { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--s4h-ink-900); padding-bottom: 12px; margin-bottom: 24px; border-bottom: 3px solid var(--s4h-primary-700); display: inline-block; } /* ========================================================================== END S4H REDESIGN v1 — STEP 2: PAGE HEADER ACCENT Selector corrected 2026-07-27 after checking the live page in Chrome: the heading isn't a direct child of .primary-content — it sits inside a real, confirmed ".header-lined" wrapper div instead. Breadcrumb bar hidden per request (2026-07-27, 3rd pass) instead of styled. ========================================================================== */ /* ========================================================================== S4H REDESIGN v1 — STEP 3: PRICING CARD POLISH Verified live on shop4host.com/index.php/store/ssd-web-hosting (cPanel) and /directadmin-hosting — identical real markup on both: .products .product > header (plan name in a ) / .product-desc (the features are one raw

with
line breaks and inline tags — NOT separate list items, so per-line checkmark icons aren't reliably addable via CSS alone) / footer > .product-pricing .price and .btn-order-now (already brand blue — confirmed, no change needed to its color). TO REVERT JUST THIS STEP: delete from this comment down to the matching "END S4H REDESIGN v1 — STEP 3" comment below. ========================================================================== */ .products .product { transition: box-shadow 0.15s ease, transform 0.15s ease; } .products .product:hover { box-shadow: 0 8px 24px rgba(15, 27, 45, 0.08); transform: translateY(-2px); } .products .product header { /* Was border-bottom: 1px solid — switched to box-shadow since this site's borders compute at a fractional width (0.909091px, confirmed live), which can anti-alias into a doubled-looking hairline in screenshots. A box-shadow line renders as a single flat fill instead of a stroked edge, so it doesn't have the same fractional- width doubling risk. If this still looks doubled to you, the simplest fix is just removing this line entirely — say the word and I'll pull it. */ box-shadow: 0 1px 0 var(--s4h-ink-100); } .products .product header span { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: var(--s4h-ink-900); } .products .product footer { border-top: 1px solid var(--s4h-ink-100); } .products .product .product-pricing .price { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; color: var(--s4h-primary-700); } .products .product .btn-order-now { display: block; width: 100%; font-weight: 600; border-radius: 8px; } /* ========================================================================== END S4H REDESIGN v1 — STEP 3: PRICING CARD POLISH Not included: a "Most Popular" highlight badge on one tier — WHMCS has no built-in flag for this, so it would need a small script (like the cart-relocation one in footer.tpl) matching a specific plan name. Tell me which tier to highlight and I'll add it as its own step. ========================================================================== */ /* ========================================================================== S4H REDESIGN v1 — STEP 4: "PROVISION IN" FLAG SPACING Verified live: the flags are plain inline tags inside that same raw

, with no wrapper around just the flags — so a text label like "Available in: US, CA..." can't be added via CSS; that would require editing each product's Description field directly in WHMCS admin. This only cleans up sizing/spacing/alignment of the flag images themselves. TO REVERT JUST THIS STEP: delete from this comment down to the matching "END S4H REDESIGN v1 — STEP 4" comment below. ========================================================================== */ .products .product-desc p img { height: 14px; width: auto; vertical-align: middle; margin: 0 2px; border-radius: 2px; box-shadow: 0 0 0 1px var(--s4h-ink-100); } /* ========================================================================== END S4H REDESIGN v1 — STEP 4: "PROVISION IN" FLAG SPACING ========================================================================== */ /* ========================================================================== S4H REDESIGN v1 — STEP 6: SIDEBAR/CONTENT ALIGNMENT Aligns the sidebar column and main content column to the same top edge and tightens the vertical rhythm between them — fixes the "two different UIs bolted together" feel. All confirmed-real structural classes (#main-body, .row, .primary-content present in header.tpl). TO REVERT JUST THIS STEP: delete from this comment down to the matching "END S4H REDESIGN v1 — STEP 6" comment below. ========================================================================== */ #main-body .row { align-items: flex-start; } #main-body .sidebar, #main-body .cart-sidebar { margin-top: 0; } #main-body .primary-content { padding-top: 0; } /* ========================================================================== END S4H REDESIGN v1 — STEP 6: SIDEBAR/CONTENT ALIGNMENT Broadened 2026-07-27 (4th pass): on the Register/Transfer Domain pages (cart.php?a=add&domain=register / =transfer), WHMCS renders this same wrapper as just class="cart-sidebar" — missing the extra "sidebar" class it adds on the hosting listing pages (class="cart-sidebar sidebar"). Confirmed live on both domain pages. Since Steps 1 and 6 only targeted ".sidebar", the whole redesign was silently not applying there — added ".cart-sidebar" as an equal target everywhere so it now applies consistently regardless of which class WHMCS happens to add. ========================================================================== */