/* ============================================================ shell-parity.css — Phase 2 global shell port Source: the real, verified anysls.com header/footer/mega-menu CSS, copied from the EN/AR Journal reference project's assets/css/ (read-only reference). Every custom property below is namespaced --enshell-* so it cannot collide with or override any existing token in tokens.css/base.css/ components.css/svc-*.css. Do not edit the reference project; edit this file only. ============================================================ */ /* ---- from variables-original.css ---- */ /* ------------------------------------------ ------------------------------------------ ----- Variables ------------------------------------------ ------------------------------------------ */ :root { /* Primary color */ --enshell-color-primary-background: #2ab867; --enshell-color-primary-background-gradient-top: #2ab867; --enshell-color-primary-background-gradient-bottom: #2ab867; --enshell-color-primary-background-border: #249d58; --enshell-color-primary-background-shadow: #000; --enshell-color-primary-foreground: #fff; --enshell-color-primary-foreground-shadow: #000; /* Primary color - Active (used for hover/active states) */ --enshell-color-primary-active-background: #209e56; --enshell-color-primary-active-background-gradient-top: #209e56; --enshell-color-primary-active-background-gradient-bottom: #209e56; --enshell-color-primary-active-background-border: #249d58; --enshell-color-primary-active-background-shadow: #dc8840; --enshell-color-primary-active-foreground: #fff; --enshell-color-primary-active-foreground-shadow: #000; /* Secondary color */ --enshell-color-secondary-background: #6ca1e1; --enshell-color-secondary-background-gradient-top: #6ca1e1; --enshell-color-secondary-background-gradient-bottom: #6ca1e1; --enshell-color-secondary-background-border: #5c89bf; --enshell-color-secondary-background-shadow: #3f3e3e; --enshell-color-secondary-foreground: #fff; --enshell-color-secondary-foreground-shadow: #000; /* Secondary color - Active (used for hover/active states) */ --enshell-color-secondary-active-background: #4d83d4; --enshell-color-secondary-active-background-gradient-top: #4d83d4; --enshell-color-secondary-active-background-gradient-bottom: #4d83d4; --enshell-color-secondary-active-background-border: #5c89bf; --enshell-color-secondary-active-background-shadow: #3f3e3e; --enshell-color-secondary-active-foreground: #fff; --enshell-color-secondary-active-foreground-shadow: #000; /* Tertiary color */ --enshell-color-tertiary-background: #f5f5f5; --enshell-color-tertiary-background-gradient-top: #f5f5f5; --enshell-color-tertiary-background-gradient-bottom: #f5f5f5; --enshell-color-tertiary-background-border: #dddddd; --enshell-color-tertiary-background-shadow: #3f3e3e; --enshell-color-tertiary-foreground: #243141; --enshell-color-tertiary-foreground-shadow: #fff; /* Tertiary color - Active (used for hover/active states) */ --enshell-color-tertiary-active-background: #f5f5f5; --enshell-color-tertiary-active-background-gradient-top: #f5f5f5; --enshell-color-tertiary-active-background-gradient-bottom: #f5f5f5; --enshell-color-tertiary-active-background-border: #dddddd; --enshell-color-tertiary-active-background-shadow: #3f3e3e; --enshell-color-tertiary-active-foreground: #243141; --enshell-color-tertiary-active-foreground-shadow: #fff; /* Box color */ --enshell-color-box-background: #ffffff; --enshell-color-box-background-gradient-top: #ffffff; --enshell-color-box-background-gradient-bottom: #ffffff; --enshell-color-box-background-border: #6ca1e1; --enshell-color-box-background-shadow: #dddddd; --enshell-color-box-background-divider: #f4f4f4; --enshell-color-box-foreground: var(--enshell-color-body); --enshell-color-box-foreground-shadow: #fff; --enshell-color-box-foreground-bold: #243141; --enshell-color-box-foreground-bold-shadow: #fff; --enshell-color-box-head-background: #6ca1e1; --enshell-color-box-head-background-gradient-top: #6ca1e1; --enshell-color-box-head-background-gradient-bottom: #6ca1e1; --enshell-color-box-head-background-border: #dddddd; --enshell-color-box-head-foreground: #fff; --enshell-color-box-head-foreground-shadow: #000; --enshell-color-box-head-foreground-bold: #fff; --enshell-color-box-head-foreground-bold-shadow: #000; --enshell-color-box-footer-background: #dddddd; --enshell-color-box-footer-background-gradient-top: #dddddd; --enshell-color-box-footer-background-gradient-bottom: #dddddd; --enshell-color-box-footer-background-border: #cbcbcb; --enshell-color-box-footer-foreground: #3f3e3e; --enshell-color-box-footer-foreground-shadow: #3f3e3e; --enshell-color-box-footer-foreground-bold: #000; --enshell-color-box-footer-foreground-bold-shadow: #000; /* Box color - Active (used for hover/active states) */ --enshell-color-box-active-background: #d7d6d6; --enshell-color-box-active-background-gradient-top: #d7d6d6; --enshell-color-box-active-background-gradient-bottom: #d7d6d6; --enshell-color-box-active-background-border: #6ca1e1; --enshell-color-box-active-background-shadow: #a9aaac; --enshell-color-box-active-background-divider: #d0cece; --enshell-color-box-active-foreground: var(--enshell-color-body); --enshell-color-box-active-foreground-shadow: #fff; --enshell-color-box-active-foreground-bold: #243141; --enshell-color-box-active-foreground-bold-shadow: #fff; --enshell-color-box-active-head-background: var(--enshell-color-primary-background); --enshell-color-box-active-head-background-gradient-top: var(--enshell-color-primary-background); --enshell-color-box-active-head-background-gradient-bottom: var(--enshell-color-primary-background); --enshell-color-box-active-head-background-border: #dddddd; --enshell-color-box-active-head-foreground: var(--enshell-color-primary-foreground); --enshell-color-box-active-head-foreground-shadow: var(--enshell-color-primary-foreground-shadow); --enshell-color-box-active-head-foreground-bold: transparent; --enshell-color-box-active-head-foreground-bold-shadow: transparent; --enshell-color-box-active-footer-background: #c4c2c2; --enshell-color-box-active-footer-background-gradient-top: #c4c2c2; --enshell-color-box-active-footer-background-gradient-bottom: #c4c2c2; --enshell-color-box-active-footer-background-border: #908f8f; --enshell-color-box-active-footer-foreground: #3f3e3e; --enshell-color-box-active-footer-foreground-shadow: #3f3e3e; --enshell-color-box-active-footer-foreground-bold: #000; --enshell-color-box-active-footer-foreground-bold-shadow: transparent; /* Badge - warning */ --enshell-color-badge-hot-background: #dc1010; --enshell-color-badge-hot-background-gradient-top: #dc1010; --enshell-color-badge-hot-background-gradient-bottom: #dc1010; --enshell-color-badge-hot-background-border: #dc1010; --enshell-color-badge-hot-foreground: #fff; /* Badge - new */ --enshell-color-badge-new-background: #45a523; --enshell-color-badge-new-background-gradient-top: #45a523; --enshell-color-badge-new-background-gradient-bottom: #45a523; --enshell-color-badge-new-background-border: #45a523; --enshell-color-badge-new-foreground: #fff; /* Badge - popular */ --enshell-color-badge-popular-background: #dc1010; --enshell-color-badge-popular-background-gradient-top: #dc1010; --enshell-color-badge-popular-background-gradient-bottom: #dc1010; --enshell-color-badge-popular-background-border: #dc1010; --enshell-color-badge-popular-foreground: #fff; /* Badge - free */ --enshell-color-badge-free-background: #15ace5; --enshell-color-badge-free-background-gradient-top: #15ace5; --enshell-color-badge-free-background-gradient-bottom: #15ace5; --enshell-color-badge-free-background-border: #15ace5; --enshell-color-badge-free-foreground: #fff; /* Default colors */ --enshell-background-body: #e2f2fd; /* Body background color */ --enshell-background-banner: #696969; /* Default background color for the banner */ --enshell-color-body: #696969; /* Used for body text */ --enshell-color-heading: #243141; /* Used for heading text */ --enshell-color-white: #fff; --enshell-color-black: #51400e; --enshell-color-border: #98adc2; --enshell-color-green: #43de04; --enshell-color-red: #dc1010; --enshell-color-grey: #cccccc; /* ---- Sizing ---- */ --enshell-container-width: 90%; /* Template container width */ --enshell-container-maxwidth: 1250px; /* Template container maximum width */ --enshell-logo-width: 225px; /* Set the max width of your logo */ --enshell-column-1: 100%; /* Width used per column as 1 column */ --enshell-column-2: 48%; /* Width used per column as 2 columns */ --enshell-column-3: 32%; /* Width used per column as 3 columns */ --enshell-column-4: 24.25%; /* Width used per column as 4 columns */ --enshell-column-5: 19.2%; /* Width used per column as 5 columns */ --enshell-column-6: 15.83%; /* Width used per column as 6 columns */ --enshell-spacing-parent: 50px; /* Used for the spacing of main elements (e,g feature boxes, tables, slideshow bottom margin) */ --enshell-spacing-child: 30px; /* Used for the spacing of child elements (e.g bottom margin of paragraths, headings) */ --enshell-spacing-inner: 25px; /* Used for padding on boxes */ --enshell-text-size: 1.6em; /* Default text size (1.6em = 16px) */ --enshell-text-lineheight: 1.6em; /* Default text line height */ --enshell-border-radius-default: 5px; /* Set the default border radius - used through the template such as for buttons */ --enshell-border-bottom-width-default: 3px; /* Set the bottom border of all elements. Using a higher value than 1px creates a 3D bevel effect */ /* ---- Fonts ---- */ --enshell-font-body: 'Open Sans', sans-serif; /* The font used for all text other than headings */ --enshell-font-heading: 'Roboto Condensed', sans-serif; /* The font used for headings */ /* ---- Misc ---- */ --enshell-shadow: 0 3px 8px 2px #999999; /* Default shadow color/spacing */ --enshell-gradient-degrees: 180deg; /* Set the angle for gradient colors */ /* ---- Settings ---- Instantly change various settings such as colors and spacing */ /* Universal */ --enshell-navmain-gradient-degrees: 180deg; /* Set the angle for gradient colors */ --enshell-navmain-border-radius: 5px; /* Set the default border radius - used through the menu such as for buttons */ --enshell-navmain-border-bottom-width: 3px; /* Set the bottom border of all elements. Using a higher value than 1px creates a 3D bevel effect */ --enshell-navmain-container-width: 1250px; /* Container width */ --enshell-navmain-font: 'Open Sans',Helvetica,sans-serif,Calibri; /* Set the fonts */ /* Header */ --enshell-navmain-logo-width: 225px; /* Set the max width of your logo */ --enshell-navmain-header-background: #fff; /* Set the header background color */ --enshell-navmain-header-padding: 7px; /* Set the spacing above and below the menu */ /* Highlight - Hot */ --enshell-navmain-highlight-hot-background: #dc1010; --enshell-navmain-highlight-hot-background-gradient-top: #dc1010; --enshell-navmain-highlight-hot-background-gradient-bottom: #dc1010; --enshell-navmain-highlight-hot-background-border: #dc1010; --enshell-navmain-highlight-hot-foreground: #fff; /* Highlight - New */ --enshell-navmain-highlight-new-background: #45a523; --enshell-navmain-highlight-new-background-gradient-top: #45a523; --enshell-navmain-highlight-new-background-gradient-bottom: #45a523; --enshell-navmain-highlight-new-background-border: #45a523; --enshell-navmain-highlight-new-foreground: #fff; /* ---- Header Design 1 - Used when the header design is set to 1 in Wizard Panel > Header ---- */ /* ---- Main Menu ---- */ --enshell-navmain-headerdesign1-height: 65px; --enshell-navmain-headerdesign1-background: transparent; --enshell-navmain-headerdesign1-background-gradient-top: transparent; --enshell-navmain-headerdesign1-background-gradient-bottom: transparent; --enshell-navmain-headerdesign1-background-border: transparent; /* Main Items */ --enshell-navmain-headerdesign1-home-foreground: var(--enshell-color-black); --enshell-navmain-headerdesign1-home-foreground-shadow: none; --enshell-navmain-headerdesign1-button-padding: 16px; --enshell-navmain-headerdesign1-button-background: transparent; --enshell-navmain-headerdesign1-button-background-gradient-top: transparent; --enshell-navmain-headerdesign1-button-background-gradient-bottom: transparent; --enshell-navmain-headerdesign1-button-background-border: transparent; --enshell-navmain-headerdesign1-button-foreground: var(--enshell-color-black); --enshell-navmain-headerdesign1-button-foreground-shadow: none; --enshell-navmain-headerdesign1-icon: "\f0da"; --enshell-navmain-headerdesign1-icon-foreground: var(--enshell-color-black); --enshell-navmain-headerdesign1-icon-foreground-shadow: none; /* Main Items (hover/active) */ --enshell-navmain-headerdesign1-home-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign1-home-hover-foreground-shadow: none; --enshell-navmain-headerdesign1-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign1-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign1-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign1-button-hover-background-border: transparent; --enshell-navmain-headerdesign1-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign1-button-hover-foreground-shadow: none; --enshell-navmain-headerdesign1-icon-hover: "\f0d7"; --enshell-navmain-headerdesign1-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign1-icon-hover-foreground-shadow: none; /* CTA */ --enshell-navmain-headerdesign1-cta-padding: 16px; --enshell-navmain-headerdesign1-cta-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign1-cta-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign1-cta-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign1-cta-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign1-cta-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* CTA (hover) */ --enshell-navmain-headerdesign1-cta-hover-background: var(--enshell-color-primary-active-background); --enshell-navmain-headerdesign1-cta-hover-background-gradient-top: var(--enshell-color-primary-active-background-gradient-top); --enshell-navmain-headerdesign1-cta-hover-background-gradient-bottom: var(--enshell-color-primary-active-background-gradient-bottom); --enshell-navmain-headerdesign1-cta-hover-foreground: var(--enshell-color-primary-active-foreground); --enshell-navmain-headerdesign1-cta-hover-foreground-shadow: var(--enshell-color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --enshell-navmain-headerdesign1-megamenu-padding: 25px; --enshell-navmain-headerdesign1-megamenu-background: var(--enshell-color-box-background); --enshell-navmain-headerdesign1-megamenu-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-headerdesign1-megamenu-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-headerdesign1-megamenu-background-border: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign1-megamenu-background-divider: var(--enshell-color-box-background-divider); --enshell-navmain-headerdesign1-megamenu-foreground: var(--enshell-color-box-foreground); --enshell-navmain-headerdesign1-megamenu-foreground-shadow: none; /* Mega Menu Items */ --enshell-navmain-headerdesign1-megamenu-button-margin: 15px 0; --enshell-navmain-headerdesign1-megamenu-button-padding: 15px; --enshell-navmain-headerdesign1-megamenu-button-background: var(--enshell-color-box-active-background); --enshell-navmain-headerdesign1-megamenu-button-background-gradient-top: var(--enshell-color-box-active-background-gradient-top); --enshell-navmain-headerdesign1-megamenu-button-background-gradient-bottom: var(--enshell-color-box-active-background-gradient-bottom); --enshell-navmain-headerdesign1-megamenu-button-background-border: var(--enshell-color-box-active-background-border); --enshell-navmain-headerdesign1-megamenu-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-headerdesign1-megamenu-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-headerdesign1-megamenu-icon-spacing: 75px; --enshell-navmain-headerdesign1-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --enshell-navmain-headerdesign1-megamenu-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign1-megamenu-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign1-megamenu-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign1-megamenu-button-hover-background-border: var(--enshell-color-secondary-background-border); --enshell-navmain-headerdesign1-megamenu-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign1-megamenu-button-hover-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --enshell-navmain-headerdesign1-megamenu-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign1-megamenu-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign1-megamenu-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign1-megamenu-button-active-background-border: var(--enshell-color-primary-background-border); --enshell-navmain-headerdesign1-megamenu-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign1-megamenu-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --enshell-navmain-headerdesign1-width: 230px; --enshell-navmain-headerdesign1-dropdown-background: var(--enshell-color-box-background); --enshell-navmain-headerdesign1-dropdown-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-headerdesign1-dropdown-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-headerdesign1-dropdown-background-border: var(--enshell-color-secondary-background); /* Dropdown Items */ --enshell-navmain-headerdesign1-dropdown-button-padding: 12px; --enshell-navmain-headerdesign1-dropdown-button-background: transparent; --enshell-navmain-headerdesign1-dropdown-button-background-gradient-top: transparent; --enshell-navmain-headerdesign1-dropdown-button-background-gradient-bottom: transparent; --enshell-navmain-headerdesign1-dropdown-button-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign1-dropdown-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-headerdesign1-dropdown-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-headerdesign1-dropdown-icon: "\f061"; --enshell-navmain-headerdesign1-dropdown-icon-foreground: var(--enshell-color-black); --enshell-navmain-headerdesign1-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --enshell-navmain-headerdesign1-dropdown-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign1-dropdown-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign1-dropdown-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign1-dropdown-button-hover-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign1-dropdown-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign1-dropdown-button-hover-foreground-shadow: none; --enshell-navmain-headerdesign1-dropdown-icon-hover: "\f061"; --enshell-navmain-headerdesign1-dropdown-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign1-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --enshell-navmain-headerdesign1-dropdown-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign1-dropdown-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign1-dropdown-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign1-dropdown-button-active-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign1-dropdown-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign1-dropdown-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); --enshell-navmain-headerdesign1-dropdown-icon-active: "\f061"; --enshell-navmain-headerdesign1-dropdown-icon-active-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign1-dropdown-icon-active-foreground-shadow: none; /* ---- Main Menu - Mobile (Header Design 1) ---- */ /* Menu */ --enshell-navmain-mobile-headerdesign1-height: 50px; --enshell-navmain-mobile-headerdesign1-background: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign1-background-gradient-top: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign1-background-gradient-bottom: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign1-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign1-icon-burger: "\f0c9"; --enshell-navmain-mobile-headerdesign1-icon-burger-active: "\f0c9"; /* Main Items */ --enshell-navmain-mobile-headerdesign1-home-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-home-foreground-shadow: none; --enshell-navmain-mobile-headerdesign1-button-padding: 16px; --enshell-navmain-mobile-headerdesign1-button-background: transparent; --enshell-navmain-mobile-headerdesign1-button-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign1-button-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign1-button-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign1-button-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-button-foreground-shadow: none; --enshell-navmain-mobile-headerdesign1-icon: "\f078"; --enshell-navmain-mobile-headerdesign1-icon-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-icon-foreground-shadow: none; /* Main Items (hover/active) */ --enshell-navmain-mobile-headerdesign1-home-hover-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-home-hover-foreground-shadow: none; --enshell-navmain-mobile-headerdesign1-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-button-hover-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign1-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-mobile-headerdesign1-button-hover-foreground-shadow: transparent; --enshell-navmain-mobile-headerdesign1-icon-hover: "\f2d1"; --enshell-navmain-mobile-headerdesign1-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-icon-hover-foreground-shadow: none; /* CTA */ --enshell-navmain-mobile-headerdesign1-cta-padding: 16px; --enshell-navmain-mobile-headerdesign1-cta-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign1-cta-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-cta-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-cta-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign1-cta-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* CTA (hover) */ --enshell-navmain-mobile-headerdesign1-cta-hover-background: var(--enshell-color-primary-active-background); --enshell-navmain-mobile-headerdesign1-cta-hover-background-gradient-top: var(--enshell-color-primary-active-background-gradient-top); --enshell-navmain-mobile-headerdesign1-cta-hover-background-gradient-bottom: var(--enshell-color-primary-active-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-cta-hover-foreground: var(--enshell-color-primary-active-foreground); --enshell-navmain-mobile-headerdesign1-cta-hover-foreground-shadow: var(--enshell-color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --enshell-navmain-mobile-headerdesign1-megamenu-padding: 15px; --enshell-navmain-mobile-headerdesign1-megamenu-background: var(--enshell-color-box-background); --enshell-navmain-mobile-headerdesign1-megamenu-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-mobile-headerdesign1-megamenu-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-megamenu-background-border: var(--enshell-color-box-background-border); --enshell-navmain-mobile-headerdesign1-megamenu-background-divider: var(--enshell-color-box-background-divider); --enshell-navmain-mobile-headerdesign1-megamenu-foreground: var(--enshell-color-box-foreground); --enshell-navmain-mobile-headerdesign1-megamenu-foreground-shadow: none; /* Mega Menu Items */ --enshell-navmain-mobile-headerdesign1-megamenu-button-margin: 10px 0; --enshell-navmain-mobile-headerdesign1-megamenu-button-padding: 15px; --enshell-navmain-mobile-headerdesign1-megamenu-button-background: var(--enshell-color-box-active-background); --enshell-navmain-mobile-headerdesign1-megamenu-button-background-gradient-top: var(--enshell-color-box-active-background-gradient-top); --enshell-navmain-mobile-headerdesign1-megamenu-button-background-gradient-bottom: var(--enshell-color-box-active-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-megamenu-button-background-border: var(--enshell-color-box-active-background-border); --enshell-navmain-mobile-headerdesign1-megamenu-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-mobile-headerdesign1-megamenu-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-mobile-headerdesign1-megamenu-icon-spacing: 75px; --enshell-navmain-mobile-headerdesign1-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-border: var(--enshell-color-secondary-background-border); --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-mobile-headerdesign1-megamenu-button-hover-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --enshell-navmain-mobile-headerdesign1-megamenu-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-border: var(--enshell-color-primary-background-border); --enshell-navmain-mobile-headerdesign1-megamenu-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign1-megamenu-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --enshell-navmain-mobile-headerdesign1-dropdown-background: var(--enshell-color-box-background); --enshell-navmain-mobile-headerdesign1-dropdown-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-mobile-headerdesign1-dropdown-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-dropdown-background-border: var(--enshell-color-secondary-background); /* Dropdown Items */ --enshell-navmain-mobile-headerdesign1-dropdown-button-padding: 12px; --enshell-navmain-mobile-headerdesign1-dropdown-button-background: transparent; --enshell-navmain-mobile-headerdesign1-dropdown-button-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign1-dropdown-button-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign1-dropdown-button-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign1-dropdown-button-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-dropdown-button-foreground-shadow: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign1-dropdown-icon: "\f061"; --enshell-navmain-mobile-headerdesign1-dropdown-icon-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-border: var(--enshell-color-box-background-border); --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-mobile-headerdesign1-dropdown-button-hover-foreground-shadow: none; --enshell-navmain-mobile-headerdesign1-dropdown-icon-hover: "\f061"; --enshell-navmain-mobile-headerdesign1-dropdown-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign1-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --enshell-navmain-mobile-headerdesign1-dropdown-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-border: var(--enshell-color-box-background-border); --enshell-navmain-mobile-headerdesign1-dropdown-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign1-dropdown-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); --enshell-navmain-mobile-headerdesign1-dropdown-icon-active: "\f061"; --enshell-navmain-mobile-headerdesign1-dropdown-icon-active-foreground: var(--enshell-color-white); --enshell-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 ---- */ --enshell-navmain-headerdesign2-height: 65px; --enshell-navmain-headerdesign2-background: var(--enshell-color-black); --enshell-navmain-headerdesign2-background-gradient-top: var(--enshell-color-black); --enshell-navmain-headerdesign2-background-gradient-bottom: var(--enshell-color-black); --enshell-navmain-headerdesign2-background-border: var(--enshell-color-border); /* Main Items */ --enshell-navmain-headerdesign2-home-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-home-foreground-shadow: none; --enshell-navmain-headerdesign2-button-padding: 16px; --enshell-navmain-headerdesign2-button-background: transparent; --enshell-navmain-headerdesign2-button-background-gradient-top: transparent; --enshell-navmain-headerdesign2-button-background-gradient-bottom: transparent; --enshell-navmain-headerdesign2-button-background-border: transparent; --enshell-navmain-headerdesign2-button-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-button-foreground-shadow: none; --enshell-navmain-headerdesign2-icon: "\f0da"; --enshell-navmain-headerdesign2-icon-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-icon-foreground-shadow: none; /* Main Items (hover/active) */ --enshell-navmain-headerdesign2-home-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-home-hover-foreground-shadow: none; --enshell-navmain-headerdesign2-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign2-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign2-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign2-button-hover-background-border: transparent; --enshell-navmain-headerdesign2-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign2-button-hover-foreground-shadow: none; --enshell-navmain-headerdesign2-icon-hover: "\f0d7"; --enshell-navmain-headerdesign2-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-icon-hover-foreground-shadow: none; /* CTA */ --enshell-navmain-headerdesign2-cta-padding: 16px; --enshell-navmain-headerdesign2-cta-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign2-cta-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign2-cta-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign2-cta-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign2-cta-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* CTA (hover) */ --enshell-navmain-headerdesign2-cta-hover-background: var(--enshell-color-primary-active-background); --enshell-navmain-headerdesign2-cta-hover-background-gradient-top: var(--enshell-color-primary-active-background-gradient-top); --enshell-navmain-headerdesign2-cta-hover-background-gradient-bottom: var(--enshell-color-primary-active-background-gradient-bottom); --enshell-navmain-headerdesign2-cta-hover-foreground: var(--enshell-color-primary-active-foreground); --enshell-navmain-headerdesign2-cta-hover-foreground-shadow: var(--enshell-color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --enshell-navmain-headerdesign2-megamenu-padding: 25px; --enshell-navmain-headerdesign2-megamenu-background: var(--enshell-color-box-background); --enshell-navmain-headerdesign2-megamenu-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-headerdesign2-megamenu-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-headerdesign2-megamenu-background-border: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign2-megamenu-background-divider: var(--enshell-color-box-background-divider); --enshell-navmain-headerdesign2-megamenu-foreground: var(--enshell-color-box-foreground); --enshell-navmain-headerdesign2-megamenu-foreground-shadow: none; /* Mega Menu Items */ --enshell-navmain-headerdesign2-megamenu-button-margin: 15px 0; --enshell-navmain-headerdesign2-megamenu-button-padding: 15px; --enshell-navmain-headerdesign2-megamenu-button-background: var(--enshell-color-box-active-background); --enshell-navmain-headerdesign2-megamenu-button-background-gradient-top: var(--enshell-color-box-active-background-gradient-top); --enshell-navmain-headerdesign2-megamenu-button-background-gradient-bottom: var(--enshell-color-box-active-background-gradient-bottom); --enshell-navmain-headerdesign2-megamenu-button-background-border: var(--enshell-color-box-active-background-border); --enshell-navmain-headerdesign2-megamenu-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-headerdesign2-megamenu-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-headerdesign2-megamenu-icon-spacing: 75px; --enshell-navmain-headerdesign2-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --enshell-navmain-headerdesign2-megamenu-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign2-megamenu-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign2-megamenu-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign2-megamenu-button-hover-background-border: var(--enshell-color-secondary-background-border); --enshell-navmain-headerdesign2-megamenu-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign2-megamenu-button-hover-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --enshell-navmain-headerdesign2-megamenu-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign2-megamenu-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign2-megamenu-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign2-megamenu-button-active-background-border: var(--enshell-color-primary-background-border); --enshell-navmain-headerdesign2-megamenu-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign2-megamenu-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --enshell-navmain-headerdesign2-width: 230px; --enshell-navmain-headerdesign2-dropdown-background: var(--enshell-color-box-background); --enshell-navmain-headerdesign2-dropdown-background-gradient-top: var(--enshell-color-box-background-gradient-top); --enshell-navmain-headerdesign2-dropdown-background-gradient-bottom: var(--enshell-color-box-background-gradient-bottom); --enshell-navmain-headerdesign2-dropdown-background-border: var(--enshell-color-secondary-background); /* Dropdown Items */ --enshell-navmain-headerdesign2-dropdown-button-padding: 12px; --enshell-navmain-headerdesign2-dropdown-button-background: transparent; --enshell-navmain-headerdesign2-dropdown-button-background-gradient-top: transparent; --enshell-navmain-headerdesign2-dropdown-button-background-gradient-bottom: transparent; --enshell-navmain-headerdesign2-dropdown-button-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign2-dropdown-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-headerdesign2-dropdown-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-headerdesign2-dropdown-icon: "\f061"; --enshell-navmain-headerdesign2-dropdown-icon-foreground: var(--enshell-color-black); --enshell-navmain-headerdesign2-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --enshell-navmain-headerdesign2-dropdown-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-headerdesign2-dropdown-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-headerdesign2-dropdown-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-headerdesign2-dropdown-button-hover-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign2-dropdown-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-headerdesign2-dropdown-button-hover-foreground-shadow: none; --enshell-navmain-headerdesign2-dropdown-icon-hover: "\f061"; --enshell-navmain-headerdesign2-dropdown-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --enshell-navmain-headerdesign2-dropdown-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-headerdesign2-dropdown-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-headerdesign2-dropdown-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-headerdesign2-dropdown-button-active-background-border: var(--enshell-color-box-background-border); --enshell-navmain-headerdesign2-dropdown-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-headerdesign2-dropdown-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); --enshell-navmain-headerdesign2-dropdown-icon-active: "\f061"; --enshell-navmain-headerdesign2-dropdown-icon-active-foreground: var(--enshell-color-white); --enshell-navmain-headerdesign2-dropdown-icon-active-foreground-shadow: none; /* ---- Main Menu - Mobile (Header Design 2) ---- */ /* Menu */ --enshell-navmain-mobile-headerdesign2-height: 50px; --enshell-navmain-mobile-headerdesign2-background: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign2-background-gradient-top: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign2-background-gradient-bottom: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign2-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign2-icon-burger: "\f0c9"; --enshell-navmain-mobile-headerdesign2-icon-burger-active: "\f0c9"; /* Main Items */ --enshell-navmain-mobile-headerdesign2-home-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-home-foreground-shadow: none; --enshell-navmain-mobile-headerdesign2-button-padding: 16px; --enshell-navmain-mobile-headerdesign2-button-background: transparent; --enshell-navmain-mobile-headerdesign2-button-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign2-button-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign2-button-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign2-button-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-button-foreground-shadow: none; --enshell-navmain-mobile-headerdesign2-icon: "\f078"; --enshell-navmain-mobile-headerdesign2-icon-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-icon-foreground-shadow: none; /* Main Items (hover/active) */ --enshell-navmain-mobile-headerdesign2-home-hover-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-home-hover-foreground-shadow: none; --enshell-navmain-mobile-headerdesign2-button-hover-background: transparent; --enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign2-button-hover-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign2-button-hover-foreground: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign2-button-hover-foreground-shadow: transparent; --enshell-navmain-mobile-headerdesign2-icon-hover: "\f2d1"; --enshell-navmain-mobile-headerdesign2-icon-hover-foreground: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign2-icon-hover-foreground-shadow: none; /* CTA */ --enshell-navmain-mobile-headerdesign2-cta-padding: 16px; --enshell-navmain-mobile-headerdesign2-cta-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign2-cta-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign2-cta-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-cta-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign2-cta-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* CTA (hover) */ --enshell-navmain-mobile-headerdesign2-cta-hover-background: var(--enshell-color-primary-active-background); --enshell-navmain-mobile-headerdesign2-cta-hover-background-gradient-top: var(--enshell-color-primary-active-background-gradient-top); --enshell-navmain-mobile-headerdesign2-cta-hover-background-gradient-bottom: var(--enshell-color-primary-active-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-cta-hover-foreground: var(--enshell-color-primary-active-foreground); --enshell-navmain-mobile-headerdesign2-cta-hover-foreground-shadow: var(--enshell-color-primary-active-foreground-shadow); /* Dropdown (Mega Menu) - Used when the menu is set to Mega Menu in Wizard Panel > Header */ --enshell-navmain-mobile-headerdesign2-megamenu-padding: 15px; --enshell-navmain-mobile-headerdesign2-megamenu-background: transparent; --enshell-navmain-mobile-headerdesign2-megamenu-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign2-megamenu-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign2-megamenu-background-border: transparent; --enshell-navmain-mobile-headerdesign2-megamenu-background-divider: var(--enshell-color-box-background-divider); --enshell-navmain-mobile-headerdesign2-megamenu-foreground: var(--enshell-color-box-foreground); --enshell-navmain-mobile-headerdesign2-megamenu-foreground-shadow: none; /* Mega Menu Items */ --enshell-navmain-mobile-headerdesign2-megamenu-button-margin: 10px 0; --enshell-navmain-mobile-headerdesign2-megamenu-button-padding: 15px; --enshell-navmain-mobile-headerdesign2-megamenu-button-background: var(--enshell-color-box-active-background); --enshell-navmain-mobile-headerdesign2-megamenu-button-background-gradient-top: var(--enshell-color-box-active-background-gradient-top); --enshell-navmain-mobile-headerdesign2-megamenu-button-background-gradient-bottom: var(--enshell-color-box-active-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-megamenu-button-background-border: var(--enshell-color-box-active-background-border); --enshell-navmain-mobile-headerdesign2-megamenu-button-foreground: var(--enshell-color-box-active-foreground-bold); --enshell-navmain-mobile-headerdesign2-megamenu-button-foreground-shadow: var(--enshell-color-box-active-foreground-shadow); --enshell-navmain-mobile-headerdesign2-megamenu-icon-spacing: 75px; --enshell-navmain-mobile-headerdesign2-megamenu-icon-size: 33px; /* Mega Menu Items (hover) */ --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-border: var(--enshell-color-secondary-background-border); --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-mobile-headerdesign2-megamenu-button-hover-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mega Menu Items (active) */ --enshell-navmain-mobile-headerdesign2-megamenu-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-border: var(--enshell-color-primary-background-border); --enshell-navmain-mobile-headerdesign2-megamenu-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign2-megamenu-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); /* Dropdown (Single) - Used when the menu is set to Dropdown in Wizard Panel > Header */ --enshell-navmain-mobile-headerdesign2-dropdown-background: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-background-border: transparent; /* Dropdown Items */ --enshell-navmain-mobile-headerdesign2-dropdown-button-padding: 12px; --enshell-navmain-mobile-headerdesign2-dropdown-button-background: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-button-background-gradient-top: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-button-background-gradient-bottom: transparent; --enshell-navmain-mobile-headerdesign2-dropdown-button-background-border: var(--enshell-color-border); --enshell-navmain-mobile-headerdesign2-dropdown-button-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-dropdown-button-foreground-shadow: var(--enshell-color-black); --enshell-navmain-mobile-headerdesign2-dropdown-icon: "\f061"; --enshell-navmain-mobile-headerdesign2-dropdown-icon-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-dropdown-icon-foreground-shadow: none; /* Dropdown Items (hover) */ --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background: var(--enshell-color-secondary-background); --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-top: var(--enshell-color-secondary-background-gradient-top); --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-bottom: var(--enshell-color-secondary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-border: var(--enshell-color-box-background-border); --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-foreground: var(--enshell-color-secondary-foreground); --enshell-navmain-mobile-headerdesign2-dropdown-button-hover-foreground-shadow: none; --enshell-navmain-mobile-headerdesign2-dropdown-icon-hover: "\f061"; --enshell-navmain-mobile-headerdesign2-dropdown-icon-hover-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-dropdown-icon-hover-foreground-shadow: none; /* Dropdown Items (active) */ --enshell-navmain-mobile-headerdesign2-dropdown-button-active-background: var(--enshell-color-primary-background); --enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-top: var(--enshell-color-primary-background-gradient-top); --enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-bottom: var(--enshell-color-primary-background-gradient-bottom); --enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-border: var(--enshell-color-box-background-border); --enshell-navmain-mobile-headerdesign2-dropdown-button-active-foreground: var(--enshell-color-primary-foreground); --enshell-navmain-mobile-headerdesign2-dropdown-button-active-foreground-shadow: var(--enshell-color-primary-foreground-shadow); --enshell-navmain-mobile-headerdesign2-dropdown-icon-active: "\f061"; --enshell-navmain-mobile-headerdesign2-dropdown-icon-active-foreground: var(--enshell-color-white); --enshell-navmain-mobile-headerdesign2-dropdown-icon-active-foreground-shadow: none; /* ---- WHMCS Steps - Displayed on the cart page of WHMCS ---- */ /* Header Design 1 */ --enshell-whmcs-cartsteps-headerdesign1-foreground: var(--enshell-color-black); --enshell-whmcs-cartsteps-headerdesign1-foreground-shadow: transparent; --enshell-whmcs-cartsteps-headerdesign1-button-active-background: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign1-button-active-background-gradient-top: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign1-button-active-background-gradient-bottom: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign1-button-active-foreground: var(--enshell-color-secondary-foreground); --enshell-whmcs-cartsteps-headerdesign1-button-active-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mobile */ --enshell-whmcs-cartsteps-mobile-headerdesign1-foreground: var(--enshell-color-white); --enshell-whmcs-cartsteps-mobile-headerdesign1-foreground-shadow: transparent; --enshell-whmcs-cartsteps-mobile-headerdesign1-button-active-background: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign1-button-active-background-gradient-top: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign1-button-active-background-gradient-bottom: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign1-button-active-foreground: var(--enshell-color-secondary-foreground); --enshell-whmcs-cartsteps-mobile-headerdesign1-button-active-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Header Design 2 */ --enshell-whmcs-cartsteps-headerdesign2-foreground: var(--enshell-color-white); --enshell-whmcs-cartsteps-headerdesign2-foreground-shadow: transparent; --enshell-whmcs-cartsteps-headerdesign2-button-active-background: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign2-button-active-background-gradient-top: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign2-button-active-background-gradient-bottom: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-headerdesign2-button-active-foreground: var(--enshell-color-secondary-foreground); --enshell-whmcs-cartsteps-headerdesign2-button-active-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); /* Mobile */ --enshell-whmcs-cartsteps-mobile-headerdesign2-foreground: var(--enshell-color-white); --enshell-whmcs-cartsteps-mobile-headerdesign2-foreground-shadow: transparent; --enshell-whmcs-cartsteps-mobile-headerdesign2-button-active-background: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign2-button-active-background-gradient-top: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign2-button-active-background-gradient-bottom: var(--enshell-color-secondary-background); --enshell-whmcs-cartsteps-mobile-headerdesign2-button-active-foreground: var(--enshell-color-secondary-foreground); --enshell-whmcs-cartsteps-mobile-headerdesign2-button-active-foreground-shadow: var(--enshell-color-secondary-foreground-shadow); } /* ---- from navmain-original.css ---- */ /* Extracted verbatim from the real theme reference project's glazeanysrv/css/layout.css lines 488-1420 (toolbar/header/navmain incl. megamenu, active-tab, CTA), plus .contentcontainer (line 177, needed by the header) — the real ANYSRV/Zomex front-end CSS, not a reproduction. Paired with variables-original.css (the real variables.css, copied verbatim) for every var() reference used below. No selectors renamed, no values changed. See PRODUCTION-BLOG-HEADER-AUDIT notes in the chat for the exact line-number provenance of every block. */ .contentcontainer { margin: 0 auto; width: var(--enshell-container-width); max-width: var(--enshell-container-maxwidth); } /* Root-cause fix (2026-10-06): real layout.css rule (i { margin: 0 5px 0 0 } -- "Used by Font Awesome icons"), needed now that Font Awesome is actually self-hosted and loading (previously every across the homepage hero/service pages rendered as an invisible fallback glyph since this project had no FA webfont at all; fixed by self-hosting FA Free -- assets/css/fontawesome.min.css + assets/webfonts/ -- the licensed-free equivalent of the WHMCS-core FA Pro file the real site loads). Global, matches the real site's own global rule. */ i { margin: 0 5px 0 0; } .toolbarmain-container { background: var(--enshell-color-black); border-bottom: #000 1px solid; } .template-mono .toolbarmain-container { background: var(--enshell-color-primary-background); border-color: var(--enshell-color-primary-background-border); } .template-glaze .toolbarmain-container { background: var(--enshell-color-secondary-background); border-color: var(--enshell-color-secondary-background-border); } .template-prosper .toolbarmain-container { background: var(--enshell-color-secondary-background); border-color: var(--enshell-color-secondary-background-border); } .toolbarmain { display: flex; justify-content: space-between; align-items: center; color: var(--enshell-color-grey); } .template-mono .toolbarmain { color: var(--enshell-color-primary-foreground); } .template-glaze .toolbarmain { color: var(--enshell-color-secondary-foreground); } .template-prosper .toolbarmain { color: var(--enshell-color-secondary-foreground); } /* Toolbar Google translate */ .toolbarmain .toolbarmain-googletranslate { position: absolute; left: 52%; transform: translateX(-50%); } .toolbarmain .toolbarmain-googletranslate img { display: inline; max-width: unset; } /* Toolbar menu */ .toolbarmain .toolbarmain-menu::after { clear: both; display: table; height: 0; content: ""; } .toolbarmain .toolbarmain-menu ul { margin: 0; } .toolbarmain .toolbarmain-menu ul li { float: left; list-style: none; } .toolbarmain .toolbarmain-menu ul li a { display: block; padding: 5px 10px; text-decoration: none; color: var(--enshell-color-grey); } /* Keep the translated utility labels on Glaze's single mobile row. */ @media (max-width: 430px) { .toolbarmain .toolbarmain-menu ul { display: flex; justify-content: flex-end; } .toolbarmain .toolbarmain-menu ul li { float: none; } .toolbarmain .toolbarmain-menu ul li a { padding: 5px 6px; font-size: 14px; white-space: nowrap; } } .template-mono .toolbarmain .toolbarmain-menu ul li a { color: var(--enshell-color-primary-foreground); } .template-glaze .toolbarmain .toolbarmain-menu ul li a { color: var(--enshell-color-secondary-foreground); } .template-prosper .toolbarmain .toolbarmain-menu ul li a { color: var(--enshell-color-secondary-foreground); } .toolbarmain .toolbarmain-menu ul li a:hover { color: var(--enshell-color-primary-active-foreground); background: var(--enshell-color-primary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-primary-active-background-gradient-top) 0, var(--enshell-color-primary-active-background-gradient-bottom) 100%); } .template-mono .toolbarmain .toolbarmain-menu ul li a:hover { color: var(--enshell-color-box-foreground); background: var(--enshell-color-box-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%); } .template-glaze .toolbarmain .toolbarmain-menu ul li a:hover { color: var(--enshell-color-secondary-active-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } .template-prosper .toolbarmain .toolbarmain-menu ul li a:hover { color: var(--enshell-color-secondary-active-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } /* Toolbar highlight */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight a { background: #000; color: var(--enshell-color-grey); } .template-mono .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight a { background: var(--enshell-color-secondary-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-background-gradient-top) 0, var(--enshell-color-secondary-background-gradient-bottom) 100%); color: var(--enshell-color-secondary-foreground); } .template-glaze .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight a { background: var(--enshell-color-secondary-active-foreground); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); color: var(--enshell-color-secondary-active-foreground); } .template-prosper .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight a { background: var(--enshell-color-secondary-active-foreground); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); color: var(--enshell-color-secondary-active-foreground); } /* Toolbar language */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a { background: #000; color: var(--enshell-color-grey); } .template-mono .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a { color: var(--enshell-color-box-foreground); background: var(--enshell-color-box-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-background-gradient-top) 0, var(--enshell-color-box-background-gradient-bottom) 100%); } .template-glaze .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a { color: var(--enshell-color-secondary-active-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } .template-prosper .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a { color: var(--enshell-color-secondary-active-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-language a .iti-flag { margin-right: 7px; } /* Toolbar welcome */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-welcome a { color: var(--enshell-color-secondary-active-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } /* Toolbar Notifications */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-notifications a { background: var(--enshell-color-badge-new-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-new-background-gradient-top) 0, var(--enshell-color-badge-new-background-gradient-bottom) 100%); color: var(--enshell-color-badge-new-foreground); } /* Toolbar Switch Account */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-switchaccount i { margin: 0; } /* Toolbar Logout */ .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-logout i { margin: 0; } /* Toolbar dropdown */ .toolbarmain .toolbarmain-menu ul li li { float: none; } .toolbarmain .toolbarmain-menu ul li li a, .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight li a { color: var(--enshell-color-secondary-foreground); background: var(--enshell-color-secondary-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-background-gradient-top) 0, var(--enshell-color-secondary-background-gradient-bottom) 100%); border: var(--enshell-color-secondary-background-border) 1px solid; border-top-width: 0; padding-left: 15px; } .toolbarmain .toolbarmain-menu ul li li a:hover, .toolbarmain .toolbarmain-menu ul li.toolbarmain-menu-highlight li a:hover { color: var(--enshell-color-secondary-foreground); background: var(--enshell-color-secondary-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%); } .toolbarmain .toolbarmain-menu ul li li.toolbarmain-menu-divider { height: 0; padding: 0; border-top: var(--enshell-color-secondary-active-background-border) 1px solid; } .toolbarmain .toolbarmain-menu ul li ul { z-index: 9999; position: absolute; left: -999em; width: 200px; } .toolbarmain .toolbarmain-menu ul li:hover ul { left: auto; } /* Headermain */ .headermain { padding: 7px 0; background: var(--enshell-background-body); border-bottom: var(--enshell-color-border) 1px solid; /* Real anysls.com header nav links render at a fixed 16px regardless of viewport. Spanish body.css intentionally scales body copy to 1.125rem above 1024px for article readability — without a pin here that inflation leaks into the header (nav link font-size is set in relative units), measured as 18px vs the real site's 16px, which was enough extra width by itself to wrap the real-width nav onto two lines at 1440px. Pinning the header back to the real fixed value, independent of the body text scale. */ font-size: 1rem; } .template-mono .headermain, .template-prosper .headermain { background: #fff; } .headermain .headermain-inner { display: flex; justify-content: space-between; align-items: center; } .headermain .headermain-logo { margin: 0; position: relative; } .headermain .headermain-logo img { max-width: var(--enshell-logo-width); } .headermain .headermain-logo-text { font-family: var(--enshell-font-heading); font-weight: bold; font-size: 2.2em; text-decoration: none; } .headermain .headermain-buttons { display: flex; flex-wrap: wrap; } .headermain .headermain-buttons .headermain-button { margin: 0 0 0 var(--enshell-spacing-inner); } .headermain .headermain-buttons .headermain-button a { display: block; background: var(--enshell-background-body); border: var(--enshell-color-border) 1px solid; border-radius: var(--enshell-border-radius-default); font-weight: bold; padding: 10px 15px; color: var(--enshell-color-default); text-decoration: none; } .template-prosper .headermain .headermain-buttons .headermain-button a { background: #fff; } .headermain .headermain-buttons .headermain-button a:hover { color: var(--enshell-color-primary-background); text-decoration: underline; transform: scale3d(1.05, 1.05, 1.05); } .headermain .headermain-buttons .headermain-button a i { color: var(--enshell-color-secondary-background); } /* Headermain - Design 2 */ .headermain.headermain-design2 { padding: 0; border-bottom: none; } .headermain.headermain-design2 .headermain-inner { padding: var(--enshell-spacing-child) 0; } /* Navmain */ .headermain.headermain-design1 .navmain-container { min-width: 65%; } .headermain.headermain-design1 .navmain-container { background: var(--enshell-navmain-headerdesign1-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-background-gradient-bottom) 100%); border-bottom: var(--enshell-navmain-headerdesign1-background-border) 1px solid; border-radius: var(--enshell-border-radius-default); } .headermain.headermain-design2 .navmain-container { background: var(--enshell-navmain-headerdesign2-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-background-gradient-bottom) 100%); border-bottom: var(--enshell-navmain-headerdesign2-background-border) 1px solid; } .navmain { position: relative; z-index: 100; } .headermain.headermain-design1 .navmain { line-height: var(--enshell-navmain-headerdesign1-height); } .headermain.headermain-design2 .navmain { line-height: var(--enshell-navmain-headerdesign2-height); } .navmain::after { content: ""; display: table; clear: both; } .navmain .navmain-mobile-icon, .navmain .navmain-mobile-home, .navmain .navmain-mobile-child, .navmain select, .navmain.navmain-select .navmain-mobile-icon, .navmain.navmain-select .navmain-mobile-home { /* Remove mobile menu elements */ display: none; } .navmain ul { margin: 0; display: flex; flex-wrap: wrap; } .navmain ul li { list-style: none; } .navmain ul li a { display: block; margin: 0; text-decoration: none; font-weight: 700; } .headermain-design1 .navmain ul li { background: var(--enshell-navmain-headerdesign1-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-button-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-button-background-gradient-bottom) 100%); } .headermain-design2 .navmain ul li { background: var(--enshell-navmain-headerdesign2-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-button-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-button-background-gradient-bottom) 100%); } .headermain-design1 .navmain ul li a { color: var(--enshell-navmain-headerdesign1-button-foreground); text-shadow: var(--enshell-navmain-headerdesign1-button-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-headerdesign1-button-padding); } /* Minimal Spanish-specific width adjustment (not a geometry redesign): the real nav has 8 top-level items; Spanish has 9 (adds a permanent "Blog" link, since this static site has no WHMCS contextual nav injection to fall back on for blog pages — an already-approved adaptation). At the real per-item padding (16px each side) those 9 items overflow the real-width nav container by ~103px at 1440px, wrapping the CTA onto a second line. Tightening horizontal padding only, same font-size/weight/colors as the real site, closes that gap without changing any other proportion. */ /* (moved to end of file — see final block — so it reliably wins the cascade against the real verbatim mobile-button-padding rule in the structural-switch block below, which shares this exact selector) */ .headermain-design2 .navmain ul li a { color: var(--enshell-navmain-headerdesign2-button-foreground); text-shadow: var(--enshell-navmain-headerdesign2-button-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-headerdesign2-button-padding); } .headermain-design1 .navmain ul li:hover, .headermain-design1 .navmain ul li.navmain-active, .headermain-design1 .navmain ul li.current_page_parent, .headermain-design1 .navmain ul li.current_page_item { background: var(--enshell-navmain-headerdesign1-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-button-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-button-hover-background-gradient-bottom) 100%); } .headermain-design2 .navmain ul li:hover, .headermain-design2 .navmain ul li.navmain-active, .headermain-design2 .navmain ul li.current_page_parent, .headermain-design2 .navmain ul li.current_page_item { background: var(--enshell-navmain-headerdesign2-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-button-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-button-hover-background-gradient-bottom) 100%); } .headermain-design1 .navmain ul li:hover a, .headermain-design1 .navmain ul li.navmain-active a, .headermain-design1 .navmain ul li.current_page_parent a, .headermain-design1 .navmain ul li.current_page_item a { color: var(--enshell-navmain-headerdesign1-button-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-button-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li:hover a, .headermain-design2 .navmain ul li.navmain-active a, .headermain-design2 .navmain ul li.current_page_parent a, .headermain-design2 .navmain ul li.current_page_item a { color: var(--enshell-navmain-headerdesign2-button-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-button-hover-foreground-shadow) 1px 1px; } /* Home */ .navmain .navmain-home i { margin: 0; } .headermain-design1 .navmain ul li.navmain-home a { color: var(--enshell-navmain-headerdesign1-home-foreground); text-shadow: var(--enshell-navmain-headerdesign1-home-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li.navmain-home a { color: var(--enshell-navmain-headerdesign2-home-foreground); text-shadow: var(--enshell-navmain-headerdesign2-home-foreground-shadow) 1px 1px; } .headermain-design1 .navmain ul li.navmain-home a:hover { color: var(--enshell-navmain-headerdesign1-home-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-home-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li.navmain-home a:hover { color: var(--enshell-navmain-headerdesign2-home-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-home-hover-foreground-shadow) 1px 1px; } /* CTA */ .headermain-design1 .navmain ul li.navmain-cta { background: var(--enshell-navmain-headerdesign1-cta-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-cta-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-cta-background-gradient-bottom) 100%); } .headermain-design2 .navmain ul li.navmain-cta { margin-left: auto; background: var(--enshell-navmain-headerdesign2-cta-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-cta-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-cta-background-gradient-bottom) 100%); } .headermain-design1 .navmain ul li.navmain-cta:hover { background: var(--enshell-navmain-headerdesign1-cta-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-cta-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-cta-hover-background-gradient-bottom) 100%); } .headermain-design2 .navmain ul li.navmain-cta:hover { background: var(--enshell-navmain-headerdesign2-cta-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-cta-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-cta-hover-background-gradient-bottom) 100%); } .headermain-design1 .navmain ul li.navmain-cta a { color: var(--enshell-navmain-headerdesign1-cta-foreground); text-shadow: var(--enshell-navmain-headerdesign1-cta-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-headerdesign1-cta-padding); } .headermain-design2 .navmain ul li.navmain-cta a { color: var(--enshell-navmain-headerdesign2-cta-foreground); text-shadow: var(--enshell-navmain-headerdesign2-cta-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-headerdesign2-cta-padding); } .headermain-design1 .navmain ul li.navmain-cta a:hover, .headermain-design1 .navmain ul li.navmain-cta a:active { color: var(--enshell-navmain-headerdesign1-cta-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-cta-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li.navmain-cta a:hover, .headermain-design2 .navmain ul li.navmain-cta a:active { color: var(--enshell-navmain-headerdesign2-cta-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-cta-hover-foreground-shadow) 1px 1px; } /* Dropdown */ .navmain .navmain-dropdown a { display: flex; align-items: center; font-weight: 700; } .navmain .navmain-dropdown a:before { font-family: "Font Awesome 5 Pro"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; font-size: 0.8em; line-height: 1; padding: 0 5px 0 0; width: 10px; text-align: left; } .headermain-design1 .navmain .navmain-dropdown a:before { content: var(--enshell-navmain-headerdesign1-icon); color: var(--enshell-navmain-headerdesign1-icon-foreground); text-shadow: var(--enshell-navmain-headerdesign1-icon-foreground-shadow) 1px 1px; } .headermain-design2 .navmain .navmain-dropdown a:before { content: var(--enshell-navmain-headerdesign2-icon); color: var(--enshell-navmain-headerdesign2-icon-foreground); text-shadow: var(--enshell-navmain-headerdesign2-icon-foreground-shadow) 1px 1px; } .headermain-design1 .navmain .navmain-dropdown:hover a:before, .headermain-design1 .navmain .navmain-dropdown a:hover:before, .headermain-design1 .navmain .navmain-dropdown.navmain-active a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:hover:before { content: var(--enshell-navmain-headerdesign1-icon-hover); color: var(--enshell-navmain-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain .navmain-dropdown:hover a:before, .headermain-design2 .navmain .navmain-dropdown a:hover:before, .headermain-design2 .navmain .navmain-dropdown.navmain-active a:hover:before, .headermain-design2 .navmain .navmain-dropdown.current_page_parent a:hover:before, .headermain-design2 .navmain .navmain-dropdown.current_page_item a:hover:before { content: var(--enshell-navmain-headerdesign2-icon-hover); color: var(--enshell-navmain-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } .headermain-design1 .navmain .navmain-dropdown.navmain-active a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:before { content: var(--enshell-navmain-headerdesign1-icon-hover); color: var(--enshell-navmain-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain .navmain-dropdown.navmain-active a:before, .headermain-design2 .navmain .navmain-dropdown.current_page_parent a:before, .headermain-design2 .navmain .navmain-dropdown.current_page_item a:before { content: var(--enshell-navmain-headerdesign2-icon-hover); color: var(--enshell-navmain-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } .navmain .navmain-dropdown .navmain-subcontainer { position: absolute; left: -999em; margin: 0 auto; z-index: 9999; line-height: 1.4em; font-weight: normal; z-index: 5; } .navmain .navmain-dropdown:hover .navmain-subcontainer { right: auto; left: 0px; top: auto; /* Fixes dropdown position when menu has 2 or more rows */ } .navmain .navmain-dropdown .navmain-subcontainer a { background: none; } /* Highlight */ .navmain .navmain-dropdown .navmain-subcontainer .navmain-highlight::before { position: absolute; font-weight: bold; line-height: 1; text-transform: uppercase; z-index: 2; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-highlight::before { top: -11px; right: -67px; width: 150px; padding: 23px 0 6px 0; text-align: center; transform: rotate(45deg); font-size: 0.7em; } .navmain .navmain-dropdown-single .navmain-subcontainer .navmain-highlight::before { top: 50%; right: 0; padding: 3px 3px; text-align: center; transform: translateY(-50%); font-size: 0.7em; } /* Hot */ .navmain .navmain-dropdown .navmain-subcontainer .navmain-highlight.navmain-highlight-hot::before { background: var(--enshell-color-badge-hot-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-hot-background-gradient-top) 0, var(--enshell-color-badge-hot-background-gradient-bottom) 100%); color: var(--enshell-color-badge-hot-foreground); } /* New */ .navmain .navmain-dropdown .navmain-subcontainer .navmain-highlight.navmain-highlight-new::before { background: var(--enshell-color-badge-new-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-new-background-gradient-top) 0, var(--enshell-color-badge-new-background-gradient-bottom) 100%); color: var(--enshell-color-badge-new-foreground); } /* Dropdown - Mega Menu */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer { width: 100%; } .headermain.headermain-design1 .navmain .navmain-dropdown.navmain-dropdown-megamenu .navmain-subcontainer { padding: var(--enshell-navmain-headerdesign1-megamenu-padding); background: var(--enshell-navmain-headerdesign1-megamenu-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-megamenu-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-megamenu-background-gradient-bottom) 100%); border-top: var(--enshell-navmain-headerdesign1-megamenu-background-border) 3px solid; border-bottom: var(--enshell-navmain-headerdesign1-megamenu-background-border) 3px solid; border-left: var(--enshell-navmain-headerdesign1-megamenu-background-border) 1px solid; border-right: var(--enshell-navmain-headerdesign1-megamenu-background-border) 1px solid; } .headermain.headermain-design2 .navmain .navmain-dropdown.navmain-dropdown-megamenu .navmain-subcontainer { padding: var(--enshell-navmain-headerdesign2-megamenu-padding); background: var(--enshell-navmain-headerdesign2-megamenu-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-megamenu-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-megamenu-background-gradient-bottom) 100%); border-top: var(--enshell-navmain-headerdesign2-megamenu-background-border) 3px solid; border-bottom: var(--enshell-navmain-headerdesign2-megamenu-background-border) 3px solid; border-left: var(--enshell-navmain-headerdesign2-megamenu-background-border) 1px solid; border-right: var(--enshell-navmain-headerdesign2-megamenu-background-border) 1px solid; } /* Columns */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns { display: flex; justify-content: space-between; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col p:last-child { margin: 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col1 { width: 70%; padding: 0 35px 0 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { width: 30%; padding: 15px 0 15px 35px; min-height: 255px; } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { border-left: var(--enshell-navmain-headerdesign1-megamenu-background-divider) 1px solid; color: var(--enshell-navmain-headerdesign1-megamenu-foreground); text-shadow: var(--enshell-navmain-headerdesign1-megamenu-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { border-left: var(--enshell-navmain-headerdesign2-megamenu-background-divider) 1px solid; color: var(--enshell-navmain-headerdesign2-megamenu-foreground); text-shadow: var(--enshell-navmain-headerdesign2-megamenu-foreground-shadow) 1px 1px; } /* Links */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-links { display: flex; flex-wrap: wrap; justify-content: space-between; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { width: var(--enshell-column-2); position: relative; overflow: hidden; border-radius: var(--enshell-border-radius-default); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { margin: var(--enshell-navmain-headerdesign1-megamenu-button-margin); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { margin: var(--enshell-navmain-headerdesign2-megamenu-button-margin); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-1col .navmain-subcontainer .navmain-link { width: var(--enshell-column-1); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-2col .navmain-subcontainer .navmain-link { width: var(--enshell-column-2); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-3col .navmain-subcontainer .navmain-link { width: var(--enshell-column-3); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-4col .navmain-subcontainer .navmain-link { width: var(--enshell-column-4); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-5col .navmain-subcontainer .navmain-link { width: var(--enshell-column-5); } .navmain .navmain-dropdown-megamenu.navmain-dropdown-6col .navmain-subcontainer .navmain-link { width: var(--enshell-column-6); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; border-radius: var(--enshell-border-radius-default); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-headerdesign1-megamenu-button-padding); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-headerdesign2-megamenu-button-padding); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:before { /* Remove icon styling from main dropdown */ display: none; } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { color: var(--enshell-navmain-headerdesign1-megamenu-button-foreground); text-shadow: var(--enshell-navmain-headerdesign1-megamenu-button-foreground-shadow) 1px 1px; border: var(--enshell-navmain-headerdesign1-megamenu-button-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); background: var(--enshell-navmain-headerdesign1-megamenu-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-megamenu-button-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-megamenu-button-background-gradient-bottom) 100%); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { color: var(--enshell-navmain-headerdesign2-megamenu-button-foreground); text-shadow: var(--enshell-navmain-headerdesign2-megamenu-button-foreground-shadow) 1px 1px; border: var(--enshell-navmain-headerdesign2-megamenu-button-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); background: var(--enshell-navmain-headerdesign2-megamenu-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-megamenu-button-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-megamenu-button-background-gradient-bottom) 100%); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:hover, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:active { color: var(--enshell-navmain-headerdesign1-megamenu-button-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign1-megamenu-button-hover-foreground-shadow) 1px 1px; background: var(--enshell-navmain-headerdesign1-megamenu-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-megamenu-button-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-megamenu-button-hover-background-gradient-bottom) 100%); border: var(--enshell-navmain-headerdesign1-megamenu-button-hover-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:hover, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:active { color: var(--enshell-navmain-headerdesign2-megamenu-button-hover-foreground); text-shadow: var(--enshell-navmain-headerdesign2-megamenu-button-hover-foreground-shadow) 1px 1px; background: var(--enshell-navmain-headerdesign2-megamenu-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-megamenu-button-hover-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-megamenu-button-hover-background-gradient-bottom) 100%); border: var(--enshell-navmain-headerdesign2-megamenu-button-hover-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-heading { display: block; font-weight: bold; padding: 0 0 5px 0; font-family: var(--enshell-font-heading); font-size: 1.15em; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link .navmain-link-text { display: block; margin: 0; text-shadow: none; font-size: 0.9em; font-weight: normal; } /* Active */ .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:active { background: var(--enshell-navmain-headerdesign1-megamenu-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign1-megamenu-button-active-background-gradient-top) 0, var(--enshell-navmain-headerdesign1-megamenu-button-active-background-gradient-bottom) 100%); border: var(--enshell-navmain-headerdesign1-megamenu-button-active-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); color: var(--enshell-navmain-headerdesign1-megamenu-button-active-foreground); text-shadow: var(--enshell-navmain-headerdesign1-megamenu-button-active-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:active { background: var(--enshell-navmain-headerdesign2-megamenu-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-headerdesign2-megamenu-button-active-background-gradient-top) 0, var(--enshell-navmain-headerdesign2-megamenu-button-active-background-gradient-bottom) 100%); border: var(--enshell-navmain-headerdesign2-megamenu-button-active-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); color: var(--enshell-navmain-headerdesign2-megamenu-button-active-foreground); text-shadow: var(--enshell-navmain-headerdesign2-megamenu-button-active-foreground-shadow) 1px 1px; } /* Icons */ .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a { position: relative; } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a { padding-left: var(--enshell-navmain-headerdesign1-megamenu-icon-spacing); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a { padding-left: var(--enshell-navmain-headerdesign2-megamenu-icon-spacing); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a::before { display: block; content: ""; position: absolute; padding: 0; height: 100%; background-position: center center; background-repeat: no-repeat; left: 20px; top: 50%; transform: translateY(-50%); } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a:hover:before { left: 25px; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-active a:hover:before, .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.current-menu-item a:hover:before { left: 20px; } .headermain-design1 .navmain .navmain-dropdown-megamenu:hover .navmain-subcontainer .navmain-icon a::before, .headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a:hover:before, .headermain-design1 .navmain .navmain-dropdown-megamenu.navmain-active .navmain-subcontainer .navmain-icon a:hover:before { content: ""; } .headermain-design2 .navmain .navmain-dropdown-megamenu:hover .navmain-subcontainer .navmain-icon a::before, .headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a:hover:before, .headermain-design2 .navmain .navmain-dropdown-megamenu.navmain-active .navmain-subcontainer .navmain-icon a:hover:before { content: ""; } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a::before { width: var(--enshell-navmain-headerdesign1-megamenu-icon-size); background-size: var(--enshell-navmain-headerdesign1-megamenu-icon-size) auto; background-image: url("../images/blank.png"); } .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a::before { width: var(--enshell-navmain-headerdesign2-megamenu-icon-size); background-size: var(--enshell-navmain-headerdesign2-megamenu-icon-size) auto; background-image: url("../images/blank.png"); } /* Icons */ .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-registerdomain a::before, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-registerdomain a::before { background-image: url("../images/domains.png"); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-transferdomain a::before, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-transferdomain a::before { background-image: url("../images/transfer.png"); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-custom1 a::before, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-custom1 a::before { background-image: url("../images/webhosting.png"); } .headermain.headermain-design1 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-custom2 a::before, .headermain.headermain-design2 .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon.navmain-icon-custom2 a::before { background-image: url("../images/resellerhosting2.png"); } /* ===== Real mobile mega-menu column collapse (verbatim thresholds 880px/650px, found live on anysls.com by inspecting matched stylesheet rules directly — not guessed). The 880px rule hides the mega-menu's description column and lets the link-card column take full width; the 650px rule is part of a much larger real selector shared across many page-body grid components (gridboxes/product- boxes/etc.) — only the ".navmain-link" portion of it is reused here since the rest is page-body scope, not shell. Without these, the mega-menu's link cards stayed at their desktop 48% width inside the mobile drawer, rendering as a cramped 2-up grid instead of the real site's full-width stacked cards. ===== */ @media (max-width: 880px) { .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col1 { border-right: none; width: 100%; padding: 0; } .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-columns .navmain-columns-col2 { display: none; } } @media (max-width: 650px) { .navmain .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link, .navmain .navmain-dropdown-megamenu.navmain-dropdown-1col .navmain-subcontainer .navmain-link, .navmain .navmain-dropdown-megamenu.navmain-dropdown-2col .navmain-subcontainer .navmain-link, .navmain .navmain-dropdown-megamenu.navmain-dropdown-3col .navmain-subcontainer .navmain-link, .navmain .navmain-dropdown-megamenu.navmain-dropdown-4col .navmain-subcontainer .navmain-link { width: var(--enshell-column-1); } } /* ===== Mobile structural switch (verbatim, real threshold: 1260px) ===== */ @media (max-width: 1260px) { .headermain.headermain-design1 .headermain-inner { flex-direction: column; } .headermain.headermain-design1 .headermain-logo { margin: 20px 0; } .headermain.headermain-design2 .headermain-logo { margin: 0; } .navmain-container { width: 100%; } .headermain.headermain-design1 .navmain-container { background: var(--enshell-navmain-mobile-headerdesign1-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-background-border); margin: 0 0 20px 0; } .headermain.headermain-design2 .navmain-container { background: var(--enshell-navmain-mobile-headerdesign2-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-background-border); } .headermain.headermain-design1 .navmain { line-height: var(--enshell-navmain-mobile-headerdesign1-height); } .headermain.headermain-design2 .navmain { line-height: var(--enshell-navmain-mobile-headerdesign2-height); } .headermain-design1 .navmain ul li a { color: var(--enshell-navmain-mobile-headerdesign1-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-button-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-mobile-headerdesign1-button-padding); } .headermain-design2 .navmain ul li a { color: var(--enshell-navmain-mobile-headerdesign2-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-button-foreground-shadow) 1px 1px; padding: 0 var(--enshell-navmain-mobile-headerdesign2-button-padding); } .headermain-design1 .navmain ul li:hover, .headermain-design1 .navmain ul li.navmain-active, .headermain-design1 .navmain ul li.current_page_parent, .headermain-design1 .navmain ul li.current_page_item { background: var(--enshell-navmain-mobile-headerdesign1-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-bottom) 100%); } .headermain-design2 .navmain ul li:hover, .headermain-design2 .navmain ul li.navmain-active, .headermain-design2 .navmain ul li.current_page_parent, .headermain-design2 .navmain ul li.current_page_item { background: var(--enshell-navmain-mobile-headerdesign2-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-bottom) 100%); } .headermain-design1 .navmain ul li:hover a, .headermain-design1 .navmain ul li.navmain-active a, .headermain-design1 .navmain ul li.current_page_parent a, .headermain-design1 .navmain ul li.current_page_item a { color: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li:hover a, .headermain-design2 .navmain ul li.navmain-active a, .headermain-design2 .navmain ul li.current_page_parent a, .headermain-design2 .navmain ul li.current_page_item a { color: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground-shadow) 1px 1px; } .headermain-design1 .navmain ul li.navmain-home { border-radius: var(--enshell-border-radius-default) 0 0 var(--enshell-border-radius-default); } .headermain-design1 .navmain ul li.navmain-home a { color: var(--enshell-navmain-mobile-headerdesign1-home-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-home-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li.navmain-home a { color: var(--enshell-navmain-mobile-headerdesign2-home-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-home-foreground-shadow) 1px 1px; } .headermain-design1 .navmain ul li.navmain-home a:hover { color: var(--enshell-navmain-mobile-headerdesign1-home-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-home-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain ul li.navmain-home a:hover { color: var(--enshell-navmain-mobile-headerdesign2-home-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-home-hover-foreground-shadow) 1px 1px; } .headermain-design1 .navmain ul li.navmain-cta { border-radius: 0 var(--enshell-border-radius-default) var(--enshell-border-radius-default) 0; } .headermain-design1 .navmain ul li.navmain-cta { background: var(--enshell-navmain-mobile-headerdesign1-cta-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-cta-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-cta-background-gradient-bottom) 100%) !important; margin-left: auto; } .headermain-design2 .navmain ul li.navmain-cta { background: var(--enshell-navmain-mobile-headerdesign2-cta-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-cta-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-cta-background-gradient-bottom) 100%) !important; } .headermain-design1 .navmain ul li.navmain-cta:hover { background: var(--enshell-navmain-mobile-headerdesign1-cta-hover-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-cta-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-cta-hover-background-gradient-bottom) 100%) !important; } .headermain-design2 .navmain ul li.navmain-cta:hover { background: var(--enshell-navmain-mobile-headerdesign2-cta-hover-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-cta-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-cta-hover-background-gradient-bottom) 100%) !important; } .headermain-design1 .navmain ul li.navmain-cta a { color: var(--enshell-navmain-mobile-headerdesign1-cta-foreground) !important; text-shadow: var(--enshell-navmain-mobile-headerdesign1-cta-foreground-shadow) 1px 1px !important; padding: 0 var(--enshell-navmain-mobile-headerdesign1-cta-padding); } .headermain-design2 .navmain ul li.navmain-cta a { color: var(--enshell-navmain-mobile-headerdesign2-cta-foreground) !important; text-shadow: var(--enshell-navmain-mobile-headerdesign2-cta-foreground-shadow) 1px 1px !important; padding: 0 var(--enshell-navmain-mobile-headerdesign2-cta-padding); } .headermain-design1 .navmain ul li.navmain-cta a:hover, .headermain-design1 .navmain ul li.navmain-cta a:active { color: var(--enshell-navmain-mobile-headerdesign1-cta-hover-foreground) !important; text-shadow: var(--enshell-navmain-mobile-headerdesign1-cta-hover-foreground-shadow) 1px 1px !important; } .headermain-design2 .navmain ul li.navmain-cta a:hover, .headermain-design2 .navmain ul li.navmain-cta a:active { color: var(--enshell-navmain-mobile-headerdesign2-cta-hover-foreground) !important; text-shadow: var(--enshell-navmain-mobile-headerdesign2-cta-hover-foreground-shadow) 1px 1px !important; } .headermain-design1 .navmain .navmain-dropdown a:before { color: var(--enshell-navmain-mobile-headerdesign1-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-foreground-shadow); } .headermain-design2 .navmain .navmain-dropdown a:before { color: var(--enshell-navmain-mobile-headerdesign2-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-foreground-shadow) 1px 1px; } .headermain-design1 .navmain .navmain-dropdown:hover a:before, .headermain-design1 .navmain .navmain-dropdown a:hover:before, .headermain-design1 .navmain .navmain-dropdown.navmain-active a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:hover:before { color: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain .navmain-dropdown:hover a:before, .headermain-design2 .navmain .navmain-dropdown a:hover:before, .headermain-design2 .navmain .navmain-dropdown.navmain-active a:hover:before, .headermain-design2 .navmain .navmain-dropdown.current_page_parent a:hover:before, .headermain-design2 .navmain .navmain-dropdown.current_page_item a:hover:before { color: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } .headermain-design1 .navmain .navmain-dropdown.navmain-active a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:before { color: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain-design2 .navmain .navmain-dropdown.navmain-active a:before, .headermain-design2 .navmain .navmain-dropdown.current_page_parent a:before, .headermain-design2 .navmain .navmain-dropdown.current_page_item a:before { color: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } } /* --- Sticky menu (verbatim, layout.css lines 1826-1846) --- The real theme's own CSS only sets position:relative here; the actual position:fixed / top:0 pinning is applied via inline style by the real jQuery "stickUp" plugin (template.js, "Sticky menu" section, confirmed live via scroll test) — ported to vanilla JS below (see app.js). This rule supplies the stuck-state visual treatment: full width, no max-width cap, elevated z-index/shadow, padding and border-bottom removed. */ .headermain.headermain-design1.isStuck { width: 100%; max-width: none; position: relative; z-index: 9999; padding: 0; box-shadow: var(--enshell-shadow); border-bottom: none; } /* ===== Mobile interactive toggle (verbatim classes/rules, real threshold restored: 755px) ===== */ @media (max-width: 755px) { /* PHASE: Final header responsive parity fix. This block was previously retargeted from the real theme's 755px threshold to 1260px as "a deliberate simplification" — but that collapsed two genuinely different real behaviors into one: the real site stacks the logo above the nav at 1260px (handled by the separate "structural switch" block above, correctly still at 1260px) but keeps the FULL nav visible — real horizontal items on a dark bar, hiding individual low-priority items one at a time via dedicated breakpoints (see ".navmain-link7"/".navmain-link6" rules below) — all the way down to 755px before actually switching to hamburger-only. Verified directly against the live real site at 1260/1200/1100/1024/900/768: no hamburger icon is visible at any of those widths. Restored to the real 755px trigger. Every rule/class below this line is still verbatim from the real theme — only the trigger width changed back. */ .headermain.headermain-design2 .headermain-inner { flex-direction: column; } .headermain.headermain-design1.isStuck, .headermain.headermain-design2 .navmain-container.isStuck { max-height: 300px; overflow-y: scroll; } .headermain .headermain-buttons { display: none; } /* Mobile Desktop Removal */ .navmain ul li { /* Remove links for desktop */ display: none; } .navmain .navmain-dropdown .navmain-subcontainer { /* Remove desktop subcontainer (stops it showing on hover) */ display: none; } .navmain ul li.navmain-home { /* Remove the desktop home icon */ display: none !important; } /* Mobile Menu */ .navmain-mobile ul { display: flex; flex-direction: column; } .navmain-mobile ul li { display: block !important; /* Display links for mobile */ width: 100%; background-image: none; /* Remove the nav divider */ margin: 0; border-top: transparent 1px solid; } .navmain-mobile .navmain-dropdown a { display: block; text-align: center; } .headermain.headermain-design1 .navmain-mobile ul li { background: var(--enshell-navmain-mobile-headerdesign1-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-button-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-button-background-border); } .headermain.headermain-design2 .navmain-mobile ul li { background: var(--enshell-navmain-mobile-headerdesign2-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-button-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-button-background-border); } .headermain.headermain-design1 .navmain-mobile ul li:last-child { border-top: var(--enshell-navmain-mobile-headerdesign1-button-background-border) 1px solid; } .headermain.headermain-design2 .navmain-mobile ul li:last-child { border-top: var(--enshell-navmain-mobile-headerdesign2-button-background-border) 1px solid; } .headermain-design1 .navmain-mobile ul li a, .headermain-design2 .navmain-mobile ul li a { text-align: center; } .headermain.headermain-design1 .navmain-mobile ul li a { color: var(--enshell-navmain-mobile-headerdesign1-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-button-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile ul li a { color: var(--enshell-navmain-mobile-headerdesign2-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-button-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain-mobile ul li:hover { background: var(--enshell-navmain-mobile-headerdesign1-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-button-hover-background-border); } .headermain.headermain-design2 .navmain-mobile ul li:hover { background: var(--enshell-navmain-mobile-headerdesign2-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-button-hover-background-border); } .headermain.headermain-design1 .navmain-mobile ul li:last-child:hover { border-top: var(--enshell-navmain-mobile-headerdesign1-button-hover-background-border) 1px solid; } .headermain.headermain-design2 .navmain-mobile ul li:last-child:hover { border-top: var(--enshell-navmain-mobile-headerdesign2-button-hover-background-border) 1px solid; } .headermain.headermain-design1 .navmain-mobile ul li:hover a { color: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile ul li:hover a { color: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain-mobile ul li.navmain-active, .headermain.headermain-design1 .navmain-mobile ul li.navmain-active:hover, .headermain.headermain-design1 .navmain-mobile ul li.current_page_parent, .headermain.headermain-design1 .navmain-mobile ul li.current_page_parent:hover, .headermain.headermain-design1 .navmain-mobile ul li.current_page_item, .headermain.headermain-design1 .navmain-mobile ul li.current_page_item:hover, .headermain.headermain-design1 .navmain-mobile ul li.navmain-dropdown-mobile-open { background: var(--enshell-navmain-mobile-headerdesign1-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-button-hover-background-border); } .headermain.headermain-design2 .navmain-mobile ul li.navmain-active, .headermain.headermain-design2 .navmain-mobile ul li.navmain-active:hover, .headermain.headermain-design2 .navmain-mobile ul li.current_page_parent, .headermain.headermain-design2 .navmain-mobile ul li.current_page_parent:hover, .headermain.headermain-design2 .navmain-mobile ul li.current_page_item, .headermain.headermain-design2 .navmain-mobile ul li.current_page_item:hover, .headermain.headermain-design2 .navmain-mobile ul li.navmain-dropdown-mobile-open { background: var(--enshell-navmain-mobile-headerdesign2-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-button-hover-background-border); } .headermain.headermain-design1 .navmain-mobile ul li.navmain-active:last-child:hover, .headermain.headermain-design1 .navmain-mobile ul li.current_page_parent:last-child:hover, .headermain.headermain-design1 .navmain-mobile ul li.current_page_item:last-child:hover { border-top: var(--enshell-navmain-mobile-headerdesign1-button-hover-background-border) 1px solid; } .headermain.headermain-design2 .navmain-mobile ul li.navmain-active:last-child:hover, .headermain.headermain-design2 .navmain-mobile ul li.current_page_parent:last-child:hover, .headermain.headermain-design2 .navmain-mobile ul li.current_page_item:last-child:hover { border-top: var(--enshell-navmain-mobile-headerdesign2-button-hover-background-border) 1px solid; } .headermain.headermain-design1 .navmain-mobile ul li.navmain-active a, .headermain.headermain-design1 .navmain-mobile ul li.current_page_parent a, .headermain.headermain-design1 .navmain-mobile ul li.current_page_item a, .headermain.headermain-design1 .navmain-mobile ul li.navmain-dropdown-mobile-open a { color: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-button-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile ul li.navmain-active a, .headermain.headermain-design2 .navmain-mobile ul li.current_page_parent a, .headermain.headermain-design2 .navmain-mobile ul li.current_page_item a, .headermain.headermain-design2 .navmain-mobile ul li.navmain-dropdown-mobile-open a { color: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-button-hover-foreground-shadow) 1px 1px; } .navmain .navmain-mobile-home { /* Show mobile home icon */ display: flex; justify-content: center; align-items: center; width: 50px; text-decoration: none; } .headermain.headermain-design1 .navmain .navmain-mobile-home { height: var(--enshell-navmain-mobile-headerdesign1-height); color: var(--enshell-navmain-mobile-headerdesign1-home-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-home-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-mobile-home { height: var(--enshell-navmain-mobile-headerdesign2-height); color: var(--enshell-navmain-mobile-headerdesign2-home-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-home-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain .navmain-mobile-home:hover { color: var(--enshell-navmain-mobile-headerdesign1-home-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-home-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-mobile-home:hover { color: var(--enshell-navmain-mobile-headerdesign2-home-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-home-hover-foreground-shadow) 1px 1px; } .navmain .navmain-mobile-icon { /* Show mobile menu icon */ float: right; display: flex; justify-content: center; align-items: center; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; font-variant: normal; text-rendering: auto; position: absolute; top: 0; right: 0; cursor: pointer; width: 50px; text-decoration: none; font-size: 1.4em; } .headermain.headermain-design1 .navmain .navmain-mobile-icon:before { height: var(--enshell-navmain-mobile-headerdesign1-height); line-height: var(--enshell-navmain-mobile-headerdesign1-height); content: var(--enshell-navmain-mobile-headerdesign1-icon-burger); color: var(--enshell-navmain-mobile-headerdesign1-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-mobile-icon:before { height: var(--enshell-navmain-mobile-headerdesign2-height); line-height: var(--enshell-navmain-mobile-headerdesign2-height); content: var(--enshell-navmain-mobile-headerdesign2-icon-burger); color: var(--enshell-navmain-mobile-headerdesign2-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain .navmain-mobile-icon-open:before { /* Show mobile menu icon open format */ content: var(--enshell-navmain-mobile-headerdesign1-icon-burger-active); color: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain .navmain-mobile-icon-open:before { content: var(--enshell-navmain-mobile-headerdesign2-icon-burger-active); color: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } .headermain-design1 .navmain-mobile ul li.navmain-cta, .headermain-design2 .navmain-mobile ul li.navmain-cta { border-radius: 0 0 var(--enshell-border-radius-default) var(--enshell-border-radius-default); text-align: center; } /* Dropdown */ .navmain-mobile .navmain-dropdown { position: relative; /* Force correct positioning */ } .navmain-mobile .navmain-dropdown .navmain-subcontainer { border-top: none !important; border-bottom: none !important; } .navmain-mobile .navmain-dropdown:hover .navmain-subcontainer-mobile-open, .navmain-mobile .navmain-dropdown .navmain-subcontainer-mobile-open { /* Display the mobile menu (overrides sub-container) */ width: 100%; left: 0; top: 0; position: relative; display: block; border: none; border-radius: 0; } .navmain-mobile .navmain-dropdown a:before { /* Remove main button dropdown icon */ display: none; } .navmain-mobile .navmain-dropdown .navmain-mobile-child { /* Child dropdown icon */ display: flex; justify-content: center; align-items: center; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; position: absolute; top: 0; right: 0; cursor: pointer; width: 50px; height:50px; text-decoration: none; font-size: 1.4em; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown .navmain-mobile-child:before { content: var(--enshell-navmain-mobile-headerdesign1-icon); color: var(--enshell-navmain-mobile-headerdesign1-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown .navmain-mobile-child:before { content: var(--enshell-navmain-mobile-headerdesign2-icon); color: var(--enshell-navmain-mobile-headerdesign2-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-foreground-shadow) 1px 1px; } .navmain-mobile .navmain-dropdown-mobile-open .navmain-mobile-child:before { margin-top: -10px; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-mobile-open .navmain-mobile-child:before { content: var(--enshell-navmain-mobile-headerdesign1-icon-hover); color: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-icon-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-mobile-open .navmain-mobile-child:before { content: var(--enshell-navmain-mobile-headerdesign2-icon-hover); color: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-icon-hover-foreground-shadow) 1px 1px; } /* Dropdown - Mega Menu */ .headermain.headermain-design1 .navmain-mobile .navmain-dropdown.navmain-dropdown-megamenu .navmain-subcontainer { padding: var(--enshell-navmain-mobile-headerdesign1-megamenu-padding); background: var(--enshell-navmain-mobile-headerdesign1-megamenu-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-megamenu-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-megamenu-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-megamenu-background-border); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown.navmain-dropdown-megamenu .navmain-subcontainer { padding: var(--enshell-navmain-mobile-headerdesign2-megamenu-padding); background: var(--enshell-navmain-mobile-headerdesign2-megamenu-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-megamenu-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-megamenu-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-megamenu-background-border); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { margin: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-margin); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link { margin: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-margin); } .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { text-align: left; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-padding); color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-background-border); background: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-megamenu-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-megamenu-button-background-gradient-bottom) 100%); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-padding); color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-background-border); background: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-megamenu-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-megamenu-button-background-gradient-bottom) 100%); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:hover, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:active { color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-foreground-shadow) 1px 1px; background: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-hover-background-border); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:hover, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link a:active { color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-foreground-shadow) 1px 1px; background: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-hover-background-border); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:active { color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-foreground-shadow) 1px 1px; background: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-megamenu-button-active-background-border); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-link.current-menu-item a:active { color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-foreground-shadow) 1px 1px; background: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-megamenu-button-active-background-border); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a { padding-left: var(--enshell-navmain-mobile-headerdesign1-megamenu-icon-spacing); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a { padding-left: var(--enshell-navmain-mobile-headerdesign2-megamenu-icon-spacing); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a::before { width: var(--enshell-navmain-mobile-headerdesign1-megamenu-icon-size); background-size: var(--enshell-navmain-mobile-headerdesign1-megamenu-icon-size) auto; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-megamenu .navmain-subcontainer .navmain-icon a::before { width: var(--enshell-navmain-mobile-headerdesign2-megamenu-icon-size); background-size: var(--enshell-navmain-mobile-headerdesign2-megamenu-icon-size) auto; } /* Dropdown - Single */ .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer { width: 100%; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer { background: var(--enshell-navmain-mobile-headerdesign1-dropdown-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-dropdown-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-dropdown-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign1-dropdown-background-border); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer { background: var(--enshell-navmain-mobile-headerdesign2-dropdown-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-dropdown-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-dropdown-background-gradient-bottom) 100%); border-color: var(--enshell-navmain-mobile-headerdesign2-dropdown-background-border); } .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a { justify-content: center; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-padding); color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-background-border); background: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-dropdown-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-dropdown-button-background-gradient-bottom) 100%); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a { padding: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-padding); color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-background-border); background: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-dropdown-button-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-dropdown-button-background-gradient-bottom) 100%); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:before { content: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon); color: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:before { content: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon); color: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover { color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-border); background: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-dropdown-button-hover-background-gradient-bottom) 100%); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover { color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-border); background: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-dropdown-button-hover-background-gradient-bottom) 100%); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover:before { content: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-hover); color: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link a:hover:before { content: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-hover); color: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-hover-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-hover-foreground-shadow) 1px 1px; } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:active { color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-border); background: var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign1-dropdown-button-active-background-gradient-bottom) 100%); } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:hover, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:active, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:hover, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:active { color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-foreground-shadow) 1px 1px; border-color: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-border); background: var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-top) 0, var(--enshell-navmain-mobile-headerdesign2-dropdown-button-active-background-gradient-bottom) 100%); } .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:before, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:hover:before, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:active:before, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:before, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:hover:before, .headermain.headermain-design1 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:active:before { content: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-active); color: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign1-dropdown-icon-active-foreground-shadow) 1px 1px; } .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:before, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:hover:before, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.navmain-active a:active:before, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:before, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:hover:before, .headermain.headermain-design2 .navmain-mobile .navmain-dropdown-single .navmain-subcontainer .navmain-link.current-menu-item a:active:before { content: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-active); color: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-active-foreground); text-shadow: var(--enshell-navmain-mobile-headerdesign2-dropdown-icon-active-foreground-shadow) 1px 1px; } .banner .list ul li { width: 100%; text-align: center; background-image: none; padding: 5px 10px; } } /* Additional verbatim rule — layout.css lines 3299-3321 (badge text content for .navmain-highlight-hot/.navmain-highlight-new), outside the main 488-1420 extraction range above but required for the mega-menu HOT/NEW ribbon badges (Register Domain, Dedicated Servers, 360Monitoring, Knowledgebase) to render their label text. Only the .navmain-scoped selector from that shared rule is reused; the unrelated footermain/product-boxes/product-tables/product-slider1 selectors on the same rule (out of scope, not part of the header) are omitted. */ .navmain .navmain-dropdown .navmain-subcontainer .navmain-highlight.navmain-highlight-hot::before { content: "hot"; } .navmain .navmain-dropdown .navmain-subcontainer .navmain-highlight.navmain-highlight-new::before { content: "new"; } /* ---- from header-overrides.css ---- */ /* Minimal, deliberate deviations from the verbatim navmain-original.css — NOT geometry/structure changes, only asset substitutions for two WHMCS-core (not glazeanysrv-theme) dependencies this static project cannot license/bundle: 1. Font Awesome 5 Pro — loaded by WHMCS core (head.tpl references {$WEB_ROOT}/assets/css/fontawesome-all.min.css, a WHMCS asset, not a file shipped inside glazeanysrv/). Used for the dropdown caret (`.navmain-dropdown a:before`, content: var(--enshell-navmain-headerdesign1-icon) = the Font Awesome glyph "\f0da"), the Home nav icon () and the Order CTA cart icon (). Replaced with a plain Unicode triangle and inline SVGs respectively — same position/size envelope the real CSS already reserves (0.8em / 10px box for the caret), no layout change. 2. Nothing else in navmain-original.css / variables-original.css is overridden here — box model, spacing, colors, mega-menu geometry all come from the real files, unmodified. */ /* Matched to the exact real selectors (including the .headermain-design1 prefix) so specificity ties with navmain-original.css's own rules — a plain ".navmain .navmain-dropdown a:before" here would lose the cascade to the more specific real rules and render nothing (the FA glyph codepoint, unstyled, is invisible without the FA font). */ .headermain-design1 .navmain .navmain-dropdown a:before { font-family: inherit; font-weight: 400; content: "\25B8"; /* ▸ closed */ } .headermain-design1 .navmain .navmain-dropdown:hover a:before, .headermain-design1 .navmain .navmain-dropdown a:hover:before, .headermain-design1 .navmain .navmain-dropdown.navmain-active a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:hover:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:hover:before, .headermain-design1 .navmain .navmain-dropdown.navmain-active a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_parent a:before, .headermain-design1 .navmain .navmain-dropdown.current_page_item a:before { font-family: inherit; font-weight: 400; content: "\25BE"; /* ▾ open/hover */ } .navmain .navmain-mobile-icon, .navmain .navmain-mobile-icon-open, .navmain-mobile .navmain-dropdown .navmain-mobile-child { font-family: inherit !important; font-weight: 400 !important; } .headermain .navmain .navmain-mobile-icon:before { content: "\2630" !important; /* ☰ */ } .headermain .navmain .navmain-mobile-icon-open:before { content: "\2715" !important; /* ✕ */ } .navmain-mobile .navmain-dropdown .navmain-mobile-child:before, .navmain-mobile .navmain-dropdown-mobile-open .navmain-mobile-child:before { content: "\25BE" !important; /* ▾ */ } /* base.css resets img/svg to display:block for content images; here the icons sit inline next to (or as) nav text, so that reset has to be undone locally or it breaks the icon-bearing links out onto their own line and inflates the 65px nav row height. */ .navmain-home-icon, .navmain-cart-icon { display: inline-block; vertical-align: middle; } .navmain-home-icon { width: 18px; height: 18px; } .navmain-mobile-home .navmain-home-icon { width: 20px; height: 20px; } .navmain-cart-icon { width: 15px; height: 15px; margin-right: 6px; fill: currentColor; } /* sr-only utility (not part of the original theme; purely a11y label for the icon-only Home link, adds no visible layout) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Shared footer parity styles. */ .footermain { background: var(--enshell-color-black); color: var(--enshell-color-grey); border-top: var(--enshell-color-border) 1px solid; /* Same root cause and same fix as the header (shell-parity.css ".headermain"): Spanish body.css intentionally scales body copy to 1.125rem above 1024px for article readability, which was leaking into the footer (measured line-height 28.8px vs the real site's fixed 25.6px, i.e. 18px vs 16px em-based sizing cascading into every heading/link/card in em units). The footer is navigation/utility chrome, not reading content, so pin it back to the real fixed 16px like the header. */ font-size: 1rem; } .template-glaze .footermain { color: var(--enshell-color-white); border-top: none; } /* Real rule is two stacked layers: .footermain-background is "#95c7fa url(background-glaze.jpg) center bottom repeat-x" and .footermain-background-inner sits on top at "rgba(0,0,0,0.4)". Verified directly (2026-10-03, response tracking + in-page fetch) that background-glaze.jpg is CURRENTLY 404 ON THE LIVE REAL SITE ITSELF — a production bug on anysls.com, not a local gap. The real footer's actual current rendering is therefore just the flat base color under the scrim, no texture visible at all (confirmed: flat, grain-free in live screenshots). #95c7fa composited under a 40% black overlay resolves to exactly rgb(89,119,150) — reproduced directly as a flat value, matching what the real site actually shows right now, not approximating it. (A same-named file exists in the local real-theme reference project, but it is a server-room photo, not a footer texture — wrong asset under a coincidentally-matching, garbled filename; not used.) */ .template-glaze .footermain .footermain-background { background: #597796; } .footermain .footermain-inner { display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--enshell-spacing-child) 0; } .footermain .footermain-col { width: 18.5%; } .footermain .footermain-col4 { width: 39%; } .footermain a, .footermain a:hover { color: var(--enshell-color-grey); } .template-glaze .footermain a, .template-glaze .footermain a:hover { color: var(--enshell-color-white); } .footermain .footermain-box { margin: 0 0 var(--enshell-spacing-child) 0; } .footermain .footermain-box ul:last-child, .footermain .footermain-box p:last-child, .footermain .footermain-box .footermain-heading:last-child, .footermain .footermain-box .linkblocks:last-child { margin-bottom: 0; } .footermain .footermain-box ul { display: flex; flex-direction: column; margin-bottom: 0; list-style: none; padding: 0; } .footermain .footermain-box ul li { position: relative; /* Generic "li { margin-block-end: var(--space-2) }" in base.css (an 8px spacing default for ordinary content lists) was leaking into every footer link, stacking on top of the real site's own spacing mechanism (10px padding on the , not li margin — confirmed: the real site has no li margin here at all). Not a specificity fight — base.css's rule was simply the only one setting margin at all, since this ported rule never needed to zero it out on the real site. */ margin-block-end: 0; } .footermain .footermain-box ul li a { display: block; padding: 10px 10px 10px 10px; text-decoration: none; border-bottom: var(--enshell-color-border) 1px solid; } .footermain .footermain-box ul li a i { margin-right: 10px; } .footermain .footermain-box ul li:first-child a { border-top: var(--enshell-color-border) 1px solid; } .footermain .footermain-box ul li a:hover { padding-left: 15px; font-weight: bold; color: var(--enshell-color-white); } .footermain .footermain-heading { color: var(--enshell-color-primary-background); text-shadow: var(--enshell-color-black) 1px 1px; font-size: 1.3em; font-weight: bold; text-align: left; margin: 0 0 var(--enshell-spacing-child) 0; font-family: var(--enshell-font-heading); } .footermain .footermain-text { margin: 0 0 var(--enshell-spacing-child) 0; } /* Highlight (HOT / NEW pills on footer links) */ .footermain .footermain-highlight { position: relative; } /* Reserve space for the absolutely-positioned badge below so it never overlaps link text — longer Spanish labels (e.g. "Servidores dedicados") wrap or run close enough to the right edge to collide with the badge otherwise. Matches the specificity shape of ".footermain .footermain-box ul li a" (2 classes + 3 type selectors) plus the extra ".footermain-highlight" class, since a bare ".footermain .footermain-highlight > a" (2 classes + 1 type selector) loses that fight and its padding-right silently never applies — confirmed via computed-style measurement, not guessed. */ .footermain .footermain-highlight::after { position: absolute; right: 10px; /* The real theme's own "top:50%" centers the badge on the whole
  • box height — correct for the real site's one-line labels, but on Spanish's longer labels that wrap to two lines it floats the badge in the gap between lines instead of next to either one. Anchored here to the vertical center of the FIRST line specifically (link padding-top 10px + half its 25.6px line-height = 22.8px), which reads correctly whether the row wraps or not. */ top: 50%; transform: translateY(-50%); text-align: center; padding: 3px 3px; font-size: 0.7em; line-height: 1; font-weight: bold; border-radius: var(--enshell-border-radius-default); text-transform: uppercase; white-space: nowrap; } .footermain .footermain-highlight-hot::after { background: var(--enshell-color-badge-hot-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-hot-background-gradient-top) 0, var(--enshell-color-badge-hot-background-gradient-bottom) 100%); color: var(--enshell-color-badge-hot-foreground); content: "hot"; } .footermain .footermain-highlight-new::after { background: var(--enshell-color-badge-new-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-badge-new-background-gradient-top) 0, var(--enshell-color-badge-new-background-gradient-bottom) 100%); color: var(--enshell-color-badge-new-foreground); content: "new"; } /* Linkblocks (address / email / phone / CIF boxes in column 4) */ .linkblocks { margin: 0 0 var(--enshell-spacing-child) 0; } .linkblocks .linkblocks-linkblock { background: var(--enshell-color-box-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-background-gradient-top) 0, var(--enshell-color-box-active-background-gradient-bottom) 100%); border-radius: var(--enshell-border-radius-default); margin: 0 0 15px 0; border: var(--enshell-color-box-active-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); color: var(--enshell-color-box-active-foreground); font-weight: bold; width: 100%; padding: 8px 15px; } .linkblocks .linkblocks-linkblock:last-child { margin-bottom: 0; } .linkblocks .linkblocks-linkblock a { display: block; color: var(--enshell-color-box-active-foreground); } .linkblocks .linkblocks-linkblock a:hover { color: var(--enshell-color-primary-background); } .linkblocks .linkblocks-linkblock i, .linkblocks .linkblocks-linkblock svg { margin-right: 15px; } /* Social Icons (real image files, not font glyphs) */ .social-icons { display: flex; flex-wrap: wrap; } .social-icons .social-icons-icon { margin: 8px 8px; } .social-icons .social-icons-icon img { border-radius: var(--enshell-border-radius-default); max-width: 50px; display: block; } .social-icons .social-icons-icon img:hover { transition: transform .5s ease; transform: scale(1.1); } /* This project's social icons are inline (real icon paths), not — the rule above never matches them. base.css's generic responsive-media reset ("svg{display:block;max-width:100%; height:auto}") only gives correct intrinsic sizing to true replaced elements (img/video); a bare viewBox-only inline has no such intrinsic size and was collapsing to 0x0 (confirmed via computed style), making the whole "Síguenos" row look like dead empty space. Real site's own icons render at a similar small square size. */ .social-icons .social-icons-icon svg { width: 32px; height: 32px; display: block; border-radius: var(--enshell-border-radius-default); } .social-icons .social-icons-icon svg:hover { transition: transform .5s ease; transform: scale(1.1); } /* Buttons (the "more" link on the About Company blurb) */ .button1 { display: inline-block; vertical-align: baseline; outline: none; cursor: pointer; text-align: center; text-decoration: none; border-radius: var(--enshell-border-radius-default); font-style: normal; padding: .5em 1em .5em; font-weight: bold; } .button1-more { padding: 4px 8px; line-height: 1; font-size: 0.8em; margin: 5px; } .color1, .color1:active, .color1:visited { color: var(--enshell-color-primary-foreground) !important; border: solid 1px var(--enshell-color-primary-background-border) !important; background: var(--enshell-color-primary-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-primary-background-gradient-top) 0, var(--enshell-color-primary-background-gradient-bottom) 100%) !important; text-shadow: var(--enshell-color-primary-foreground-shadow) 1px 1px !important; } .color1:hover, .color1:focus { color: var(--enshell-color-primary-active-foreground) !important; border: solid 1px var(--enshell-color-primary-active-background-border) !important; background: var(--enshell-color-primary-active-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-primary-active-background-gradient-top) 0, var(--enshell-color-primary-active-background-gradient-bottom) 100%) !important; text-shadow: var(--enshell-color-primary-active-foreground-shadow) 1px 1px !important; } /* .color2 (secondary button) -- was ported into home.css only, so every ".color2" button on the 9 service pages (none of which load home.css) rendered with no background/border at all, just inherited white text from .banner a. Belongs here alongside .color1: both are core shared button variants used site-wide, not homepage-specific. */ .color2, .color2:active, .color2:visited { color: var(--enshell-color-secondary-foreground) !important; border: solid 1px var(--enshell-color-secondary-background-border) !important; background: var(--enshell-color-secondary-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-background-gradient-top) 0, var(--enshell-color-secondary-background-gradient-bottom) 100%) !important; text-shadow: var(--enshell-color-secondary-foreground-shadow) 1px 1px !important; } .color2:hover, .color2:focus { color: var(--enshell-color-secondary-active-foreground) !important; border: solid 1px var(--enshell-color-secondary-active-background-border) !important; background: var(--enshell-color-secondary-active-background) !important; background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-secondary-active-background-gradient-top) 0, var(--enshell-color-secondary-active-background-gradient-bottom) 100%) !important; text-shadow: var(--enshell-color-secondary-active-foreground-shadow) 1px 1px !important; } /* ---------- Copyrightmain (bottom legal/payment bar) ---------- */ .copyrightmain { background: var(--enshell-color-black); border-top: var(--enshell-color-border) 1px solid; padding: var(--enshell-spacing-child) 0; color: var(--enshell-color-white); } .template-glaze .copyrightmain { background: var(--enshell-color-black); color: var(--enshell-color-white); border-top: none; } .copyrightmain::after { content: ""; clear: both; } .copyrightmain .copyrightmain-inner { display: flex; flex-wrap: wrap; justify-content: space-between; } .copyrightmain a, .copyrightmain a:hover { color: var(--enshell-color-white); } .copyrightmain .copyrightmain-links ul { margin: 0; display: flex; list-style: none; padding: 0; } .copyrightmain .copyrightmain-links ul li { /* Same base.css "li{margin-block-end:.5rem}" leak as the footer link columns — here it extends each flex item's bottom margin box, inflating the whole legal-links row height by exactly 8px (measured 34px vs the real site's 26px) even though it's a horizontal row, not a stacked list. */ margin-block-end: 0; } .copyrightmain .copyrightmain-links ul li a { display: block; padding: 0 15px; border-right: #000000 1px solid; text-decoration: none; color: var(--enshell-color-white); } .copyrightmain .copyrightmain-links ul li a:hover { color: var(--enshell-color-white); font-weight: bold; } .copyrightmain .copyrightmain-links ul li:last-child a { border-right: none; } .copyrightmain .copyright-logos { border-top: #000000 1px solid; display: flex; justify-content: space-between; margin-top: var(--enshell-spacing-child); padding: var(--enshell-spacing-child) var(--enshell-spacing-child) 0 var(--enshell-spacing-child); max-width: 600px; } .copyrightmain .copyright-logos .copyright-logo { padding: 0 10px; } .copyrightmain .copyright-logos .copyright-logo img { width: 100%; height: auto; max-width: 175px; display: block; } /* Real mobile rules — glazeanysrv/css/layout.css @media (max-width: 850px) and @media (max-width: 800px), verbatim. */ @media (max-width: 850px) { .copyrightmain .copyright-logos { max-width: 100%; } } @media (max-width: 800px) { .copyrightmain .copyright-logos { flex-direction: column; align-items: center; } .copyrightmain .copyright-logos .copyright-logo { margin-bottom: var(--enshell-spacing-child); } .copyrightmain .copyright-logos .copyright-logo:last-child { margin-bottom: 0; } } /* Real mobile footer rules — glazeanysrv/css/layout.css, verbatim, at the theme's own two real breakpoints (unlike the nav, the footer's real responsive cascade only has two steps, so both are reused exactly rather than consolidated). */ /* @media (max-width: 1220px): columns wrap 3-per-row (31% each), column 4 becomes a full-width flex row with a top divider, headings center, and footer links become individual boxed pills. */ @media (max-width: 1220px) { .footermain .footermain-col { width: 31%; } .footermain .footermain-col4 { flex: 1; border-top: var(--enshell-color-border) 1px solid; padding-top: var(--enshell-spacing-child); } .footermain .footermain-heading { text-align: center; } .footermain .footermain-box ul li { margin: 0 0 15px 0; } .footermain .footermain-box ul li a { padding: 8px 15px; background: var(--enshell-color-box-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-background-gradient-top) 0, var(--enshell-color-box-active-background-gradient-bottom) 100%); border: var(--enshell-color-box-active-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); color: var(--enshell-color-box-active-foreground); font-weight: normal; text-align: center; border-radius: var(--enshell-border-radius-default); } .footermain .footermain-box ul li a i { display: none; } .footermain .footermain-box ul li:first-child a { border-top: var(--enshell-color-box-active-background-border) 1px solid; } .footermain .footermain-box ul li a:hover { color: var(--enshell-color-primary-background); padding-left: 15px; } .copyrightmain .copyrightmain-inner { flex-direction: column; } .copyrightmain .copyrightmain-text { text-align: center; margin: 0 0 15px 0; } .copyrightmain .copyrightmain-links { display: flex; justify-content: center; } } /* @media (max-width: 850px): full single-column stack; legal links also become boxed pills stacked vertically. */ @media (max-width: 850px) { .footermain .footermain-col { width: 100%; } .footermain .footermain-col4 { flex: 1; border-top: none; padding-top: 0; } .copyrightmain .copyrightmain-links { display: block; width: 100%; } .copyrightmain .copyrightmain-links ul { flex-direction: column; } .copyrightmain .copyrightmain-links ul li { display: block; } .copyrightmain .copyrightmain-links ul li a { padding: 8px 15px; background: var(--enshell-color-box-active-background); background: linear-gradient(var(--enshell-gradient-degrees), var(--enshell-color-box-active-background-gradient-top) 0, var(--enshell-color-box-active-background-gradient-bottom) 100%); border: var(--enshell-color-box-active-background-border) 1px solid; border-bottom-width: var(--enshell-border-bottom-width-default); color: var(--enshell-color-box-foreground); font-weight: normal; margin: 0 0 15px 0; text-align: center; border-radius: var(--enshell-border-radius-default); } .copyrightmain .copyrightmain-links ul li a:hover { color: var(--enshell-color-primary-background); } .copyrightmain .copyrightmain-links ul li:last-child a { margin-bottom: 0; } } /* ---- from footer-overrides.css ---- */ /* Same kind of deliberate, minimal deviation as header-overrides.css: Font Awesome is WHMCS-core, not part of the glazeanysrv theme export, so the real , , , , , and glyphs in the footer are swapped for inline SVGs of the same size envelope. No spacing/geometry rule from footer-original.css is touched here. */ .linkblocks-linkblock-icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 15px; fill: currentColor; display: inline-block; } .button1-more-icon { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; fill: currentColor; display: inline-block; } /* ============================================================ Mobile nav toggle: now uses the REAL theme classes/behavior (".navmain-mobile", ".navmain-mobile-child", ".navmain-subcontainer-mobile-open", ".navmain-dropdown-mobile-open") via assets/js/shell-nav.js, a faithful vanilla-JS port of the real theme's own script (glazeanysrv/js/template.js) — identical to the already-verified port used by the English blog (assets/js/app.js there). All styling for these real classes already exists verbatim above in the ported navmain-original.css block (~line 2130 on), which was sitting unused while this file instead drove an earlier, invented ".navmain-select" toggle — a name that, by coincidence, collides with a real but unrelated theme class (a native