/* ----------------------------------- AUTOMATION FOR zcustomalmon.css Use the below variables defined to style components of site ----------------------------------- */ :root { --font-family-main: @fontFamily|; --font-family-navbars: var(--font-family-main); --font-family-headings: @fontFamilyHeadings|; --to-top-link-background-color: var(--btn-main-background); --to-top-link-color: var(--btn-main-color); --to-top-link-border-radius: 50%; --to-top-link-box-shadow: 0 1px 6px rgba(0,0,0,.1), 0 2px 24px rgba(0,0,0,.2); --background-color-body: @bodyBackgroundColor|; --body-background-image: @bodyBackgroundImage|; --body-background-position: @bodyBackgroundImagePosition|; --body-background-repeat: @bodyBackgroundImageRepeat|; --body-background-size: @bodyBackgroundImageSize|; --background-danger: @backgroundDanger|; --background-success: @backgroundSuccess|; --primary-text-color: @primaryTextColor|; --secondary-text-color: @secondaryTextColor|; --required-text-color: @requiredTextColor|; --green-link-color: @greenLinkColor|; --scrollbar-track-color: @scrollbarTrackColor|; --scrollbar-color: @scrollbarColor|; --alert-success-background-color: var(--background-success); --alert-success-border-color: var(--background-success); --alert-success-text-color: #3c763d; --alert-danger-background-color: var(--background-danger); --alert-danger-border-color: var(--background-danger); --alert-danger-text-color: #a94442; /* badge implies the number against text on certain pages, say eg: on Party page step 2, Package Includes section */ --badge-background: var(--incrementor-button); --badge-content-color: #fff; /* header and navbar ------------------- */ --header-background-color: @headerBackground|; --header-background-image: @headerBackgroundImage| ; --header-background-position: @headerImageBackgroundPosition|; --header-background-repeat: @headerImageBackgroundRepeat|; --header-background-size: @headerImageBackgroundSize|; --header-box-shadow: @headerBoxShadow|; --header-height: @headerHeight|; --header-height-mobile: @headerHeightMobile|; /* header image logo */ --header-image-width: @headerImageWidth|; --header-image-height: @headerImageHeight|; /* navbar menu li anchors */ --header-font-size: @headerFontSize|; --header-font-weight: @headerFontWeight|; --header-line-height: @headerLineHeight|; --header-text-color: @headerTextColor|; --header-text-onHover-color: @headerOnHoverTextColor|; --header-text-transform: @headerTextTransform|; --header-link-dropdown-background-color: @headerLoginDropdownBackground|; --header-link-dropdown-color: var(--header-text-color); --header-link-dropdown-hover-background-color: @headerLoginDropdownOnHoverBackground|; --header-language-dropdown-color: var(--header-text-color); --header-language-dropdown-font-size: @headerLanguageIconSize|; --header-language-dropdown-menu-background-color: @headerLanguageBackgroundColor|; --header-dropdown-menu-carrot-top: @headerCarrotTop|; --header-dropdown-menu-border-top: @headerBorderTop|; /* cart */ --header-cart-color: @headerCartColor|; --header-cart-itemCount-background-color: @headerCartCounterBackground|; --header-cart-itemCount-hover-background-color: @headerCartCounterOnHoverBackground|; --header-cart-count-color: @headerCartTextColor|; /* dropdown menu mobile */ --header-burger-btn-color: @headerBurgerbtn|; --header-burger-btn-onHover-color: @headerOnHoverBurgerbtn|; --header-dropdown-menu-position-top: -6px; --header-dropdown-menu-item-background-color: @headerDropdownBackground|; --header-dropdown-menu-item-border: @headerDropdownBorder|; --header-dropdown-menu-font-size: @headerDropdownFontsize|; --header-dropdown-menu-font-color: var(--header-text-color); --header-dropdown-menu-font-weight: var(--header-font-weight); /* body and content ------------------- */ --pageContent-gap-from-header: 65px; /* page heading */ --page-header-color: @pageHeaderColor|; --page-header-text-transform: @pageHeaderTextTransform|; --page-header-font-size: @pageHeaderFontSize|; --page-header-font-weight: @pageHeaderFontWeight|; --page-header-font-family: var(--font-family-headings); --page-header-hover-color: @pageHeaderOnHoverColor|; /* location select page */ --location-title-background: @locationTitleBackground|; --location-title-color: @locationTitleColor|; --location-title-weight: @locationTitleFontWeight|; --location-header-font-size: @locationTitleFontSize|; --location-line-divider-border: @locationLineDividerBorder|; --party-location-border-radius: var(--content-card-border-radius); --party-location-border: var(--content-card-border); --party-location-box-shadow: var(--content-card-box-shadow); --party-location-background-color: var(--content-card-background-color); --party-location-location-color: var(--product-productName-color); --party-location-location-font-size: var(--product-productName-font-size); --party-location-location-font-weight: var(--product-productName-font-weight); --party-location-description-color: var(--product-productDescription-color); --party-location-description-font-size: var(--product-productDescription-font-size); --party-location-description-font-weight: var(--product-productDescription-font-weight); /* Date select page */ --date-container-background-color: @dateContainerBackgroundColor|; --date-container-heading-color: @dateContainerHeadingColor|; --date-container-color: @dateContainerColor|; --date-picker-background-color: @datePickerbtnBackgroundColor|; --date-picker-calender-img-color: @datePickerCalenderIconColor|; /* set none for black, invert(1) for white */ /* Product package card */ --content-card-background-color: @productBackground|; --content-card-box-shadow: @productBoxShadow|; --content-card-border: @productBorder|; --content-card-border-radius: @productBorderRadius|; --product-productName-color: @productNameColor|; --product-productName-font-size: @productNameFontSize|; --product-productName-font-weight: @productNameFontWeight|; --product-productName-font-family: var(--font-family-headings); --product-productName-border-radius: var(--content-card-border-radius); --secondary-dark-background: @productNameBackground|; --product-productDescription-color: @productDescColor|; --product-productDescription-font-weight: @productNameFontWeight|; --product-productDescription-font-size: @productDescFontSize|; --product-productDescription-font-family: var(--font-family-main); --product-ReadMore-background-color: @readMoreBackground|; --product-ReadMore-color: @readMoreColor|; --product-ReadMore-plusIcon-color: @readMorePlusIconColor|; --product-ReadMore-font-size: @readMoreFontSize|; --product-ReadMore-border: @readMoreBorder|; --product-ReadMore-border-radius: @readMoreBorderRadius|; --product-ReadMore-font-weight: @readMoreFontWeight|; --product-pricing-color: var(--product-productDescription-color); --product-pricing-font-size: var(--product-productDescription-font-size); --product-pricing-font-weight: var(--product-productDescription-font-weight); --incrementor-border: @incrementorBorder|; --incrementor-button: @incrementorBtnColor|; --product-totalPricing-color: var(--product-productDescription-color); --product-totalPricing-font-size: var(--product-productDescription-font-size); /* Contact Party page */ --contact-party-container-margin-top: 100px; --contact-party-container-background-color: @partySpecialistBackground|; --contact-party-container-padding: @partySpecialistPadding|; --contact-party-container-border-radius: @partySpecialistBorderRadius|; --contact-party-container-text-color: @partySpecialistTextColor|; /* Party Page */ --party-screen1-subheading-background: @partyScreen1SubheadingBackground|; --party-screen1-text-color: @partyScreen1TextColor|; --breadcrumb-color: var(--party-screen1-text-color); --party-pills-active-background-color: @partyPillActiveBackground|; --party-pills-active-title-color: @partyPillTextColor|; --party-pills-active-description-color: var(--party-pills-active-title-color); --party-pills-border-bottom: @partyPillsBorderBottom|; --party-pills-background-color: @partyPillsBackground|; --party-pills-title-color: var(--party-pills-active-title-color); --party-pills-description-color: var(--party-pills-title-color); --party-pills-active-hover-background-color: @partyPillsOnHoverBackground|; --party-pills-hover-background-color: var(--party-pills-active-hover-background-color); --party-package-heading-color: @partyPackageHeadingColor|; --party-package-heading-text-transform: @partyPackageHeaderTextTransform|; --party-package-content-color: @partyPackageContentColor|; --party-package-webDesc-background-color: @partyPackageWebDescBackground|; --party-package-webDesc-border-radius: 10px 10px 0 0; --party-package-webDesc-btn-border-radius: 0 0 10px 10px; --party-package-webDesc-divider: @partyPackageWebDescDivierColor|; /* Should you require to add a background to the party steps, if site has a dark background and visibility is affected, style the below */ --party-steps-container-background-color: @partyStepsContainerBackgroundColor|; --party-steps-container-padding: @partyStepsContainerPadding|; --party-steps-container-border-radius: @partyStepsContainerBorderRadius|; --party-schedule-section-background-color: @partyScheduleBackgroundColor|; --party-schedule-section-border: @partyScheduleBorder|; --party-schedule-slot-btn-border: @partyScheduleSlotBorder|; --party-schedule-slot-btn-border-radius: @partyScheduleSlotBorderRadius|; --party-schedule-scheduleName-font-size: @partyScheduleNameFontSize|; --party-schedule-scheduleName-font-weight: @partyScheduleNameFontWeight|; --party-schedule-scheduleName-font-color: @partyScheduleNameColor|; --party-schedule-scheduleBody-font-color: @partyScheduleDescriptionColor|; --party-schedule-slot-btn-onChecked-background: @partyScheduleSlotOnCheckedBackgroundColor|; --party-addons-title-background: @partyAddonTitleBackground|; --party-addons-title-color: @partyAddonTitleColor|; --party-addons-title-border-color: @partyAddonTitleBorderColor|; --party-addons-title-font-size: @partyAddonTitleFontSize|; --party-summary-panel-heading-color: @partySummaryPanelHeadingColor|; --party-summary-panel-heading-background-color: @partySummaryPanelHeadingBackground|; --party-summary-panel-heading-border-color: @partySummaryPanelHeadingBorderColor|; --party-summary-panel-content-color: @partySummaryPanelContentColor|; --party-summary-panel-content-background-color: @partySummaryPanelContentBackgroundColor|; /* contact party side option */ --party-support-spec-border-radius: @partySupportBorderRadius|; --party-support-spec-background-color: @partySupportBackgroundColor|; --party-support-spec-color: @partySupportTextColor|; --party-support-spec-box-shadow: @partySupportBoxShadow|; /* party-timer */ --party-timer-font-size: @partyTimerFontSize|; --party-timer-color: @partyTimerColor|; --party-timer-border: @partyTimerBorder|; --party-timer-border-radius: @partyTimerBorderRadius|; --party-timer-background: @partyTimerBackground|; /* combo product slot selection */ --comboSlot-navtab-inActive-background-color: @comboSlotNavtabInactiveBackgroundColor|; --comboSlot-navtab-background-color: @comboSlotNavtabBackgroundColor|; --comboSlot-navtab-border: @comboSlotNavtabBorder|; --comboSlot-title-area-background-color: var(--comboSlot-navtab-background-color); --comboSlot-title-area-border-bottom: @comboSlotTitleAreaBorderBottom|; --comboSlot-table-header-background-color: @comboSlotTableHeaderBackgroundColor|; --comboSlot-table-header-border-bottom: @comboSlotTableHeaderBorderBottom|; --comboSlot-table-body-background-color: @comboSlotTableBodyBackgroundColor|; --comboSlot-table-body-border: @comboSlotTableBodyBorder|; --comboSlot-footer-background: @comboSlotFooterBackground|; /* cart */ --cart-summary-products-background: @cartSummaryProdBackground|; --cart-summary-products-border-top: @cartSummaryProdDivider|; --cart-summary-text-color: @cartSummaryProdTextColor|; --cart-summary-top-position: 85px; --secondary-background: @cartSummaryTotalBackground|; --cart-summary-Summary-text-color: var(--cart-summary-text-color); --cart-summary-Summary-font-size: @cartSummaryTotalFontSize|; --cart-summary-Summary-font-weight: @cartSummaryTotalFontWeight|; /* checkout page */ --checkout-accordion-background-color: @checkoutAccordionBackground|; --checkout-accordion-title-color: @checkoutAccordionHeaderColor|; --checkout-accordion-arrow-color: var(--checkout-accordion-title-color); --checkout-accordion-backText-color: var(--checkout-accordion-title-color); --checkout-accordion-title-font-weight: @checkoutAccordionHeaderFontWeight|; --checkout-accordion-dropdown-background-color: var(--checkout-accordion-background-color); --checkout-accordion-dropdown-table-head-background-color: @checkoutAccordionTableBackground|; --checkout-accordion-dropdown-table-head-font-weight: @checkoutAccordionTableHeadFontWeight|; --checkout-accordion-dropdown-table-body-background-color: var(--checkout-accordion-dropdown-table-head-background-color); --checkout-accordion-dropdrown-table-body-color: @checkoutAccordionTableBodyTextColor|; --checkout-accordion-dropdown-table-body-font-weight: @checkoutAccordionTableBodyFontWeight|; --checkout-accordion-dropdown-table-body-paySummary-color: var(--checkout-accordion-dropdrown-table-body-color); --checkout-accordion-dropdown-table-body-paySummaryGrand-color: @checkoutAccordionGrandTotalColor|; /* login page */ --login-modal-box-shadow: @modalBoxShadow|; --login-modal-border-radius: @modalBorderRadius|; --login-modal-border: @modalBorder|; --login-modal-background-color: @modalBackground|; --login-modal-color: @modalTextColor|; --login-modal-active-tab-border: @modalActiveTabBorder|; --login-page-headers-font-size: @modalHeaderFontSize|; --login-page-headers-font-color: @modalHeaderFontColor|; --login-page-headers-active-background-color: var(--login-modal-background-color); --login-page-TandC-checkbox-color: @loginTandCCheckboxColor|; --login-page-TandC-checkbox-font-size: @loginTandCCheckboxFontSize|; --login-page-TandC-text-color: @loginTandCCheckboxColor|; --login-page-TandC-modal-background-color: @loginTandCModalBackgroundColor|; --login-page-TandC-modal-border: @loginTandCModalBorder|; /* my account page */ --my-account-sidebar-color: @myAccountSidebarColor|; --my-account-sidebar-font-weight: @myAccountSidebarFontWeight|; --my-account-sidebar-font-size: @myAccountSidebarFontSize|; --my-account-sidebar-background: @myAccountSidebarBackground|; --my-account-sidebar-border-left: @myAccountSidebarBorderLeft|; --my-account-sidebar-border-bottom: @myAccountSidebarBorderBottom|; --my-account-sidebar-active-color: @myAccountSidebarActiveColor|; --my-account-sidebar-active-background: @myAccountSidebarActiveBackground|; --my-account-sidebar-active-border-left: @myAccountSidebarActiveBorderLeft|; --my-account-sidebar-active-border-bottom: @myAccountSidebarActiveBorderBottom|; --my-account-sidebar-content-background-color: @myAccountSidebarContentBackgroundColor|; --my-account-sidebar-content-border: @myAccountSidebarContentBorder|; --my-orders-box-shadow: @myOrdersBoxShadow|; --my-orders-border-radius: @myOrdersBorderRadius|; --my-orders-border: @myOrdersBorder|; --my-orders-background-color: @myOrdersBackgroundColor|; --my-orders-text-color: @myOrdersTextColor|; --guest-login-orders-table-border: @guestLoginOrdersTableBorder|; --guest-login-orders-odd-row-background: @guestLoginOrdersOddRowBackground|; /* recharge page */ --recharge-page-background: @rechargePageBackground|; /* B2B Page extras ----------------- */ --card-balance-color: @cardBalanceColor|; --pagination-background-color: @paginationBackgroundColor|; --pagination-border-color: @paginationBorderColor|; --pagination-left-right-arrow-color: @paginationLeftRightArrowColor|; --pagination-inner-arrow-color: @paginationInnerArrowColor|; --pagination-active-background-color: @paginationActiveBackgroundColor|; --pagination-active-border-color: @paginationActiveBorderColor|; --pagination-active-color: @paginationActiveColor|; /* BUTTONS ---------- */ --btn-main-color: @btnMainTextColor|; --btn-main-background: @btnMainBackground|; --btn-main-border: @btnMainBorder|; --btn-main-border-radius: @btnMainborderRadius|; --btn-main-padding: @btnMainPadding|; --btn-main-font-size: @btnMainFontSize|; --btn-main-font-weight: @btnMainFontWeight|; --btn-main-text-transform: @btnMainTextTransform|; --btn-main-font-family: var(--font-family-main); --btn-main-hover-color: @btnMainOnHoverColor|; --btn-main-hover-background: @btnMainOnHoverBackground|; /* Buttons on the location select page */ --btn-danger-color: var(--btn-main-color); --btn-danger-background: var(--btn-main-background); --btn-danger-border: var(--btn-main-border); --btn-danger-text-transform: var(--btn-main-text-transform); --btn-danger-font-family: var(--font-family-main); /* Buttons on the Select Party page */ --btn-default-color: var(--btn-main-color); --btn-default-background: var(--btn-main-background); --btn-default-border: var(--btn-main-border); --btn-default-padding: var(--btn-main-padding); --btn-default-font-size: var(--btn-main-font-size); --btn-default-font-weight: var(--btn-main-font-weight); --btn-default-border-radius: var(--btn-main-border-radius); --btn-default-text-transform: var(--btn-main-text-transform); --btn-default-font-family: var(--font-family-main); /* Buttons on the cart summary close and other similar close areas */ --btn-close-background-color: @secondBtnBackground|; --btn-close-border: @secondBtnBorder|; --btn-close-color: @secondBtnTextColor|; --btn-close-border-radius: @secondBtnborderRadius|; --btn-close-font-size: @secondBtnFontSize|; --btn-close-padding: @secondBtnPadding|; --btn-close-font-family: var(--font-family-main); --btn-close-hover-background-color: @secondBtnOnHoverBackground|; --btn-close-hover-color: @secondBtnOnHoverTextColor|; /* Checkout page pay buttons */ --btn-payment-background-color: @payButtonBackground|; --btn-payment-color: @payButtonTextColor|; --btn-payment-border: @payButtonBorder|; --btn-payment-border-radius: @payButtonborderRadius|; --btn-payment-padding: @payButtonPadding|; --btn-payment-text-transform: @payButtonTextTransform|; --btn-payment-font-family: var(--font-family-main); --btn-payment-hover-background-color: @payButtonOnHoverBackground|; --btn-payment-hover-color: @payButtonOnHoverTextColor|; --btn-goback-background-color: var(--btn-payment-background-color); --btn-goback-color: var(--btn-payment-color); } /* ------------- Font Faces ------------- */ @font-face { font-family: '@fontFace1|'; src: url('@fontFaceURL1|'); } @font-face { font-family: '@fontFace2|'; src: url('@fontFaceURL2|'); } @font-face { font-family: '@fontFace3|'; src: url('@fontFaceURL3|'); } @font-face { font-family: '@fontFace4|'; src: url('@fontFaceURL4|'); } @font-face { font-family: '@fontFace5|'; src: url('@fontFaceURL5|'); }