/* ===================================================================== TechHaus Host palette option for the Prohost template Activates only when the tag carries data-theme="techhaus". Remove that attribute (or set data-theme="prohost") to fall back to the default Prohost green/orange. Palette (from the original techhaushostnew / supreme-host theme): navy #0f3051 gold #ffd200 cyan #01a2d2 ===================================================================== */ /* ---- Bigger logo (applies regardless of palette) ---- */ .logo-bar { padding: 16px 0; } .logo-bar .main-logo img { max-height: 66px !important; } .footer-logo a.logo img { max-height: 56px !important; } .popup-mobile-menu .inner .popup-mobile-menu-header .logo img { max-height: 46px !important; } html[data-theme="techhaus"] { --color-primary: 15, 48, 81; /* navy #0f3051 */ --color-primary-dark: 10, 35, 56; /* navy #0a2338 */ --color-secondary: 255, 210, 0; /* gold #ffd200 */ --color-secondary-dark: 230, 189, 0; /* gold #e6bd00 */ --th-cyan: 1, 162, 210; /* cyan #01a2d2 */ } /* ---- Signature CTA buttons: gold face, navy text (the old "Order Now" look) ---- */ html[data-theme="techhaus"] .theme-btn, html[data-theme="techhaus"] .theme-btn.one, html[data-theme="techhaus"] .plan-btn, html[data-theme="techhaus"] .plan-one .plan-btn { background: rgb(var(--color-secondary)) !important; color: #0f3051 !important; font-weight: 600; } html[data-theme="techhaus"] .theme-btn:hover, html[data-theme="techhaus"] .theme-btn.one:hover, html[data-theme="techhaus"] .plan-btn:hover { background: rgb(var(--color-secondary-dark)) !important; color: #0f3051 !important; } /* ---- Secondary buttons: navy face, white text ---- */ html[data-theme="techhaus"] .theme-btn.two { background: rgb(var(--color-primary)) !important; color: #fff !important; } html[data-theme="techhaus"] .theme-btn.two:hover { background: rgb(var(--color-primary-dark)) !important; color: #fff !important; } /* ---- Cyan link accents in the footer (echoes the old link color) ---- */ html[data-theme="techhaus"] .main-footer a:hover, html[data-theme="techhaus"] .footer-list a:hover { color: rgb(var(--th-cyan)) !important; } /* ---- Featured plan outline in gold ---- */ html[data-theme="techhaus"] .plan-homepage.popular, html[data-theme="techhaus"] .plan-one.featured { border-color: rgb(var(--color-secondary)) !important; } /* ---- Hero slider: uniform slide height + consistent illustration size across all slides ---- */ .swiper-homepage .swiper-slide { display: flex; align-items: center; min-height: 380px; /* uniform height so the slider doesn't resize as it rotates */ box-sizing: border-box; } .swiper-homepage .swiper-slide > .row { width: 100%; margin: 0; } .swiper-homepage .swiper-slide > a { display: block; width: 100%; } /* every illustration is capped to the same height and centered, regardless of its native size */ .swiper-homepage .swiper-slide img.img-fluid { display: block; width: auto; height: auto; max-width: 100%; max-height: 340px; margin: 0 auto; } @media (max-width: 991px) { .swiper-homepage .swiper-slide { min-height: 0; } .swiper-homepage .swiper-slide img.img-fluid { max-height: 240px; } .swiper-homepage .swiper-pagination { position: static; margin-top: 14px; } .swiper-homepage .swiper-slide .banner-heading { text-align: center; } .swiper-homepage .swiper-slide .banner-heading .inline-btns { justify-content: center; } } /* ===== Unified footer (matches the WHMCS portal + techhaushost.com design) ===== */ html[data-theme="techhaus"] .main-footer { background: #0b2338; background: linear-gradient(180deg, #0c2439 0%, #08192b 100%); } html[data-theme="techhaus"] .legal-bar { background: #061019; } /* partner logo strip */ .main-footer .footer-partners { padding-bottom: 1.75rem; margin-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); } .main-footer .footer-partners img { max-height: 68px; width: auto; } /* headings with gold underline */ .main-footer .footer-list h4, .main-footer .footer-about h4 { color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: .5rem; position: relative; } .main-footer .footer-list h4::after, .main-footer .footer-about h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: rgb(var(--color-secondary)); } /* link columns + gold arrow bullets */ .main-footer .footer-list ul { list-style: none; padding-left: 0; margin-bottom: 0; } .main-footer .footer-list ul li { margin-bottom: .5rem; } .main-footer .footer-list ul li a { position: relative; padding-left: 18px; color: #cdd8e5; } .main-footer .footer-list ul li a::before { content: "\25B8"; color: rgb(var(--color-secondary)); position: absolute; left: 2px; top: 1px; font-size: .8em; } .main-footer .footer-list ul li a:hover { color: rgb(var(--color-secondary)); } /* column 1: logo, tagline, contact, social */ .main-footer .footer-about .footer-logo { max-height: 54px; width: auto; margin-bottom: 1rem; } .main-footer .footer-about .footer-tagline { color: #aab9c9; font-size: .9rem; line-height: 1.7; margin-bottom: 1.25rem; } .main-footer .footer-contact { list-style: none; padding-left: 0; margin: 0 0 1.25rem; } .main-footer .footer-contact li { display: flex; align-items: flex-start; margin-bottom: .85rem; font-size: .9rem; color: #cdd8e5; } .main-footer .footer-contact .fc-icon { flex: 0 0 auto; width: 32px; height: 32px; margin-right: 12px; border-radius: 6px; background: rgb(var(--color-secondary)); color: #0f3051; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .main-footer .footer-contact a { color: rgb(var(--color-secondary)); word-break: break-word; } .main-footer .footer-social a { display: inline-block; margin-right: 8px; } .main-footer .footer-social img { width: 34px; height: 34px; } /* bottom legal bar */ .legal-bar { padding: 16px 0; } .legal-bar .copy-right-text { color: #8ea2b5; font-size: .85rem; } .legal-bar .footer-legal-links a { color: #cdd8e5; font-size: .85rem; padding: 0 10px; border-left: 1px solid rgba(255,255,255,.2); } .legal-bar .footer-legal-links a:first-child { border-left: 0; } .legal-bar .footer-legal-links a:hover { color: rgb(var(--color-secondary)); } /* ---- Header -> WHMCS navy gradient (lighter blue of the logo area), with light logo ---- */ html[data-theme="techhaus"] .topbar { background: #0d3862 !important; background: linear-gradient(180deg, #0d3862 0%, #164571 100%) !important; border-bottom: 1px solid rgba(255,255,255,.12); } html[data-theme="techhaus"] .topbar .top-bar-support li a, html[data-theme="techhaus"] .topbar .top-bar-support li a span, html[data-theme="techhaus"] .topbar .top-bar-dropdown > button { color: #dfe7ef !important; } /* phone/email icons in gold, matching the WHMCS portal top strip */ html[data-theme="techhaus"] .topbar .top-bar-support li a i { color: #ffd200 !important; } html[data-theme="techhaus"] .topbar .top-bar-support li a:hover span, html[data-theme="techhaus"] .topbar .top-bar-dropdown > button:hover { color: #ffd200 !important; } /* logo bar -> same navy gradient as the WHMCS logo area */ html[data-theme="techhaus"] .logo-bar { background: #0d3862; background: linear-gradient(180deg, #0d3862 0%, #164571 100%); } /* domain TLD prices -> light text on the navy logo bar */ html[data-theme="techhaus"] .logo-bar .domain-tld li .name { color: #ffffff; } html[data-theme="techhaus"] .logo-bar .domain-tld li .price { color: #cdd8e5; } html[data-theme="techhaus"] .logo-bar .form-domain-search-button, html[data-theme="techhaus"] .logo-bar .hamberger-button { color: #ffffff; }