/* Hide helpline section in header */ .tp-header-pb-helpline-icon, .tp-header-pb-helpline-numbar { display: none !important; } /* =================================== COLOUR OVERRIDES - Match old blue theme Old-site palette reference: Primary accent blue : #216CE2 Deep navy background: #0E163F =================================== */ /* 1. Override CSS colour variables. NOTE: custom.css also loads early via {assetExists} before main.css, so ALL colour overrides below use explicit hex values (not just variables) to guarantee they win regardless of stylesheet load order. */ :root { --tp-theme-primary: #216CE2; --tp-common-green-2: #216CE2; --tp-common-yellow: #216CE2; /* Section backgrounds: replace near-black (#101010) with deep navy. --tp-grey-8 drives 30+ component backgrounds site-wide. */ --tp-grey-8: #0B1240; /* Footer background: replace near-black with deep navy. .tp-footer-area uses var(--tp-common-black). */ --tp-common-black: #0B1240; /* CRITICAL: whmcs.css also sets --primary in :root { --primary: #c4ee18 }. The client area may not always carry class="hostivo-dark" on , so .hostivo-dark { --primary } alone is not enough — must be in :root too. custom.css loads after whmcs.css so this :root declaration wins. */ --primary: #216CE2; --primary-dark: #1659B8; } /* Override inside .hostivo-dark to beat main.css specificity. main.css re-declares ALL these variables inside .hostivo-dark (higher specificity than :root), so we must match that specificity here. */ .hostivo-dark { --tp-grey-8: #0B1240; --tp-common-black: #0B1240; /* Accent/brand colour overrides - must live here as well as :root */ --tp-theme-primary: #216CE2; --tp-common-green-2: #216CE2; --tp-common-yellow: #216CE2; /* WHMCS button variable */ --primary: #216CE2; --primary-dark: #1659B8; } /* Belt-and-braces: directly override the background utility classes so that even if the CSS variable inheritance doesn't resolve correctly, the section backgrounds are still forced to deep navy. */ .tp-bg-grey-8 { background-color: #0B1240 !important; } .tp-bg-common-black, .tp-footer-area { background-color: #0B1240 !important; } /* =================================== PAGE BACKGROUND - Deep navy throughout =================================== */ /* 2b. Body/page default background for sections with no explicit bg class. */ body { background-color: #0E163F !important; } /* =================================== HEADER - Solid background, no transparent overlay =================================== */ /* 2. Default (non-scrolled) header: solid deep-navy background. position:relative takes the header out of overlay/absolute mode so the hero content no longer scrolls behind it. */ #header-sticky.tp-header-area:not(.header-sticky) { position: relative !important; background: #0E163F !important; } /* 3. Scrolled/sticky header: fixed position, slightly translucent deep-navy */ #header-sticky.header-sticky { position: fixed !important; background: rgba(14, 22, 63, 0.96) !important; } /* 4. Logo background triangle: lime-green → royal blue */ .tp-header-pb-logobg { background: #216CE2 !important; clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%); } /* 5. Top-bar account/currency/language dropdown menus: near-black → deep navy */ .dropdown-menu-two { background: #0B1240 !important; } /* 6. Main nav dropdown submenus: dark grey → deep navy */ .tp-main-menu nav > ul > li .submenu { background: rgba(11, 18, 64, 0.98) !important; } /* 7. Nav submenu item hover: dark grey highlight → royal blue */ .tp-main-menu nav > ul > li .submenu li:hover > a { background-color: #216CE2 !important; color: #ffffff !important; } /* 8. Mobile offcanvas/sidebar menu: near-black → deep navy */ .offcanvas-black-bg { background: #0B1240 !important; } /* 9. Mobile offcanvas submenu item hover: dark grey → royal blue */ .offcanvas-black-bg .tp-offcanvas-menu .tp-submenu li a:hover { background-color: #216CE2 !important; color: #ffffff !important; } /* 10. Social icon link hover colour in header: lime-green → royal blue */ .tp-header-pb-social ul li a:hover, .hostivo-dark .tp-header-pb-social ul li a:hover { color: #216CE2 !important; } /* 11. Login button in header */ .tp-header-login a.tp-btn { display: inline-block; background: #216CE2 !important; color: #ffffff !important; border: 2px solid #216CE2 !important; border-radius: 6px; padding: 8px 22px; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.25s, border-color 0.25s; } .tp-header-login a.tp-btn:hover { background: #1659B8 !important; border-color: #1659B8 !important; color: #ffffff !important; } /* =================================== PAGE BUTTONS - Override all lime/green buttons =================================== */ /* 12. Primary CTA button (e.g. "Lets Get Started" hero button) */ .cst-btn { background: #216CE2 !important; color: #ffffff !important; } .cst-btn:hover { background: #1659B8 !important; } /* Transparent variant keeps a subtle blue tint */ .cst-btn.transparent { background: rgba(33, 108, 226, 0.12) !important; color: #ffffff !important; border-color: rgba(33, 108, 226, 0.4) !important; } /* Black-t / outlined variant */ .cst-btn.black-t { background: transparent !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } .cst-btn.black-t:hover, .hostivo-dark .cst-btn.black-t:hover { background: #216CE2 !important; border-color: #216CE2 !important; color: #ffffff !important; } /* 13. Elements using tp-bg-common-green-2 (e.g. FAQ "Contact our support team" button) */ .tp-bg-common-green-2 { background-color: #216CE2 !important; color: #ffffff !important; } /* =================================== HERO SECTION - Fix top AND bottom overlap =================================== */ /* 14. The original theme uses position:absolute for the header, so the hero section uses the "pt-90" utility class (padding-top:90px) to push its content clear of the transparent overlay header. Now that the header is position:relative (in-flow), the hero section automatically starts below the header — pt-90 adds 90px of excess height causing the hero to push down and overlap the next section. Fix: remove the compensatory top padding. The 90px reduction matches the header height, restoring the hero to its originally designed visual height. */ .cst-hero-ptb { padding-top: 0 !important; } /* 15. Let the hero image render at its natural proportions. */ .cst-hero-thumb img { width: 100%; height: auto; display: block; } /* =================================== FOOTER - Match top nav link style =================================== */ /* 16. Footer column navigation links: grey (#999) → soft white */ .tp-footer-wd-widget ul li a, .tp-footer-sa-widget ul li a, .hostivo-dark .tp-footer-wd-widget ul li a { color: rgba(255, 255, 255, 0.78) !important; } /* Footer link hover: blue, matching top nav accent */ .tp-footer-wd-widget ul li a:hover, .tp-footer-sa-widget ul li a:hover, .hostivo-dark .tp-footer-wd-widget ul li a:hover { color: #216CE2 !important; } /* 17. Footer social icon circles */ .al-footer-seo-widget-social a span { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.2); } .al-footer-seo-widget-social a:hover span { color: #216CE2; } /* 18. Footer bottom bar: copyright & Privacy Policy / T&C links */ .tp-footer-copyright p, .tp-footer-copyright a { color: rgba(255, 255, 255, 0.55) !important; } .tp-footer-copyright a:hover { color: #216CE2 !important; } /* 19. Footer bottom divider line: make subtle against navy */ .tp-footer-bottom.tp-footer-wd-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* 20. Footer address/description paragraph text */ .tp-footer-widget p, .tp-footer-widget a.underline-white { color: rgba(255, 255, 255, 0.65) !important; } .tp-footer-widget a.hover-text-white:hover { color: #ffffff !important; } /* =================================== TESTIMONIALS - Fix oversized heading =================================== */ /* 21. Theme sets .cst-testimonial-heading .cst-section-title to 132px by default. Override to match other section headings (~52px). */ .cst-testimonial-heading .cst-section-title { font-size: 52px !important; } /* =================================== PRICING / PACKAGE BOXES =================================== */ /* 22. Force white text in all pricing boxes. WHMCS description output can contain
  • ,

    , etc.; the broad selector ensures every child inherits white regardless of tag used. */ .al-price-item, .al-price-item *:not(.al-btn-blue) { color: #ffffff !important; } /* Bullet dots next to feature list items */ .al-price-list ul li::after { background-color: #ffffff !important; } /* Monthly/Annually toggle labels */ .al-toggler-pre, .al-toggler-post { color: rgba(255, 255, 255, 0.75) !important; } .al-toggler-pre.is-active, .al-toggler-post.is-active { color: #ffffff !important; } /* "Get Started" button in each box keeps its own colour */ .al-price-item .al-btn-blue { color: #ffffff !important; } /* === 23. Mobile hamburger button – replace lime green with blue === */ .tp-header-pb-sidebar { background: #216CE2 !important; } /* === 24. Billing toggle track – replace lime green with blue === */ .al-toggle-input-wrap { background-color: #216CE2 !important; } /* === 25. Footer CTA heading – reduce from 145px default === */ .tp-footer-top-title { font-size: 52px !important; } @media only screen and (min-width: 768px) and (max-width: 1199px) { .tp-footer-top-title { font-size: 42px !important; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-footer-top-title { font-size: 34px !important; } } @media (max-width: 574.98px) { .tp-footer-top-title { font-size: 26px !important; } } /* === 26. CTA heading – prevent mid-word breaks === */ .tp-footer-top-title { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } /* === 27. Client area status badges – replace green #3fad46 with blue === */ #tableServicesList .status.status-active, #tableServicesList .status.status-completed, #tableServicesList .status.status-open, #tableInvoicesList .status.status-active, #tableInvoicesList .status.status-completed, #tableInvoicesList .status.status-open, #tableDomainsList .status.status-active, #tableDomainsList .status.status-completed, #tableDomainsList .status.status-open { background: #119EFA !important; color: #fff !important; } /* === 28. Client area nav – hide About Us item === */ .navbar-nav .nav-item:has(> a[href*="about-us"]), .navbar-nav li:has(> a[href*="about-us"]) { display: none !important; } /* === 29. Client area nav – reduce padding to prevent wrapping at ~1366px === */ .navbar-nav .nav-link { padding-left: 12px !important; padding-right: 12px !important; font-size: 14px !important; } /* === 30. Footer social icons – keep only Facebook and X (LinkedIn & Instagram removed in footer.tpl) === */ /* === 31. Hardcoded lime green overrides — not caught by CSS variable substitution === */ /* Featured pricing badge (whmcs.css:3482 uses !important so we must too) */ .tt-featured-badge { background: #119EFA !important; } /* About section animated feature dot */ .tp-about-it-feature span.feature-3 { background: #216CE2 !important; } /* Text invert animation — primary gradient */ .tp_text_invert.invert-primary > div { background-image: linear-gradient(to right, #216CE2 50%, #fff 50%) !important; } /* Counter section divider lines */ .tp-counter-cst-item.borders::before { background: linear-gradient(170deg, #216CE2 0%, #0B1240 100%) !important; } .tp-counter-cst-2-wrap .tp-counter-cst-item.borders::before { background: linear-gradient(170deg, rgba(33, 108, 226, 0.07) 0%, rgba(11, 18, 64, 0.53) 100%) !important; } /* Team member thumb hover overlay */ .tp-team-it-thumb::before { background: linear-gradient(180deg, rgba(33, 108, 226, 0) 55.57%, #216CE2 100%) !important; } /* FAQ floating tag */ .tp-faq-cst-tag .cst-btn-5 { background: #216CE2 !important; color: #ffffff !important; } /* About section background glow */ .hostivo-dark .tp-about-it-blur { background-color: #216CE2 !important; } /* === 32. Client area colour variables — text and background standardisation (P2b/P2c) === */ /* Add to .hostivo-dark for highest specificity (beats whmcs.css :root declarations) */ /* NOTE: --heading-color intentionally NOT overridden here. The OX App Suite promo box has a light-bg feature list that uses var(--heading-color) for text. Forcing #ffffff would make that text invisible (white-on-light). Dark-theme heading colours on public pages are handled by main.css's .hostivo-dark block. Client area panel headings are covered by rule 33's explicit !important rules below. */ .hostivo-dark { --body-color: #e0e0e0; --gray-light: #0B1A3E; --primary-light: #0e1d3d; --bs-list-group-color-three: #a0b0c8; } /* Belt-and-braces :root fallback (custom.css loads after whmcs.css so this wins) */ :root { --body-color: #e0e0e0; --gray-light: #0B1A3E; --primary-light: #0e1d3d; --bs-list-group-color-three: #a0b0c8; } /* Breadcrumb separator — hardcoded #202020 in whmcs.css:123 */ .breadcrumb-item + .breadcrumb-item::before { color: #a0b0c8 !important; } /* Breadcrumb current/active item */ .breadcrumb-item.active { color: #a0b0c8 !important; } /* === 33. Client area sidebar and panel heading text — force white (P2c) === */ .panel-heading, .panel-title, .panel-heading h3, .panel-heading h4, .sidebar .panel-title, #sidebar-account .panel-title, .tp-sidebar-widget-title { color: #ffffff !important; } /* === 34. Bootstrap success colour — override --success variable + hard-override label/badge classes === */ /* whmcs.css sets --success: #83D617 (lime); Bootstrap all.min.css may use hardcoded #28a745 or #5cb85c. Both approaches are covered here. */ .hostivo-dark { --success: #119EFA; --success-light: #0a1535; } :root { --success: #119EFA; --success-light: #0a1535; } /* Hard fallback for Bootstrap label/badge elements (not variable-based) */ .label-success, .label.label-success, .badge-success, .badge.badge-success { background-color: #119EFA !important; color: #ffffff !important; } /* btn-success (e.g. some cart and form submit buttons) */ .btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #216CE2 !important; border-color: #216CE2 !important; color: #ffffff !important; } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #1659B8 !important; border-color: #1659B8 !important; } /* === 35. Dark theme alert styling — ensure text is readable on dark backgrounds === */ /* .alert-danger (e.g. firewall status warning) — keep red border, force white text */ .alert-danger, .alert-danger p, .alert-danger strong, .alert-danger h4 { color: #ffffff !important; } .alert-danger { border-color: rgba(232, 55, 55, 0.5) !important; background-color: rgba(232, 55, 55, 0.1) !important; } /* .alert-info on dark bg */ .alert-info { background-color: var(--tp-grey-8, #0B1240) !important; border-color: var(--tp-border-3, rgba(255,255,255,0.1)) !important; color: #e0e0e0 !important; } /* === 36. Belt-and-braces: direct overrides for elements using var(--primary) === These hard-code the hex so they work even if the CSS variable cascade fails (e.g. client area pages served without class="hostivo-dark" on ). */ /* .text-primary class — whmcs.css: color: var(--primary) !important */ .text-primary { color: #216CE2 !important; } /* .btn-default — whmcs.css: background/border: var(--primary). Used for "Update", cart action buttons, and most primary CTA buttons. */ .btn-default:not(.btn-danger):not(.btn-warning):not(.btn-info):not(.bg-color-red):not(.bg-color-gold) { background: #216CE2 !important; border-color: #216CE2 !important; color: #ffffff !important; } .btn-default:not(.btn-danger):not(.btn-warning):not(.btn-info):not(.bg-color-red):not(.bg-color-gold):hover, .btn-default:not(.btn-danger):not(.btn-warning):not(.btn-info):not(.bg-color-red):not(.bg-color-gold):focus { background: #1659B8 !important; border-color: #1659B8 !important; } /* "Recommended for you" heading — inspector path: #main-body .primary-content ... h3 Also catches promo-banner h3 inside the carousel. */ #main-body .primary-content > div h3, #main-body .primary-content h3 { color: #ffffff !important; } /* OX App Suite promo banner h3 and other promo-banner headings — inspector path: .promo-banner.promo-banner-rounded.ox .card-body .content h3 */ .promo-banner h3, .promo-banner-rounded h3, .promo-banner h4 { color: #ffffff !important; } /* Sidebar promo card "Learn more" footer link — inspector path: .card-sidebar.mc-panel-promo.panel-promo-ox .card-footer a */ .card-sidebar.mc-panel-promo .card-footer a, .panel-promo-ox .card-footer a { color: #119EFA !important; } .card-sidebar.mc-panel-promo .card-footer a:hover, .panel-promo-ox .card-footer a:hover { color: #ffffff !important; } /* Active nav-tab link — inspector path: .nav.nav-tabs > li.active > a (e.g. "Hosting Information" tab) */ .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #216CE2 !important; border-bottom-color: #216CE2 !important; } .nav-tabs > li > a:hover { color: #216CE2 !important; } /* "Add to Cart" / promo CTA buttons — whmcs.css uses var(--primary) !important on these */ .btn-add-to-cart, .primary-solid-btn { background: #216CE2 !important; border-color: #216CE2 !important; color: #ffffff !important; } .btn-add-to-cart:hover, .primary-solid-btn:hover { background: #1659B8 !important; border-color: #1659B8 !important; } /* bg-color-* utility classes (used by WHMCS panel header buttons e.g. "Update") */ .btn[class*="bg-color-"]:not([class*="bg-color-red"]):not([class*="bg-color-gold"]) { background: #216CE2 !important; border-color: #216CE2 !important; color: #ffffff !important; } /* === 37. OX App Suite feature list items — dark-background contexts (P2) === Both the order-page upsell card AND the dashboard "Recommended for you" promo sit on a dark navy background, but their ul > li text uses var(--heading-color) which defaults to #1d1d1f (near-black) from whmcs.css — invisible on dark bg. We cannot globally override --heading-color as other parts of the client area use it with light-background panels and need dark text there. These rules target only the specific dark-bg OX components. Order page inspector path: div.card-body.p-5.store-promoted-product.upsell-ox_productivity > div.row > div.col-sm-9 > ul.features > li Dashboard inspector path: div.promo-banner.promo-banner-rounded.ox.promo-ox_standard > div.card-body > div.content > ul > li.left / li.right */ /* — Order page upsell card — */ .store-promoted-product ul.features li, .upsell-ox_productivity ul.features li, .store-promoted-product ul.features li::before, .upsell-ox_productivity ul.features li::before { color: #ffffff !important; } /* Upsell card description paragraph and h4 — also on dark bg */ .store-promoted-product .col-sm-9 p, .upsell-ox_productivity .col-sm-9 p { color: #e0e0e0 !important; } .store-promoted-product .col-sm-9 h4, .upsell-ox_productivity .col-sm-9 h4 { color: #ffffff !important; } /* — Dashboard "Recommended for you" promo-banner feature list — */ .promo-banner .content ul li.left, .promo-banner .content ul li.right, .promo-banner .content ul li.left::before, .promo-banner .content ul li.right::before { color: #ffffff !important; } /* === 38. Form controls — text readability on dark theme (P2) === Two root causes (confirmed by inspector): (a) input.form-control: theme sets color:var(--tp-theme-primary) = #216CE2 (blue typed text) (b) select.form-control.custom-select: Bootstrap default rgb(73,80,87) near-black — both render invisible or odd on dark navy backgrounds. Also covers placeholder text, focus rings, and native