/* =================================== */ /* Basic Style /* =================================== */ /* Brand font tags live in frontend/header.php's (a CSS @import here would block parallel downloading of the rest of this file). */ @import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Figtree&display=swap'); :root { --sh-primary: #0c2f55; --sh-primary-mid: #0f5e9d; --sh-primary-light: #418fce; --sh-primary-dark: #081f39; --sh-accent: #FF6C2C; --sh-accent-dark: #e85a1f; --sh-red: #d64545; --sh-red-dark: #b93a3a; --sh-green: #1f9d55; --sh-green-dark: #187d43; --sh-violet: #5b4fc4; --sh-violet-dark: #4a3fae; --sh-ink: #1e1d1c; --sh-muted: #6c757d; --sh-bg-soft: #f7f9fc; --sh-border: #e9ecf1; --sh-radius-sm: 8px; --sh-radius: 12px; --sh-radius-lg: 18px; --sh-shadow-sm: 0 2px 8px rgba(12, 47, 85, 0.06); --sh-shadow-md: 0 8px 24px rgba(12, 47, 85, 0.10); --sh-shadow-lg: 0 16px 40px rgba(12, 47, 85, 0.14); --sh-font-heading: "Cabin", "Space Grotesk", "Segoe UI", sans-serif; --sh-font-body: "Geomini", "Figtree", "Segoe UI", sans-serif; /* Spacing scale */ --sh-space-1: 8px; --sh-space-2: 12px; --sh-space-3: 16px; --sh-space-4: 24px; --sh-space-5: 32px; --sh-space-6: 48px; --sh-space-7: 64px; /* Type scale (desktop) */ --sh-h1-size: 48px; --sh-h2-size: 36px; --sh-h3-size: 28px; --sh-h4-size: 22px; --sh-body-size: 16px; --sh-small-size: 14px; } body, html { height: 100%; } body { background: #f5f5f5; font-size: 16px !important; line-height: 1.5; } form { padding: 0; margin: 0; display: inline; } img { vertical-align: inherit; } a:hover, a:focus { color: var(--sh-primary-mid); text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } a:active { color: var(--sh-primary-mid); text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } a:focus, a:active, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, button:focus, button:active { outline: none; } blockquote { border-left: 5px solid #eee; padding: 10px 20px; } iframe { border: 0 !important; } .lead { font-size: 1.3em; line-height: 1.8; } /*-------- Preloader --------*/ #preloader { position: fixed; z-index: 999999999 !important; background-color: #fff; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } #preloader [data-loader="dual-ring"] { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; display: inline-block; content: " "; display: block; margin: 1px; border-radius: 50%; border: 5px solid var(--sh-primary-mid); border-color: var(--sh-primary-mid) transparent var(--sh-primary-mid) transparent; animation: dual-ring 1.2s linear infinite; } @keyframes dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* =================================== */ /* Helpers Classes /* =================================== */ /* Box Shadow */ .shadow-md { -webkit-box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4); } /* Text Size (only the sizes actually referenced in templates) */ .text-3 { font-size: 16px !important; font-size: 1rem !important; } .text-4 { font-size: 18px !important; font-size: 1.125rem !important; } .text-9 { font-size: 36px !important; font-size: 2.25rem !important; } .text-12 { font-size: 48px !important; font-size: 3rem !important; } /* =================================== */ /* Layouts /* =================================== */ #main-wrapper { background: #f1f5f6; } .section { position: relative; padding: 104px 0; padding: 6.5rem 0; } @media only screen and (max-width: 768px) { .section { padding: 3.5rem 0; } } @media only screen and (min-width: 1200px) { .container { max-width: 1170px !important; } } /* =================================== */ /* Header /* =================================== */ #header { background: #fff; border-bottom: 1px solid #efefef; } #header .navbar { padding: 0px; } #header.bg-transparent { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; box-shadow: none; border-bottom: 1px solid rgba(250, 250, 250, 0.3); } #header .logo { position: relative; float: left; margin-right: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: stretch; align-self: stretch; } #header .header-row { position: relative; display: -webkit-box; display: -ms-flexbox; max-height: 100%; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; } #header .header-column { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: stretch; align-self: stretch; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #header .header-column .header-row { -webkit-box-pack: inherit; -ms-flex-pack: inherit; justify-content: inherit; } .primary-menu, .login-signup { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; height: auto !important; -webkit-box-ordinal-group: 0; -ms-flex-item-align: stretch; align-self: stretch; } .primary-menu.navbar, .login-signup.navbar { position: inherit; } .primary-menu ul.navbar-nav>li, .login-signup ul.navbar-nav>li { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .primary-menu ul.navbar-nav>li a, .login-signup ul.navbar-nav>li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .primary-menu ul.navbar-nav>li>a:not(.btn), .login-signup ul.navbar-nav>li>a:not(.btn) { height: 80px; padding-left: 0.85em; padding-right: 0.85em; color: #4c4d4d; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; position: relative; text-transform: uppercase; font-weight: 400; } .primary-menu ul.navbar-nav>li:hover>a:not(.btn), .primary-menu ul.navbar-nav>li.active>a:not(.btn), .login-signup ul.navbar-nav>li:hover>a:not(.btn), .login-signup ul.navbar-nav>li.active>a:not(.btn) { color: var(--sh-primary-mid); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu li>a:not(.btn), .login-signup ul.navbar-nav>li.dropdown .dropdown-menu li>a:not(.btn) { /* padding: 8px 0px; */ background-color: transparent; color: #777; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu li:hover>a:not(.btn), .login-signup ul.navbar-nav>li.dropdown .dropdown-menu li:hover>a:not(.btn) { color: var(--sh-primary-mid); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown:hover>a:after, .login-signup ul.navbar-nav>li.dropdown:hover>a:after { clear: both; content: ' '; display: block; width: 0; height: 0; border-style: solid; border-color: transparent transparent #fff transparent; position: absolute; border-width: 0px 7px 6px 7px; bottom: 0px; left: 50%; margin: 0 0 0 -5px; z-index: 1022; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu, .login-signup ul.navbar-nav>li.dropdown .dropdown-menu { -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176); border: 0px none; padding: 10px 15px; min-width: 230px; margin: 0; font-size: 14px; font-size: 0.875rem; z-index: 1021; } .primary-menu .dropdown-menu-right, .login-signup .dropdown-menu-right { left: auto !important; right: 100% !important; } .primary-menu ul.navbar-nav>li.dropdown-mega, .login-signup ul.navbar-nav>li.dropdown-mega { position: static; } .primary-menu ul.navbar-nav>li.dropdown-mega>.dropdown-menu, .login-signup ul.navbar-nav>li.dropdown-mega>.dropdown-menu { width: 100%; padding: 20px 20px; margin-left: 0px !important; } .primary-menu ul.navbar-nav>li.dropdown-mega .dropdown-mega-content>.row>div, .login-signup ul.navbar-nav>li.dropdown-mega .dropdown-mega-content>.row>div { padding: 5px 5px 5px 20px; border-right: 1px solid #eee; } .primary-menu ul.navbar-nav>li.dropdown-mega .dropdown-mega-content>.row>div:last-child, .login-signup ul.navbar-nav>li.dropdown-mega .dropdown-mega-content>.row>div:last-child { border-right: 0; } .primary-menu ul.navbar-nav>li.dropdown-mega .sub-title, .login-signup ul.navbar-nav>li.dropdown-mega .sub-title { display: block; font-size: 16px; margin-top: 1rem; padding-bottom: 5px; } .primary-menu ul.navbar-nav>li.dropdown-mega .dropdown-mega-submenu, .login-signup ul.navbar-nav>li.dropdown-mega .dropdown-mega-submenu { list-style-type: none; padding-left: 0px; } .primary-menu ul.navbar-nav>li a.btn, .login-signup ul.navbar-nav>li a.btn { font-size: 14px; padding: 0.65rem 2rem; text-transform: uppercase; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu .dropdown-menu, .login-signup ul.navbar-nav>li.dropdown .dropdown-menu .dropdown-menu { left: 100%; margin-top: -40px; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu .dropdown-toggle:after, .login-signup ul.navbar-nav>li.dropdown .dropdown-menu .dropdown-toggle:after { border-top: .4em solid transparent; border-right: 0; border-bottom: 0.4em solid transparent; border-left: 0.4em solid; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-toggle .arrow, .login-signup ul.navbar-nav>li.dropdown .dropdown-toggle .arrow { position: absolute; min-width: 30px; height: 100%; right: 0px; top: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-toggle .arrow:after, .login-signup ul.navbar-nav>li.dropdown .dropdown-toggle .arrow:after { content: " "; position: absolute; top: 50%; left: 50%; border-color: #000; border-top: 1px solid; border-right: 1px solid; width: 6px; height: 6px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .primary-menu .dropdown-toggle:after, .login-signup .dropdown-toggle:after { content: none; } .dropdown-menu { -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176); border: 0px none; font-size: 14px; font-size: 0.875rem; } @media (min-width: 992px) { .navbar-toggler { display: none; } .primary-menu ul.navbar-nav>li+li { margin-left: 2px; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu li:hover>a:not(.btn) { margin-left: 5px; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu li:hover>a .arrow { right: -3px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown>.dropdown-toggle .arrow { display: none; } .primary-menu ul.navbar-nav>li.dropdown-mega .sub-title:first-child { margin-top: 0px; } } @media (max-width: 991px) { /* Mobile Menu Button */ .navbar-toggler { width: 25px; height: 30px; padding: 10px; margin: 18px 10px; position: relative; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; /* display: block; */ } .navbar-toggler span { display: block; position: absolute; height: 2px; width: 100%; background: #3c3636; border-radius: 2px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .navbar-toggler span:nth-child(1) { top: 6px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .navbar-toggler span:nth-child(2) { top: 12px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .navbar-toggler span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .navbar-toggler.open span:nth-child(1) { top: 5px; left: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .navbar-toggler.open span:nth-child(2) { width: 0%; opacity: 0; } .navbar-toggler.open span:nth-child(3) { top: 21px; left: 4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #header .primary-menu { position: absolute; top: 99%; right: 0; left: 0; background: transparent; margin-top: 0px; z-index: 1000; } #header .primary-menu:before { content: ''; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background: #fff; z-index: -1; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } #header .primary-menu>div { overflow: hidden; overflow-y: auto; max-height: 65vh; margin: 18px 0; } .primary-menu ul.navbar-nav li { display: block; border-bottom: 1px solid #eee; margin: 0; padding: 0; } .primary-menu ul.navbar-nav li:last-child { border: none; } .primary-menu ul.navbar-nav li.dropdown>.dropdown-toggle>.arrow.open:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li>a:not(.btn) { height: auto; padding: 8px 0; position: relative; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu li>a:not(.btn) { padding: 8px 0; position: relative; } .primary-menu ul.navbar-nav>li.dropdown:hover>a:after { content: none; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-toggle .arrow:after { -webkit-transform: translate(-50%, -50%) rotate(134deg); transform: translate(-50%, -50%) rotate(134deg); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu { margin: 0; -webkit-box-shadow: none; box-shadow: none; border: none; padding: 0px 0px 0px 15px; } .primary-menu ul.navbar-nav>li.dropdown .dropdown-menu .dropdown-menu { margin: 0; } .primary-menu ul.navbar-nav>li.dropdown-mega .dropdown-mega-content>.row>div { padding: 0px 15px; } } @media (max-width: 767px) { .login-signup ul.navbar-nav>li a.btn { padding: 0.65rem 0.8rem; } } /* =================================== */ /* Elements /* =================================== */ /* Featured Box */ .featured-box { box-sizing: border-box; margin-left: auto; margin-right: auto; position: relative; } .featured-box h3, .featured-box h4 { font-size: 1.25rem; font-size: 20px; margin-bottom: 10px; font-weight: 500; } .featured-box:not(.style-5) .featured-box-icon { display: inline-block; font-size: 40px; height: 45px; line-height: 45px; padding: 0; width: 45px; margin-top: 0; margin-bottom: 20px; color: #4c4d4d; border-radius: 0; } /* Accordion & Toggle */ .accordion .card { border: none; margin-bottom: 8px; margin-bottom: 0.5rem; background-color: transparent; } .accordion .card-header { padding: 0; border: none; background: none; } .accordion .card-header a { font-size: 16px; font-weight: normal; padding: 1rem 1.25rem 1rem 2.25rem; display: block; border-radius: 4px; position: relative; } .accordion:not(.accordion-alternate) .card-header a { background-color: var(--sh-primary-mid); color: #fff; } .accordion:not(.accordion-alternate) .card-header a.collapsed { background-color: #f1f2f4; color: #4c4d4d; } .accordion .card-header a:before { position: absolute; content: " "; left: 20px; top: calc(50% + 2px); width: 9px; height: 9px; border-color: #CCC; border-top: 2px solid; border-right: 2px solid; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .accordion .card-header a.collapsed:before { top: calc(50% - 2px); -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } .accordion .card-body { line-height: 26px; padding: 1rem 0 1rem 2.25rem; } /* Brands Grid */ .brands-grid { overflow: hidden; } .brands-grid>.row>div { padding-top: 20px; padding-bottom: 20px; } .brands-grid.separator-border>.row>div:after, .brands-grid.separator-border>.row>div:before { content: ''; position: absolute; } .brands-grid.separator-border>.row>div:after { width: 100%; height: 0; top: auto; left: 0; bottom: -1px; border-bottom: 1px dotted #e0dede; } .brands-grid.separator-border>.row>div:before { height: 100%; top: 0; left: -1px; border-left: 1px dotted #e0dede; } .brands-grid>.row>div a { opacity: 0.7; color: #444; } .brands-grid>.row>div a:hover { opacity: 1; color: var(--sh-primary-mid); } /* Banner */ .banner .item { position: relative; } .banner .item img { vertical-align: middle; } .banner .caption { position: absolute; z-index: 2; bottom: 0; width: 100%; padding: 15px 20px; } .banner .caption h2, .banner .caption h3 { font-size: 19px; color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .banner .caption p { color: rgba(250, 250, 250, 0.8); margin-bottom: 0px; } .banner .rounded .banner-mask, .banner .rounded img { border-radius: .25rem; } .banner .banner-mask { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; backface-visibility: hidden; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6)); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), black); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.01), black); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), black); opacity: 0.7; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .banner .item:hover .banner-mask { opacity: 0.95; filter: alpha(opacity=95); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .banner.style-2 .caption { background: rgba(0, 0, 0, 0.5); } .banner.style-2 .banner-mask { opacity: 0; } .banner.style-2 .item:hover .banner-mask { opacity: 0.40; } .banner.style-2 .item:hover .caption h2 { margin-left: 8px; } /* Back to Top */ #back-to-top { display: none; position: fixed; z-index: 1030; bottom: 8px; right: 10px; background-color: rgba(0, 0, 0, 0.2); text-align: center; color: #fff; font-size: 16px; width: 36px; height: 36px; line-height: 36px; border-radius: 0.25rem; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } #back-to-top:hover { background-color: var(--sh-primary-mid); -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media (max-width: 575px) { #back-to-top { z-index: 1029; } } /* =================================== */ /* Extras /* =================================== */ /* Bootstrap Specific */ .form-control, .custom-select { border-color: #dae1e3; font-size: 16px; color: #656565; } .form-control:not(.form-control-sm) { padding: .810rem .96rem; height: inherit; } select.form-control:not([size]):not([multiple]):not(.form-control-sm) { height: auto; padding-top: .700rem; padding-bottom: .700rem; } .custom-select:not(.custom-select-sm) { height: calc(3.05rem + 2px); padding-top: .700rem; padding-bottom: .700rem; } .custom-select:not(.custom-select-sm).border-0 { height: 3.00rem; } .form-control:focus, .custom-select:focus { -webkit-box-shadow: 0 0 5px rgba(128, 189, 255, 0.5); box-shadow: 0 0 5px rgba(128, 189, 255, 0.5); } .form-control:focus[readonly] { box-shadow: none; } .form-control::-webkit-input-placeholder { color: #b1b4b6; } .form-control:-moz-placeholder { /* FF 4-18 */ color: #b1b4b6; } .form-control::-moz-placeholder { /* FF 19+ */ color: #b1b4b6; } .form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder { /* IE 10+ */ color: #b1b4b6; } .btn { padding: .8rem 2rem; font-weight: 500; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .btn-sm { padding: 0.5rem 1rem; } .btn:not(.btn-link) { -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } .btn:not(.btn-link):hover { -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .input-group-append .btn, .input-group-prepend .btn { -webkit-box-shadow: none; box-shadow: none; padding-left: 0.75rem; padding-right: 0.75rem; } .input-group-append .btn:hover, .input-group-prepend .btn:hover { -webkit-box-shadow: none; box-shadow: none; } @media (max-width: 575px) { .btn:not(.btn-sm) { padding: .810rem 1rem; } .input-group>.input-group-append>.btn, .input-group>.input-group-prepend>.btn { padding: 0 0.75rem; } } .bg-primary, .badge-primary { background-color: var(--sh-primary-mid) !important; } .bg-secondary { background-color: var(--sh-muted) !important; } .text-primary, .btn-light, .btn-outline-light:hover, .btn-link { color: var(--sh-primary-mid) !important; } .btn-link:hover { color: var(--sh-primary-mid) !important; } .text-secondary { color: var(--sh-muted) !important; } .text-muted { color: #8e9a9d !important; } .text-light { color: #dee3e4 !important; } a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover { background-color: var(--sh-primary-mid) !important; } .border-primary { border-color: var(--sh-primary-mid) !important; } .border-secondary { border-color: var(--sh-muted) !important; } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--sh-primary, #0c2f55); border-color: var(--sh-primary, #0c2f55); } .btn-primary:not(:disabled):not(.disabled).active:hover, .btn-primary:not(:disabled):not(.disabled):active:hover { background-color: var(--sh-primary, #0c2f55); border-color: var(--sh-primary, #0c2f55); } .btn-secondary { background-color: var(--sh-muted); border-color: var(--sh-muted); } .btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active { color: var(--sh-primary-mid); border-color: var(--sh-primary-mid); } .btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover { background-color: var(--sh-primary-mid); border-color: var(--sh-primary-mid); color: #fff; } .progress-bar, .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .dropdown-item.active, .dropdown-item:active { background-color: var(--sh-primary-mid); } .page-item.active .page-link, .custom-radio .custom-control-input:checked~.custom-control-label:before, .custom-control-input:checked~.custom-control-label::before, .custom-checkbox .custom-control-input:checked~.custom-control-label:before, .custom-control-input:checked~.custom-control-label:before { background-color: var(--sh-primary-mid); border-color: var(--sh-primary-mid); } .list-group-item.active { background-color: var(--sh-primary-mid); border-color: var(--sh-primary-mid); } /* ---------- 2. transitionees.css ---------- */ .headingTitle { font-size: 40px; line-height: 52px; } @media screen and (max-width: 600px) { #title_message { visibility: hidden; clear: both; float: left; margin: 10px auto 5px 20px; width: 28%; color: #60656F; display: none; } } h1, h3, h4, h5, h6 { text-transform: capitalize; } .nav_background { background: #191935 !important; } .bg { background: linear-gradient(45deg, #082A8F, #000000), url('../../../static/frontend/images/final.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode: overlay; background-position: center; background-attachment: fixed; display: flex !important; align-items: center !important; /* Vertical center */ justify-content: center !important; /* Uncomment to center horizontally too */ min-height: 20vh !important; /* Full viewport height */ } .dropdown-menu a { color: #3f3f46; text-transform: capitalize !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px; line-height: 20px; font-weight: 400 !important; } .primary-menu ul.navbar-nav>li>a, ul.navbar-nav>li>a { color: #000000 !important; text-transform: capitalize !important; font-size: 15px; line-height: 20px; font-weight: 600 !important; } ul.navbar-nav>li>a:hover { color: #082A8F !important; } .bd { background: linear-gradient(45deg, #082A8F, #000000), url('../../../static/frontend/images/deno.jpg'); background-size: cover !important; background-repeat: no-repeat; background-blend-mode: darken; background-position: center; background-attachment: fixed; display: flex; align-items: center; /* Vertical center */ justify-content: center; /* Uncomment to center horizontally too */ min-height: 20vh; /* Full viewport height */ } .domainsServers { background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3)), url('https://salamahosting.com/static/frontend/images/final.jpg') !important; object-fit: cover; background-repeat: no-repeat; background-position: top center; background-size: cover !important; border: none !important; } .dropdown-menu { border-radius: var(--sh-radius-sm) !important; } .form-control, .input-group-prepend { display: block; float: none !important; box-sizing: border-box; width: 100% !important; height: 2.8375rem !important; margin: 0 0 1rem !important; padding: 0.5rem !important; border: 1px solid var(--sh-border) !important; border-radius: var(--sh-radius-sm) !important; background-color: #fefefe; box-shadow: var(--sh-shadow-sm) !important; font-family: inherit; font-size: 1rem; font-weight: 400; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } /* Inside a Bootstrap .input-group, the .form-control above must stay a flex item (auto width, no bottom margin) so it sits beside the prepend/append addon instead of dropping to its own line; grouped corners are squared off on the side touching the addon. */ .input-group>.form-control { width: 1% !important; margin-bottom: 0 !important; } .input-group>.form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .input-group>.form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; appearance: none; } .board { background-color: #ffffff !important; } .navbar-toggler { padding: 10px !important; border-radius: 0; cursor: pointer } /* ---------- 3. header.php inline styles (block 1) ---------- */ .border-rad { border-radius: 0.5rem !important; box-shadow: 2.5px 6px 0 #000 !important; } .input:focus, .form-control:focus { padding: 0.9rem 1rem; height: auto; font-size: 1rem; border-radius: 0.5rem !important; outline: none !important; transition: all 0.25s ease; } .card { box-shadow: var(--sh-shadow-sm) !important; border: 1px solid var(--sh-border) !important; border-radius: var(--sh-radius) !important; transition: box-shadow 0.25s ease, transform 0.25s ease; } .card:hover { box-shadow: var(--sh-shadow-lg) !important; transform: translateY(-2px); z-index: 999; } /* ---------- 3. header.php inline styles (block 2) ---------- */ .sticky-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 4px 2px -2px gray; } .footer li a { font-weight: 400 !important; line-height: 2.3 !important; } .footer a, .footer h2, .footer h4, .footer p { color: #ffffff !important; } @media screen and (max-width: 600px) { #title_message { visibility: hidden; clear: both; float: left; margin: 10px auto 5px 20px; width: 28%; color: #60656F; display: none; } } /* FAQ Section */ #faqAccordion .card { border: none; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } #faqAccordion .card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } /* Header */ #faqAccordion .card-header { background: #ffffff; border: none; padding: 0; } /* Buttons */ #faqAccordion .btn-link { width: 100%; text-align: left; padding: 18px 20px; font-weight: 600; font-size: 16px; color: var(--sh-primary, #0c2f55); text-decoration: none; position: relative; display: flex; justify-content: space-between; align-items: center; } /* Icon (plus/minus) */ #faqAccordion .btn-link::after { content: "+"; font-size: 20px; font-weight: bold; transition: transform 0.3s ease; } #faqAccordion .btn-link[aria-expanded="true"]::after { content: "-"; transform: rotate(180deg); } /* Body */ #faqAccordion .card-body { padding: 18px 20px; font-size: 15px; color: var(--sh-muted); line-height: 1.6; border-top: 1px solid #f1f1f1; background: #fafafa; } /* Optional: Smooth collapse animation */ .collapsing { transition: height 0.35s ease; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6, .headingTitle, .display-5, .headingTitles { font-family: var(--sh-font-heading); font-weight: 700; color: var(--sh-primary); } h1 { font-size: var(--sh-h1-size); } h2 { font-size: var(--sh-h2-size); } h3 { font-size: var(--sh-h3-size); font-weight: 600; } h4 { font-size: var(--sh-h4-size); font-weight: 600; } @media (max-width: 767px) { h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 22px; } h4 { font-size: 18px; } } body { font-size: var(--sh-body-size); } small, .small { font-size: var(--sh-small-size); } p, li, label, td, th, .lead { font-family: var(--sh-font-body); } a { color: var(--sh-primary-mid); } a:hover { color: var(--sh-accent); } /* ---------- Buttons (Bootstrap) ---------- */ .btn { font-family: var(--sh-font-body); font-weight: 400; border-radius: var(--sh-radius-sm); letter-spacing: 0.01em; transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background-color: var(--sh-primary-mid); border-color: var(--sh-primary-mid); } .btn-primary:hover { background-color: var(--sh-primary); border-color: var(--sh-primary); } .btn-dark { background-color: var(--sh-primary); border-color: var(--sh-primary); } .btn-dark:hover { background-color: var(--sh-primary-dark); border-color: var(--sh-primary-dark); } .btn-danger { background-color: var(--sh-accent); border-color: var(--sh-accent); } .btn-danger:hover { background-color: var(--sh-accent-dark); border-color: var(--sh-accent-dark); } .btn:focus, .btn.focus { box-shadow: 0 0 0 0.2rem rgba(15, 94, 157, 0.35); } .btn:disabled, .btn.disabled { transform: none; box-shadow: none; opacity: 0.65; } /* Loading state for AJAX submit buttons (add-to-cart, forms, etc.) — toggle this class from JS instead of writing bespoke per-page spinner markup. */ .btn-loading { color: transparent !important; pointer-events: none; position: relative; } .btn-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; animation: sh-spin 0.7s linear infinite; } /* ---------- Icon font (Semantic's icon class names, mapped onto the Font Awesome 5 Free glyphs already loaded locally). Deliberately does NOT set font-family/content on the bare `.icon` class, so it doesn't interfere with Devicon glyphs (`icon devicon-python-plain`), which style themselves via their own stylesheet. ---------- */ .icon { display: inline-block; font-style: normal; line-height: 1; vertical-align: middle; text-align: center; width: 1.18em; } .icon.large { font-size: 1.5em; } .icon.big { font-size: 1.25em; } .icon.small { font-size: 0.85em; } .icon.tiny { font-size: 0.7em; } .icon.huge { font-size: 2em; } .icon.red { color: var(--sh-red); } .icon.blue { color: var(--sh-primary-mid); } .icon.orange { color: var(--sh-accent); } .icon.black { color: var(--sh-primary); } .icon.green { color: var(--sh-green); } .icon.violet { color: var(--sh-violet); } .icon.circular { border-radius: 50%; width: 2em; height: 2em; line-height: 2em; background: var(--sh-bg-soft); } @keyframes sh-spin { to { transform: rotate(360deg); } } .icon.loading { animation: sh-spin 1.2s linear infinite; } /* Named glyphs actually used in application/views/**\/*.php, matched by compound class (order-independent) against Font Awesome 5 Free codepoints read directly from static/frontend/vendor/font-awesome/css/all.min.css. */ .icon.globe::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0ac"; } .icon.server::before { font: 900 1em "Font Awesome 5 Free"; content: "\f233"; } .icon.certificate::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0a3"; } .icon.cog::before { font: 900 1em "Font Awesome 5 Free"; content: "\f013"; } .icon.money.bill::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0d6"; } .icon.life.ring::before { font: 900 1em "Font Awesome 5 Free"; content: "\f1cd"; } .icon.envelope::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0e0"; } .icon.database::before { font: 900 1em "Font Awesome 5 Free"; content: "\f1c0"; } .icon.arrow.up::before { font: 900 1em "Font Awesome 5 Free"; content: "\f062"; } .icon.arrow.right::before { font: 900 1em "Font Awesome 5 Free"; content: "\f061"; } .icon.spinner::before { font: 900 1em "Font Awesome 5 Free"; content: "\f110"; } .icon.check.circle::before { font: 900 1em "Font Awesome 5 Free"; content: "\f058"; } .icon.check::before { font: 900 1em "Font Awesome 5 Free"; content: "\f00c"; } .icon.times::before { font: 900 1em "Font Awesome 5 Free"; content: "\f00d"; } .icon.warning::before { font: 900 1em "Font Awesome 5 Free"; content: "\f071"; } .icon.options::before { font: 900 1em "Font Awesome 5 Free"; content: "\f1de"; } .icon.plus::before { font: 900 1em "Font Awesome 5 Free"; content: "\f067"; } .icon.clock::before { font: 900 1em "Font Awesome 5 Free"; content: "\f017"; } .icon.calendar::before { font: 900 1em "Font Awesome 5 Free"; content: "\f133"; } .icon.recycle::before { font: 900 1em "Font Awesome 5 Free"; content: "\f1b8"; } .icon.home::before { font: 900 1em "Font Awesome 5 Free"; content: "\f015"; } .icon.search::before { font: 900 1em "Font Awesome 5 Free"; content: "\f002"; } .icon.external.link::before { font: 900 1em "Font Awesome 5 Free"; content: "\f35d"; } .icon.shopping.cart::before, .icon.cart::before { font: 900 1em "Font Awesome 5 Free"; content: "\f07a"; } .icon.shopping.basket::before { font: 900 1em "Font Awesome 5 Free"; content: "\f291"; } .icon.sign.in.circle::before { font: 900 1em "Font Awesome 5 Free"; content: "\f2f6"; } .icon.user.circle::before { font: 900 1em "Font Awesome 5 Free"; content: "\f2bd"; } .icon.user.plus::before { font: 900 1em "Font Awesome 5 Free"; content: "\f234"; } .icon.list::before { font: 900 1em "Font Awesome 5 Free"; content: "\f03a"; } .icon.bullhorn::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0a1"; } .icon.chat::before, .icon.feed::before { font: 900 1em "Font Awesome 5 Free"; content: "\f086"; } .icon.ticket::before { font: 900 1em "Font Awesome 5 Free"; content: "\f3ff"; } .icon.shekel.sign::before { font: 900 1em "Font Awesome 5 Free"; content: "\f20b"; } .icon.mobile.alternative::before { font: 900 1em "Font Awesome 5 Free"; content: "\f3cd"; } .icon.outline.envelope::before { font: 900 1em "Font Awesome 5 Free"; content: "\f0e0"; } /* ---------- Cards ---------- */ .card-header { font-family: var(--sh-font-heading); background: #fff; border-bottom: 1px solid var(--sh-border); } .card-footer { border-top: 1px solid var(--sh-border); } /* ---------- Header / navigation ---------- */ header#header .nav-link { font-family: var(--sh-font-body); font-weight: 400; font-size: 0.9rem; } /* Compact typography inside the nav dropdowns and mega menus. Dropdown item titles use raw h2/h4 tags, which render at full heading size regardless of the nav's own font-size, so they need their own override. */ .primary-menu .dropdown-menu { font-size: 0.9rem; } .dropdown-mega-content h2 { font-size: 1.3rem; } .dropdown-mega-submenu h4, .sub-title h4 { font-size: 0.95rem; font-weight: 400; margin-bottom: 0; } .dropdown-mega-content .ui.horizontal.divider { font-size: 0.85rem; } /* Mega-menu platform-logo icons (cPanel, Plesk, WordPress, etc.) */ .nav-mega-logo { width: 22px; } /* ---------- Page-specific section backgrounds ---------- Named for what they are rather than the legacy .mask/.homeBanner/ .footerTwo/.anotherMask names they replace. */ .section-navy-panel { background: #061a40 !important; border-bottom: 3px solid; border-image: linear-gradient(to right, #4285F4 25%, #000 75%) 5; } .section-hero-pattern { background: url('../../../static/frontend/images/head.png') !important; background-blend-mode: multiply; background-repeat: no-repeat; background-size: cover !important; } .section-support-banner { background: url('https://salamahosting.com/static/frontend/images/tera.png') !important; background-blend-mode: multiply; background-repeat: no-repeat; background-size: cover; } .section-stats-gradient { background: linear-gradient(135deg, #003c6b 0%, #5ba7d7 100%); opacity: 0.9; } /* Domain pricing table (application/models/domainModel.php::getDomainPricings()) builds this markup server-side, so the class name stays as-is rather than being renamed — this restores styling that was mistakenly deleted after an incomplete usage check missed the model-generated HTML. */ .domain-table { background-color: #fff; } .domain-table tr th { color: #003164 !important; font-weight: 700; text-align: left; padding: 1em 1em 0.5em !important; border: 0; } .domain-table tr td { padding: 1.6rem 1rem; font-weight: 400; background-color: #fff !important; border-bottom: 10px solid #fff; } .domain-table tr td:first-child { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .domain-table tr td:last-child { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } /* Replace the ad-hoc navy/gold hero background with the consolidated brand gradient. The original rule uses !important, so this must match. */ .hass { background-color: var(--sh-primary) !important; background-image: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-primary-mid) 100%) !important; } /* ---------- Footer ---------- */ .footer { background-color: #081125 !important; } .footer h2, .footer h3, .footer h4 { font-family: var(--sh-font-heading); color: #fff !important; } .footer a:hover { color: var(--sh-accent) !important; text-decoration: none; } /* Sitemap-style footer heading: compact, uppercase, slightly separated from the small links beneath it so a dense column still reads as organized. */ .footer-col-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff !important; margin-bottom: var(--sh-space-2); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } /* Small-font link list used to fit the site's full sitemap (hosting plans, domain tools, company/service pages, legal pages) into the footer without it becoming excessively tall. */ .footer-links { margin-bottom: 0; } .footer-links li { margin-bottom: 2px; } .footer-links a { font-size: 12.5px; line-height: 2 !important; color: rgba(255, 255, 255, 0.75) !important; transition: color 0.15s ease, padding-left 0.15s ease; } .footer-links a:hover { padding-left: 3px; } .footer-contact-list li { font-size: 13px; margin-bottom: 10px; } .footer-logo { margin: 0 auto; display: block; } /* Left-aligned variant for the brand block in the top strip (logo sits beside the contact column instead of centered in its own column). */ .footer-logo-inline { display: block; margin: 0 0 4px; } .footer-divider { border-top: 1px solid rgba(255, 255, 255, 0.1); margin: var(--sh-space-5) 0; } .footer-payments-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); } /* Quick-access row (Client Area / Create Account / Contact / Report Abuse), rendered as plain links instead of solid buttons to stay visually quiet. */ .footer-quicklinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .footer-quicklinks a { color: rgba(255, 255, 255, 0.85) !important; font-size: 13.5px; font-weight: 600; transition: color 0.15s ease; } .footer-quicklinks a:hover { color: var(--sh-accent) !important; text-decoration: none; } .footer-quicklinks-divider { color: rgba(255, 255, 255, 0.25); font-size: 10px; } .footer-payments-badge { max-height: 40px; } /* ---------- FAQ accordion ---------- */ #faqAccordion .btn-link[aria-expanded="true"], #faqAccordion .btn-link:hover { color: var(--sh-primary-mid); } /* Redesigned FAQ page: card-based accordion with a search bar and a left-accent + rotating chevron to mark the open question. */ .faq-count { font-size: var(--sh-small-size); } .faq-card { border-radius: var(--sh-radius-lg) !important; overflow: hidden; transition: box-shadow 0.2s ease; } .faq-card:hover { box-shadow: var(--sh-shadow-md) !important; } .faq-btn { background: #fff; border: none; border-left: 3px solid transparent; padding: 1.1rem 1.5rem; font-family: var(--sh-font-body); font-weight: 600; font-size: 1.02rem; color: var(--sh-primary-dark); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .faq-btn:hover, .faq-btn:focus { background: var(--sh-bg-soft); color: var(--sh-primary-mid); text-decoration: none; outline: none; } .faq-btn[aria-expanded="true"] { color: var(--sh-primary-mid); background: rgba(12, 47, 85, 0.05); border-left-color: var(--sh-primary-mid); } .faq-question-text { padding-right: 1rem; } .faq-chevron { color: var(--sh-muted); font-size: 0.85rem; flex-shrink: 0; transition: transform 0.2s ease, color 0.2s ease; } .faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--sh-primary-mid); } .faq-answer { padding: 0 1.5rem 1.25rem 1.5rem; line-height: 1.7; } .faq-empty-state { color: var(--sh-muted); } .faq-cta { background: #fff; border-radius: var(--sh-radius-lg); box-shadow: var(--sh-shadow-sm); } .faq-cta .faq-cta-icon { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(12, 47, 85, 0.06); color: var(--sh-primary-mid); font-size: 1.5rem; margin: 0 auto var(--sh-space-3); } /* Category quick-jump chips above the grouped FAQ sections. */ .faq-category-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .faq-category-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--sh-bg-soft); border: 1px solid var(--sh-border); border-radius: 50px; padding: 6px 14px; font-size: var(--sh-small-size); font-weight: 600; color: var(--sh-primary-dark); transition: background-color 0.15s ease, border-color 0.15s ease; } .faq-category-chip:hover { background: rgba(12, 47, 85, 0.08); border-color: var(--sh-primary-mid); color: var(--sh-primary-mid); text-decoration: none; } .faq-category-count { background: var(--sh-primary-mid); color: #fff; border-radius: 50px; font-size: 11px; font-weight: 700; padding: 1px 7px; } /* Each category's heading + its col-lg-6 grid of question cards. */ .faq-category-section { scroll-margin-top: 90px; } .faq-category-title { font-family: var(--sh-font-heading); font-weight: 700; color: var(--sh-primary-dark); padding-bottom: var(--sh-space-2); border-bottom: 2px solid var(--sh-border); } /* ---------- Forms (Bootstrap) ---------- */ .form-control { border-radius: var(--sh-radius-sm); border-color: var(--sh-border); } .form-control:focus { border-color: var(--sh-primary-mid); box-shadow: 0 0 0 0.2rem rgba(15, 94, 157, 0.2); } /* ---------- Hosting plan cards ---------- Shared by the 12 template_*_plans.php pages (cPanel, Plesk, DirectAdmin, WordPress, Joomla, Drupal, Concrete CMS, Magento, OpenCart, PrestaShop, phpBB, Moodle) — was previously a copy-pasted