/* ------------------------------------------ ------------------------------------------ ----- Variables ------------------------------------------ ------------------------------------------ */ :root { /* Primary color */ --color-primary-background: #df3626; --color-primary-background-gradient-top: #df3626; --color-primary-background-gradient-bottom: #df3626; --color-primary-background-border: #df7e37; --color-primary-background-shadow: #000; --color-primary-foreground: #fff; --color-primary-foreground-shadow: #000; /* Primary color - Active (used for hover/active states) */ --color-primary-active-background: #df3626; --color-primary-active-background-gradient-top: #df3626; --color-primary-active-background-gradient-bottom: #df3626; --color-primary-active-background-border: #df7e37; --color-primary-active-background-shadow: #dc8840; --color-primary-active-foreground: #fff; --color-primary-active-foreground-shadow: #000; /* Secondary color */ --color-secondary-background: #272a2f; --color-secondary-background-gradient-top: #272a2f; --color-secondary-background-gradient-bottom: #272a2f; --color-secondary-background-border: #000; --color-secondary-background-shadow: #3f3e3e; --color-secondary-foreground: #fff; --color-secondary-foreground-shadow: #000; /* Secondary color - Active (used for hover/active states) */ --color-secondary-active-background: #272a2f; --color-secondary-active-background-gradient-top: #272a2f; --color-secondary-active-background-gradient-bottom: #272a2f; --color-secondary-active-background-border: #000; --color-secondary-active-background-shadow: #3f3e3e; --color-secondary-active-foreground: #ffffff; --color-secondary-active-foreground-shadow: #000; /* Tertiary color */ --color-tertiary-background: #f5f5f5; --color-tertiary-background-gradient-top: #f5f5f5; --color-tertiary-background-gradient-bottom: #f5f5f5; --color-tertiary-background-border: #dddddd; --color-tertiary-background-shadow: #3f3e3e; --color-tertiary-foreground: #243141; --color-tertiary-foreground-shadow: #fff; /* Tertiary color - Active (used for hover/active states) */ --color-tertiary-active-background: #f5f5f5; --color-tertiary-active-background-gradient-top: #f5f5f5; --color-tertiary-active-background-gradient-bottom: #f5f5f5; --color-tertiary-active-background-border: #dddddd; --color-tertiary-active-background-shadow: #3f3e3e; --color-tertiary-active-foreground: #243141; --color-tertiary-active-foreground-shadow: #fff; /* Box color */ --color-box-background: #f3f3f3; --color-box-background-gradient-top: #f3f3f3; --color-box-background-gradient-bottom: #f3f3f3; --color-box-background-border: #e2e2e2; --color-box-background-shadow: #dddddd; --color-box-background-divider: #f1f1f1; --color-box-foreground: var(--color-body); --color-box-foreground-shadow: #fff; --color-box-foreground-bold: #243141; --color-box-foreground-bold-shadow: #fff; --color-box-head-background: #373b42; --color-box-head-background-gradient-top: #373b42; --color-box-head-background-gradient-bottom: #373b42; --color-box-head-background-border: #000; --color-box-head-foreground: #fff; --color-box-head-foreground-shadow: transparent; --color-box-head-foreground-bold: #fff; --color-box-head-foreground-bold-shadow: transparent; --color-box-footer-background: #f5f5f5; --color-box-footer-background-gradient-top: #f5f5f5; --color-box-footer-background-gradient-bottom: #f5f5f5; --color-box-footer-background-border: #f1f1f1; --color-box-footer-foreground: #585755; --color-box-footer-foreground-shadow: transparent; --color-box-footer-foreground-bold: #585755; --color-box-footer-foreground-bold-shadow: transparent; /* Box color - Active (used for hover/active states) */ --color-box-active-background: #f3f3f3; --color-box-active-background-gradient-top: #f3f3f3; --color-box-active-background-gradient-bottom: #f3f3f3; --color-box-active-background-border: #e2e2e2; --color-box-active-background-shadow: #dddddd; --color-box-active-background-divider: #f4f4f4; --color-box-active-foreground: var(--color-body); --color-box-active-foreground-shadow: #fff; --color-box-active-foreground-bold: #243141; --color-box-active-foreground-bold-shadow: #fff; --color-box-active-head-background: #373b42; --color-box-active-head-background-gradient-top: #373b42; --color-box-active-head-background-gradient-bottom: #373b42; --color-box-active-head-background-border: #000000; --color-box-active-head-foreground: #fff; --color-box-active-head-foreground-shadow: #000; --color-box-active-head-foreground-bold: #fff; --color-box-active-head-foreground-bold-shadow: #000; --color-box-active-footer-background: #dddddd; --color-box-active-footer-background-gradient-top: #dddddd; --color-box-active-footer-background-gradient-bottom: #dddddd; --color-box-active-footer-background-border: #cbcbcb; --color-box-active-footer-foreground: #3f3e3e; --color-box-active-footer-foreground-shadow: #3f3e3e; --color-box-active-footer-foreground-bold: #000; --color-box-active-footer-foreground-bold-shadow: #000; /* Badge - warning */ --color-badge-hot-background: #dc1010; --color-badge-hot-background-gradient-top: #dc1010; --color-badge-hot-background-gradient-bottom: #dc1010; --color-badge-hot-background-border: #dc1010; --color-badge-hot-foreground: #fff; /* Badge - new */ --color-badge-new-background: #45a523; --color-badge-new-background-gradient-top: #45a523; --color-badge-new-background-gradient-bottom: #45a523; --color-badge-new-background-border: #45a523; --color-badge-new-foreground: #fff; /* Badge - popular */ --color-badge-popular-background: #dc1010; --color-badge-popular-background-gradient-top: #dc1010; --color-badge-popular-background-gradient-bottom: #dc1010; --color-badge-popular-background-border: #dc1010; --color-badge-popular-foreground: #fff; /* Badge - free */ --color-badge-free-background: #15ace5; --color-badge-free-background-gradient-top: #15ace5; --color-badge-free-background-gradient-bottom: #15ace5; --color-badge-free-background-border: #15ace5; --color-badge-free-foreground: #fff; /* Default colors */ --background-body: #fff; /* Body background color */ --background-banner: #233141; /* Default background color for the banner */ --color-body: #373B42; /* Used for body text */ --color-heading: #DF3626; /* Used for heading text */ --color-white: #ffffff; --color-black: #222222; --color-border: #d2d2d2; --color-green: #43de04; --color-red: #dc1010; --color-grey: #cccccc; /* ---- Sizing ---- */ --container-width: 90%; /* Template container width */ --container-maxwidth: 1110px; /* Template container maximum width */ --logo-width: 225px; /* Set the max width of your logo */ --column-1: 100%; /* Width used per column as 1 column */ --column-2: 48%; /* Width used per column as 2 columns */ --column-3: 32%; /* Width used per column as 3 columns */ --column-4: 24.25%; /* Width used per column as 4 columns */ --column-5: 19.2%; /* Width used per column as 5 columns */ --column-6: 15.83%; /* Width used per column as 6 columns */ --spacing-parent: 50px; /* Used for the spacing of main elements (e,g feature boxes, tables, slideshow bottom margin) */ --spacing-child: 30px; /* Used for the spacing of child elements (e.g bottom margin of paragraths, headings) */ --spacing-inner: 25px; /* Used for padding on boxes */ --text-size: 1.6em; /* Default text size (1.6em = 16px) */ --text-lineheight: 1.6em; /* Default text line height */ --border-radius-default: 5px; /* Set the default border radius - used through the template such as for buttons */ --border-bottom-width-default: 1px; /* Set the bottom border of all elements. Using a higher value than 1px creates a 3D bevel effect */ /* ---- Fonts ---- */ --font-body: 'Open Sans', sans-serif; /* The font used for all text other than headings */ --font-heading: 'Roboto Condensed', sans-serif; /* The font used for headings */ /* ---- Misc ---- */ --shadow: 0 3px 8px 2px #999999; /* Default shadow color/spacing */ --gradient-degrees: 180deg; /* Set the angle for gradient colors */ /* ---- Settings ---- Instantly change various settings such as colors and spacing */ /* Universal */ --navmain-gradient-degrees: 180deg; /* Set the angle for gradient colors */ --navmain-border-radius: 5px; /* Set the default border radius - used through the menu such as for buttons */ --navmain-border-bottom-width: 3px; /* Set the bottom border of all elements. Using a higher value than 1px creates a 3D bevel effect */ --navmain-container-width: 1250px; /* Container width */ --navmain-font: 'Open Sans',Helvetica,sans-serif,Calibri; /* Set the fonts */ /* Header */ --navmain-logo-width: 225px; /* Set the max width of your logo */ --navmain-header-background: #fff; /* Set the header background color */ --navmain-header-padding: 7px; /* Set the spacing above and below the menu */ /* Highlight - Hot */ --navmain-highlight-hot-background: #dc1010; --navmain-highlight-hot-background-gradient-top: #dc1010; --navmain-highlight-hot-background-gradient-bottom: #dc1010; --navmain-highlight-hot-background-border: #dc1010; --navmain-highlight-hot-foreground: #fff; /* Highlight - New */ --navmain-highlight-new-background: #45a523; --navmain-highlight-new-background-gradient-top: #45a523; --navmain-highlight-new-background-gradient-bottom: #45a523; --navmain-highlight-new-background-border: #45a523; --navmain-highlight-new-foreground: #fff; /* ---- Header Design 1 - Used when the header design is set to 1 in Wizard Panel > Header ---- */ /* ---- Main Menu ---- */ --navmain-headerdesign1-height: 65px; --navmain-headerdesign1-background: transparent; --navmain-headerdesign1-background-gradient-top: transparent; --navmain-headerdesign1-background-gradient-bottom: transparent; --navmain-headerdesign1-background-border: transparent; /* Main Items */ --navmain-headerdesign1-home-foreground: var(--color-black); --navmain-headerdesign1-home-foreground-shadow: none; --navmain-headerdesign1-button-padding: 16px; --navmain-headerdesign1-button-background: transparent; --navmain-headerdesign1-button-background-gradient-top: transparent; --navmain-headerdesign1-button-background-gradient-bottom: transparent; --navmain-headerdesign1-button-background-border: transparent; --navmain-headerdesign1-button-foreground: var(--color-black); --navmain-headerdesign1-button-foreground-shadow: none; --navmain-headerdesign1-icon: "\f0da"; --navmain-headerdesign1-icon-foreground: var(--color-black); --navmain-headerdesign1-icon-foreground-shadow: none; /* Main Items (hover/active) */ --navmain-headerdesign1-home-hover-foreground: var(--color-white); --navmain-headerdesign1-home-hover-foreground-shadow: none; --navmain-headerdesign1-button-hover-background: var(--color-secondary-background); --navmain-headerdesign1-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign1-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign1-button-hover-background-border: transparent; --navmain-headerdesign1-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign1-button-hover-foreground-shadow: none; --navmain-headerdesign1-icon-hover: "\f0d7"; --navmain-headerdesign1-icon-hover-foreground: var(--color-white); --navmain-headerdesign1-icon-hover-foreground-shadow: none; /* CTA */ --navmain-headerdesign1-cta-padding: 16px; --navmain-headerdesign1-cta-background: var(--color-primary-background); --navmain-headerdesign1-cta-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign1-cta-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign1-cta-foreground: var(--color-primary-foreground); --navmain-headerdesign1-cta-foreground-shadow: var(--color-primary-foreground-shadow); /* CTA (hover) */ --navmain-headerdesign1-cta-hover-background: var(--color-primary-active-background); --navmain-headerdesign1-cta-hover-background-gradient-top: var(--color-primary-active-background-gradient-top); --navmain-headerdesign1-cta-hover-background-gradient-bottom: var(--color-primary-active-background-gradient-bottom); --navmain-headerdesign1-cta-hover-foreground: var(--color-primary-active-foreground); --navmain-headerdesign1-cta-hover-foreground-shadow: var(--color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --navmain-headerdesign1-megamenu-padding: 25px; --navmain-headerdesign1-megamenu-background: var(--color-box-background); --navmain-headerdesign1-megamenu-background-gradient-top: var(--color-box-background-gradient-top); --navmain-headerdesign1-megamenu-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-headerdesign1-megamenu-background-border: var(--color-secondary-background); --navmain-headerdesign1-megamenu-background-divider: var(--color-box-background-divider); --navmain-headerdesign1-megamenu-foreground: var(--color-box-foreground); --navmain-headerdesign1-megamenu-foreground-shadow: none; /* Mega Menu Items */ --navmain-headerdesign1-megamenu-button-margin: 15px 0; --navmain-headerdesign1-megamenu-button-padding: 15px; --navmain-headerdesign1-megamenu-button-background: var(--color-box-active-background); --navmain-headerdesign1-megamenu-button-background-gradient-top: var(--color-box-active-background-gradient-top); --navmain-headerdesign1-megamenu-button-background-gradient-bottom: var(--color-box-active-background-gradient-bottom); --navmain-headerdesign1-megamenu-button-background-border: var(--color-box-active-background-border); --navmain-headerdesign1-megamenu-button-foreground: var(--color-box-active-foreground-bold); --navmain-headerdesign1-megamenu-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-headerdesign1-megamenu-icon-spacing: 75px; --navmain-headerdesign1-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --navmain-headerdesign1-megamenu-button-hover-background: var(--color-secondary-background); --navmain-headerdesign1-megamenu-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign1-megamenu-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign1-megamenu-button-hover-background-border: var(--color-secondary-background-border); --navmain-headerdesign1-megamenu-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign1-megamenu-button-hover-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --navmain-headerdesign1-megamenu-button-active-background: var(--color-primary-background); --navmain-headerdesign1-megamenu-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign1-megamenu-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign1-megamenu-button-active-background-border: var(--color-primary-background-border); --navmain-headerdesign1-megamenu-button-active-foreground: var(--color-primary-foreground); --navmain-headerdesign1-megamenu-button-active-foreground-shadow: var(--color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --navmain-headerdesign1-width: 230px; --navmain-headerdesign1-dropdown-background: var(--color-box-background); --navmain-headerdesign1-dropdown-background-gradient-top: var(--color-box-background-gradient-top); --navmain-headerdesign1-dropdown-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-headerdesign1-dropdown-background-border: var(--color-secondary-background); /* Dropdown Items */ --navmain-headerdesign1-dropdown-button-padding: 12px; --navmain-headerdesign1-dropdown-button-background: transparent; --navmain-headerdesign1-dropdown-button-background-gradient-top: transparent; --navmain-headerdesign1-dropdown-button-background-gradient-bottom: transparent; --navmain-headerdesign1-dropdown-button-background-border: var(--color-box-background-border); --navmain-headerdesign1-dropdown-button-foreground: var(--color-box-active-foreground-bold); --navmain-headerdesign1-dropdown-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-headerdesign1-dropdown-icon: "\f061"; --navmain-headerdesign1-dropdown-icon-foreground: var(--color-black); --navmain-headerdesign1-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --navmain-headerdesign1-dropdown-button-hover-background: var(--color-secondary-background); --navmain-headerdesign1-dropdown-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign1-dropdown-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign1-dropdown-button-hover-background-border: var(--color-box-background-border); --navmain-headerdesign1-dropdown-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign1-dropdown-button-hover-foreground-shadow: none; --navmain-headerdesign1-dropdown-icon-hover: "\f061"; --navmain-headerdesign1-dropdown-icon-hover-foreground: var(--color-white); --navmain-headerdesign1-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --navmain-headerdesign1-dropdown-button-active-background: var(--color-primary-background); --navmain-headerdesign1-dropdown-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign1-dropdown-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign1-dropdown-button-active-background-border: var(--color-box-background-border); --navmain-headerdesign1-dropdown-button-active-foreground: var(--color-primary-foreground); --navmain-headerdesign1-dropdown-button-active-foreground-shadow: var(--color-primary-foreground-shadow); --navmain-headerdesign1-dropdown-icon-active: "\f061"; --navmain-headerdesign1-dropdown-icon-active-foreground: var(--color-white); --navmain-headerdesign1-dropdown-icon-active-foreground-shadow: none; /* ---- Main Menu - Mobile (Header Design 1) ---- */ /* Menu */ --navmain-mobile-headerdesign1-height: 50px; --navmain-mobile-headerdesign1-background: var(--color-black); --navmain-mobile-headerdesign1-background-gradient-top: var(--color-black); --navmain-mobile-headerdesign1-background-gradient-bottom: var(--color-black); --navmain-mobile-headerdesign1-background-border: var(--color-border); --navmain-mobile-headerdesign1-icon-burger: "\f0c9"; --navmain-mobile-headerdesign1-icon-burger-active: "\f0c9"; /* Main Items */ --navmain-mobile-headerdesign1-home-foreground: var(--color-white); --navmain-mobile-headerdesign1-home-foreground-shadow: none; --navmain-mobile-headerdesign1-button-padding: 16px; --navmain-mobile-headerdesign1-button-background: transparent; --navmain-mobile-headerdesign1-button-background-gradient-top: transparent; --navmain-mobile-headerdesign1-button-background-gradient-bottom: transparent; --navmain-mobile-headerdesign1-button-background-border: var(--color-border); --navmain-mobile-headerdesign1-button-foreground: var(--color-white); --navmain-mobile-headerdesign1-button-foreground-shadow: none; --navmain-mobile-headerdesign1-icon: "\f078"; --navmain-mobile-headerdesign1-icon-foreground: var(--color-white); --navmain-mobile-headerdesign1-icon-foreground-shadow: none; /* Main Items (hover/active) */ --navmain-mobile-headerdesign1-home-hover-foreground: var(--color-white); --navmain-mobile-headerdesign1-home-hover-foreground-shadow: none; --navmain-mobile-headerdesign1-button-hover-background: var(--color-secondary-background); --navmain-mobile-headerdesign1-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-mobile-headerdesign1-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-mobile-headerdesign1-button-hover-background-border: var(--color-border); --navmain-mobile-headerdesign1-button-hover-foreground: var(--color-secondary-foreground); --navmain-mobile-headerdesign1-button-hover-foreground-shadow: transparent; --navmain-mobile-headerdesign1-icon-hover: "\f2d1"; --navmain-mobile-headerdesign1-icon-hover-foreground: var(--color-white); --navmain-mobile-headerdesign1-icon-hover-foreground-shadow: none; /* CTA */ --navmain-mobile-headerdesign1-cta-padding: 16px; --navmain-mobile-headerdesign1-cta-background: var(--color-primary-background); --navmain-mobile-headerdesign1-cta-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign1-cta-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign1-cta-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign1-cta-foreground-shadow: var(--color-primary-foreground-shadow); /* CTA (hover) */ --navmain-mobile-headerdesign1-cta-hover-background: var(--color-primary-active-background); --navmain-mobile-headerdesign1-cta-hover-background-gradient-top: var(--color-primary-active-background-gradient-top); --navmain-mobile-headerdesign1-cta-hover-background-gradient-bottom: var(--color-primary-active-background-gradient-bottom); --navmain-mobile-headerdesign1-cta-hover-foreground: var(--color-primary-active-foreground); --navmain-mobile-headerdesign1-cta-hover-foreground-shadow: var(--color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --navmain-mobile-headerdesign1-megamenu-padding: 15px; --navmain-mobile-headerdesign1-megamenu-background: var(--color-box-background); --navmain-mobile-headerdesign1-megamenu-background-gradient-top: var(--color-box-background-gradient-top); --navmain-mobile-headerdesign1-megamenu-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-mobile-headerdesign1-megamenu-background-border: var(--color-box-background-border); --navmain-mobile-headerdesign1-megamenu-background-divider: var(--color-box-background-divider); --navmain-mobile-headerdesign1-megamenu-foreground: var(--color-box-foreground); --navmain-mobile-headerdesign1-megamenu-foreground-shadow: none; /* Mega Menu Items */ --navmain-mobile-headerdesign1-megamenu-button-margin: 10px 0; --navmain-mobile-headerdesign1-megamenu-button-padding: 15px; --navmain-mobile-headerdesign1-megamenu-button-background: var(--color-box-active-background); --navmain-mobile-headerdesign1-megamenu-button-background-gradient-top: var(--color-box-active-background-gradient-top); --navmain-mobile-headerdesign1-megamenu-button-background-gradient-bottom: var(--color-box-active-background-gradient-bottom); --navmain-mobile-headerdesign1-megamenu-button-background-border: var(--color-box-active-background-border); --navmain-mobile-headerdesign1-megamenu-button-foreground: var(--color-box-active-foreground-bold); --navmain-mobile-headerdesign1-megamenu-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-mobile-headerdesign1-megamenu-icon-spacing: 75px; --navmain-mobile-headerdesign1-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --navmain-mobile-headerdesign1-megamenu-button-hover-background: var(--color-secondary-background); --navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-mobile-headerdesign1-megamenu-button-hover-background-border: var(--color-secondary-background-border); --navmain-mobile-headerdesign1-megamenu-button-hover-foreground: var(--color-secondary-foreground); --navmain-mobile-headerdesign1-megamenu-button-hover-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --navmain-mobile-headerdesign1-megamenu-button-active-background: var(--color-primary-background); --navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign1-megamenu-button-active-background-border: var(--color-primary-background-border); --navmain-mobile-headerdesign1-megamenu-button-active-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign1-megamenu-button-active-foreground-shadow: var(--color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --navmain-mobile-headerdesign1-dropdown-background: var(--color-box-background); --navmain-mobile-headerdesign1-dropdown-background-gradient-top: var(--color-box-background-gradient-top); --navmain-mobile-headerdesign1-dropdown-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-mobile-headerdesign1-dropdown-background-border: var(--color-secondary-background); /* Dropdown Items */ --navmain-mobile-headerdesign1-dropdown-button-padding: 12px; --navmain-mobile-headerdesign1-dropdown-button-background: transparent; --navmain-mobile-headerdesign1-dropdown-button-background-gradient-top: transparent; --navmain-mobile-headerdesign1-dropdown-button-background-gradient-bottom: transparent; --navmain-mobile-headerdesign1-dropdown-button-background-border: var(--color-border); --navmain-mobile-headerdesign1-dropdown-button-foreground: var(--color-white); --navmain-mobile-headerdesign1-dropdown-button-foreground-shadow: var(--color-black); --navmain-mobile-headerdesign1-dropdown-icon: "\f061"; --navmain-mobile-headerdesign1-dropdown-icon-foreground: var(--color-white); --navmain-mobile-headerdesign1-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --navmain-mobile-headerdesign1-dropdown-button-hover-background: var(--color-secondary-background); --navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-mobile-headerdesign1-dropdown-button-hover-background-border: var(--color-box-background-border); --navmain-mobile-headerdesign1-dropdown-button-hover-foreground: var(--color-secondary-foreground); --navmain-mobile-headerdesign1-dropdown-button-hover-foreground-shadow: none; --navmain-mobile-headerdesign1-dropdown-icon-hover: "\f061"; --navmain-mobile-headerdesign1-dropdown-icon-hover-foreground: var(--color-white); --navmain-mobile-headerdesign1-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --navmain-mobile-headerdesign1-dropdown-button-active-background: var(--color-primary-background); --navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign1-dropdown-button-active-background-border: var(--color-box-background-border); --navmain-mobile-headerdesign1-dropdown-button-active-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign1-dropdown-button-active-foreground-shadow: var(--color-primary-foreground-shadow); --navmain-mobile-headerdesign1-dropdown-icon-active: "\f061"; --navmain-mobile-headerdesign1-dropdown-icon-active-foreground: var(--color-white); --navmain-mobile-headerdesign1-dropdown-icon-active-foreground-shadow: none; /* ---- Header Design 2 - Used when the header design is set to 2 in Wizard Panel > Header ---- */ /* ---- Main Menu ---- */ --navmain-headerdesign2-height: 65px; --navmain-headerdesign2-background: var(--color-black); --navmain-headerdesign2-background-gradient-top: var(--color-black); --navmain-headerdesign2-background-gradient-bottom: var(--color-black); --navmain-headerdesign2-background-border: var(--color-border); /* Main Items */ --navmain-headerdesign2-home-foreground: var(--color-white); --navmain-headerdesign2-home-foreground-shadow: none; --navmain-headerdesign2-button-padding: 16px; --navmain-headerdesign2-button-background: transparent; --navmain-headerdesign2-button-background-gradient-top: transparent; --navmain-headerdesign2-button-background-gradient-bottom: transparent; --navmain-headerdesign2-button-background-border: transparent; --navmain-headerdesign2-button-foreground: var(--color-white); --navmain-headerdesign2-button-foreground-shadow: none; --navmain-headerdesign2-icon: "\f0da"; --navmain-headerdesign2-icon-foreground: var(--color-white); --navmain-headerdesign2-icon-foreground-shadow: none; /* Main Items (hover/active) */ --navmain-headerdesign2-home-hover-foreground: var(--color-white); --navmain-headerdesign2-home-hover-foreground-shadow: none; --navmain-headerdesign2-button-hover-background: var(--color-secondary-background); --navmain-headerdesign2-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign2-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign2-button-hover-background-border: transparent; --navmain-headerdesign2-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign2-button-hover-foreground-shadow: none; --navmain-headerdesign2-icon-hover: "\f0d7"; --navmain-headerdesign2-icon-hover-foreground: var(--color-white); --navmain-headerdesign2-icon-hover-foreground-shadow: none; /* CTA */ --navmain-headerdesign2-cta-padding: 16px; --navmain-headerdesign2-cta-background: var(--color-primary-background); --navmain-headerdesign2-cta-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign2-cta-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign2-cta-foreground: var(--color-primary-foreground); --navmain-headerdesign2-cta-foreground-shadow: var(--color-primary-foreground-shadow); /* CTA (hover) */ --navmain-headerdesign2-cta-hover-background: var(--color-primary-active-background); --navmain-headerdesign2-cta-hover-background-gradient-top: var(--color-primary-active-background-gradient-top); --navmain-headerdesign2-cta-hover-background-gradient-bottom: var(--color-primary-active-background-gradient-bottom); --navmain-headerdesign2-cta-hover-foreground: var(--color-primary-active-foreground); --navmain-headerdesign2-cta-hover-foreground-shadow: var(--color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --navmain-headerdesign2-megamenu-padding: 25px; --navmain-headerdesign2-megamenu-background: var(--color-box-background); --navmain-headerdesign2-megamenu-background-gradient-top: var(--color-box-background-gradient-top); --navmain-headerdesign2-megamenu-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-headerdesign2-megamenu-background-border: var(--color-secondary-background); --navmain-headerdesign2-megamenu-background-divider: var(--color-box-background-divider); --navmain-headerdesign2-megamenu-foreground: var(--color-box-foreground); --navmain-headerdesign2-megamenu-foreground-shadow: none; /* Mega Menu Items */ --navmain-headerdesign2-megamenu-button-margin: 15px 0; --navmain-headerdesign2-megamenu-button-padding: 15px; --navmain-headerdesign2-megamenu-button-background: var(--color-box-active-background); --navmain-headerdesign2-megamenu-button-background-gradient-top: var(--color-box-active-background-gradient-top); --navmain-headerdesign2-megamenu-button-background-gradient-bottom: var(--color-box-active-background-gradient-bottom); --navmain-headerdesign2-megamenu-button-background-border: var(--color-box-active-background-border); --navmain-headerdesign2-megamenu-button-foreground: var(--color-box-active-foreground-bold); --navmain-headerdesign2-megamenu-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-headerdesign2-megamenu-icon-spacing: 75px; --navmain-headerdesign2-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --navmain-headerdesign2-megamenu-button-hover-background: var(--color-secondary-background); --navmain-headerdesign2-megamenu-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign2-megamenu-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign2-megamenu-button-hover-background-border: var(--color-secondary-background-border); --navmain-headerdesign2-megamenu-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign2-megamenu-button-hover-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --navmain-headerdesign2-megamenu-button-active-background: var(--color-primary-background); --navmain-headerdesign2-megamenu-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign2-megamenu-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign2-megamenu-button-active-background-border: var(--color-primary-background-border); --navmain-headerdesign2-megamenu-button-active-foreground: var(--color-primary-foreground); --navmain-headerdesign2-megamenu-button-active-foreground-shadow: var(--color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --navmain-headerdesign2-width: 230px; --navmain-headerdesign2-dropdown-background: var(--color-box-background); --navmain-headerdesign2-dropdown-background-gradient-top: var(--color-box-background-gradient-top); --navmain-headerdesign2-dropdown-background-gradient-bottom: var(--color-box-background-gradient-bottom); --navmain-headerdesign2-dropdown-background-border: var(--color-secondary-background); /* Dropdown Items */ --navmain-headerdesign2-dropdown-button-padding: 12px; --navmain-headerdesign2-dropdown-button-background: transparent; --navmain-headerdesign2-dropdown-button-background-gradient-top: transparent; --navmain-headerdesign2-dropdown-button-background-gradient-bottom: transparent; --navmain-headerdesign2-dropdown-button-background-border: var(--color-box-background-border); --navmain-headerdesign2-dropdown-button-foreground: var(--color-box-active-foreground-bold); --navmain-headerdesign2-dropdown-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-headerdesign2-dropdown-icon: "\f061"; --navmain-headerdesign2-dropdown-icon-foreground: var(--color-black); --navmain-headerdesign2-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --navmain-headerdesign2-dropdown-button-hover-background: var(--color-secondary-background); --navmain-headerdesign2-dropdown-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-headerdesign2-dropdown-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-headerdesign2-dropdown-button-hover-background-border: var(--color-box-background-border); --navmain-headerdesign2-dropdown-button-hover-foreground: var(--color-secondary-foreground); --navmain-headerdesign2-dropdown-button-hover-foreground-shadow: none; --navmain-headerdesign2-dropdown-icon-hover: "\f061"; --navmain-headerdesign2-dropdown-icon-hover-foreground: var(--color-white); --navmain-headerdesign2-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --navmain-headerdesign2-dropdown-button-active-background: var(--color-primary-background); --navmain-headerdesign2-dropdown-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-headerdesign2-dropdown-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-headerdesign2-dropdown-button-active-background-border: var(--color-box-background-border); --navmain-headerdesign2-dropdown-button-active-foreground: var(--color-primary-foreground); --navmain-headerdesign2-dropdown-button-active-foreground-shadow: var(--color-primary-foreground-shadow); --navmain-headerdesign2-dropdown-icon-active: "\f061"; --navmain-headerdesign2-dropdown-icon-active-foreground: var(--color-white); --navmain-headerdesign2-dropdown-icon-active-foreground-shadow: none; /* ---- Main Menu - Mobile (Header Design 2) ---- */ /* Menu */ --navmain-mobile-headerdesign2-height: 50px; --navmain-mobile-headerdesign2-background: var(--color-black); --navmain-mobile-headerdesign2-background-gradient-top: var(--color-black); --navmain-mobile-headerdesign2-background-gradient-bottom: var(--color-black); --navmain-mobile-headerdesign2-background-border: var(--color-border); --navmain-mobile-headerdesign2-icon-burger: "\f0c9"; --navmain-mobile-headerdesign2-icon-burger-active: "\f0c9"; /* Main Items */ --navmain-mobile-headerdesign2-home-foreground: var(--color-white); --navmain-mobile-headerdesign2-home-foreground-shadow: none; --navmain-mobile-headerdesign2-button-padding: 16px; --navmain-mobile-headerdesign2-button-background: transparent; --navmain-mobile-headerdesign2-button-background-gradient-top: transparent; --navmain-mobile-headerdesign2-button-background-gradient-bottom: transparent; --navmain-mobile-headerdesign2-button-background-border: var(--color-border); --navmain-mobile-headerdesign2-button-foreground: var(--color-white); --navmain-mobile-headerdesign2-button-foreground-shadow: none; --navmain-mobile-headerdesign2-icon: "\f078"; --navmain-mobile-headerdesign2-icon-foreground: var(--color-white); --navmain-mobile-headerdesign2-icon-foreground-shadow: none; /* Main Items (hover/active) */ --navmain-mobile-headerdesign2-home-hover-foreground: var(--color-white); --navmain-mobile-headerdesign2-home-hover-foreground-shadow: none; --navmain-mobile-headerdesign2-button-hover-background: transparent; --navmain-mobile-headerdesign2-button-hover-background-gradient-top: transparent; --navmain-mobile-headerdesign2-button-hover-background-gradient-bottom: transparent; --navmain-mobile-headerdesign2-button-hover-background-border: var(--color-border); --navmain-mobile-headerdesign2-button-hover-foreground: var(--color-primary-background); --navmain-mobile-headerdesign2-button-hover-foreground-shadow: transparent; --navmain-mobile-headerdesign2-icon-hover: "\f2d1"; --navmain-mobile-headerdesign2-icon-hover-foreground: var(--color-primary-background); --navmain-mobile-headerdesign2-icon-hover-foreground-shadow: none; /* CTA */ --navmain-mobile-headerdesign2-cta-padding: 16px; --navmain-mobile-headerdesign2-cta-background: var(--color-primary-background); --navmain-mobile-headerdesign2-cta-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign2-cta-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign2-cta-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign2-cta-foreground-shadow: var(--color-primary-foreground-shadow); /* CTA (hover) */ --navmain-mobile-headerdesign2-cta-hover-background: var(--color-primary-active-background); --navmain-mobile-headerdesign2-cta-hover-background-gradient-top: var(--color-primary-active-background-gradient-top); --navmain-mobile-headerdesign2-cta-hover-background-gradient-bottom: var(--color-primary-active-background-gradient-bottom); --navmain-mobile-headerdesign2-cta-hover-foreground: var(--color-primary-active-foreground); --navmain-mobile-headerdesign2-cta-hover-foreground-shadow: var(--color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --navmain-mobile-headerdesign2-megamenu-padding: 15px; --navmain-mobile-headerdesign2-megamenu-background: transparent; --navmain-mobile-headerdesign2-megamenu-background-gradient-top: transparent; --navmain-mobile-headerdesign2-megamenu-background-gradient-bottom: transparent; --navmain-mobile-headerdesign2-megamenu-background-border: transparent; --navmain-mobile-headerdesign2-megamenu-background-divider: var(--color-box-background-divider); --navmain-mobile-headerdesign2-megamenu-foreground: var(--color-box-foreground); --navmain-mobile-headerdesign2-megamenu-foreground-shadow: none; /* Mega Menu Items */ --navmain-mobile-headerdesign2-megamenu-button-margin: 10px 0; --navmain-mobile-headerdesign2-megamenu-button-padding: 15px; --navmain-mobile-headerdesign2-megamenu-button-background: var(--color-box-active-background); --navmain-mobile-headerdesign2-megamenu-button-background-gradient-top: var(--color-box-active-background-gradient-top); --navmain-mobile-headerdesign2-megamenu-button-background-gradient-bottom: var(--color-box-active-background-gradient-bottom); --navmain-mobile-headerdesign2-megamenu-button-background-border: var(--color-box-active-background-border); --navmain-mobile-headerdesign2-megamenu-button-foreground: var(--color-box-active-foreground-bold); --navmain-mobile-headerdesign2-megamenu-button-foreground-shadow: var(--color-box-active-foreground-shadow); --navmain-mobile-headerdesign2-megamenu-icon-spacing: 75px; --navmain-mobile-headerdesign2-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --navmain-mobile-headerdesign2-megamenu-button-hover-background: var(--color-secondary-background); --navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-mobile-headerdesign2-megamenu-button-hover-background-border: var(--color-secondary-background-border); --navmain-mobile-headerdesign2-megamenu-button-hover-foreground: var(--color-secondary-foreground); --navmain-mobile-headerdesign2-megamenu-button-hover-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --navmain-mobile-headerdesign2-megamenu-button-active-background: var(--color-primary-background); --navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign2-megamenu-button-active-background-border: var(--color-primary-background-border); --navmain-mobile-headerdesign2-megamenu-button-active-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign2-megamenu-button-active-foreground-shadow: var(--color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --navmain-mobile-headerdesign2-dropdown-background: transparent; --navmain-mobile-headerdesign2-dropdown-background-gradient-top: transparent; --navmain-mobile-headerdesign2-dropdown-background-gradient-bottom: transparent; --navmain-mobile-headerdesign2-dropdown-background-border: transparent; /* Dropdown Items */ --navmain-mobile-headerdesign2-dropdown-button-padding: 12px; --navmain-mobile-headerdesign2-dropdown-button-background: transparent; --navmain-mobile-headerdesign2-dropdown-button-background-gradient-top: transparent; --navmain-mobile-headerdesign2-dropdown-button-background-gradient-bottom: transparent; --navmain-mobile-headerdesign2-dropdown-button-background-border: var(--color-border); --navmain-mobile-headerdesign2-dropdown-button-foreground: var(--color-white); --navmain-mobile-headerdesign2-dropdown-button-foreground-shadow: var(--color-black); --navmain-mobile-headerdesign2-dropdown-icon: "\f061"; --navmain-mobile-headerdesign2-dropdown-icon-foreground: var(--color-white); --navmain-mobile-headerdesign2-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --navmain-mobile-headerdesign2-dropdown-button-hover-background: var(--color-secondary-background); --navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-top: var(--color-secondary-background-gradient-top); --navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-bottom: var(--color-secondary-background-gradient-bottom); --navmain-mobile-headerdesign2-dropdown-button-hover-background-border: var(--color-box-background-border); --navmain-mobile-headerdesign2-dropdown-button-hover-foreground: var(--color-secondary-foreground); --navmain-mobile-headerdesign2-dropdown-button-hover-foreground-shadow: none; --navmain-mobile-headerdesign2-dropdown-icon-hover: "\f061"; --navmain-mobile-headerdesign2-dropdown-icon-hover-foreground: var(--color-white); --navmain-mobile-headerdesign2-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --navmain-mobile-headerdesign2-dropdown-button-active-background: var(--color-primary-background); --navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-top: var(--color-primary-background-gradient-top); --navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-bottom: var(--color-primary-background-gradient-bottom); --navmain-mobile-headerdesign2-dropdown-button-active-background-border: var(--color-box-background-border); --navmain-mobile-headerdesign2-dropdown-button-active-foreground: var(--color-primary-foreground); --navmain-mobile-headerdesign2-dropdown-button-active-foreground-shadow: var(--color-primary-foreground-shadow); --navmain-mobile-headerdesign2-dropdown-icon-active: "\f061"; --navmain-mobile-headerdesign2-dropdown-icon-active-foreground: var(--color-white); --navmain-mobile-headerdesign2-dropdown-icon-active-foreground-shadow: none; /* ---- WHMCS Steps - Displayed on the cart page of WHMCS ---- */ /* Header Design 1 */ --whmcs-cartsteps-headerdesign1-foreground: var(--color-black); --whmcs-cartsteps-headerdesign1-foreground-shadow: transparent; --whmcs-cartsteps-headerdesign1-button-active-background: var(--color-secondary-background); --whmcs-cartsteps-headerdesign1-button-active-background-gradient-top: var(--color-secondary-background); --whmcs-cartsteps-headerdesign1-button-active-background-gradient-bottom: var(--color-secondary-background); --whmcs-cartsteps-headerdesign1-button-active-foreground: var(--color-secondary-foreground); --whmcs-cartsteps-headerdesign1-button-active-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mobile */ --whmcs-cartsteps-mobile-headerdesign1-foreground: var(--color-white); --whmcs-cartsteps-mobile-headerdesign1-foreground-shadow: transparent; --whmcs-cartsteps-mobile-headerdesign1-button-active-background: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign1-button-active-background-gradient-top: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign1-button-active-background-gradient-bottom: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign1-button-active-foreground: var(--color-secondary-foreground); --whmcs-cartsteps-mobile-headerdesign1-button-active-foreground-shadow: var(--color-secondary-foreground-shadow); /* Header Design 2 */ --whmcs-cartsteps-headerdesign2-foreground: var(--color-white); --whmcs-cartsteps-headerdesign2-foreground-shadow: transparent; --whmcs-cartsteps-headerdesign2-button-active-background: var(--color-secondary-background); --whmcs-cartsteps-headerdesign2-button-active-background-gradient-top: var(--color-secondary-background); --whmcs-cartsteps-headerdesign2-button-active-background-gradient-bottom: var(--color-secondary-background); --whmcs-cartsteps-headerdesign2-button-active-foreground: var(--color-secondary-foreground); --whmcs-cartsteps-headerdesign2-button-active-foreground-shadow: var(--color-secondary-foreground-shadow); /* Mobile */ --whmcs-cartsteps-mobile-headerdesign2-foreground: var(--color-white); --whmcs-cartsteps-mobile-headerdesign2-foreground-shadow: transparent; --whmcs-cartsteps-mobile-headerdesign2-button-active-background: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign2-button-active-background-gradient-top: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign2-button-active-background-gradient-bottom: var(--color-secondary-background); --whmcs-cartsteps-mobile-headerdesign2-button-active-foreground: var(--color-secondary-foreground); --whmcs-cartsteps-mobile-headerdesign2-button-active-foreground-shadow: var(--color-secondary-foreground-shadow);