/*ANIMATIONS*/ .animation-swing{ --animation-type: swing; } .animation-pulse{ --animation-type: pulse; } .animation-shake{ --animation-type: shake; } .animation-bounce{ --animation-type: bounce; } .animation-glow{ --animation-type: glow; } /*SHAPES*/ .shapes-pill{ --border-radius-large-item: 30px; --border-radius-medium-item: 30px; --border-radius-small-item: 5px; --border-radius-square: 0px; --border-radius-favicon: 50%; } .shapes-square{ --border-radius-large-item: 0px; --border-radius-medium-item: 0px; --border-radius-small-item: 0px; --border-radius-square: 0px; --profile-image-radius: 0px; --border-radius-favicon: 0px; } .shapes-rounded{ --border-radius-large-item: 10px; --border-radius-medium-item: 10px; --border-radius-small-item: 5px; --border-radius-square: 0px; --border-radius-favicon: 5px; } /*THEMES - colors*/ .colors-default{ --font-color-main: #111; --button-color: #fff; --button-font-color: #111; --button-description-color: #666; --button-coupon-color: #fff; --button-coupon-font-color: #111; --newsletter-input-background-color: #fff; --newsletter-input-font-color: #111; --newsletter-input-button-color: #111; --newsletter-input-button-font-color: #fff; --accent-color: #111; --background-color-basic: #fafafa; --background-color-accent: #efefef; --profile-image-border: 4px solid #fff; /*ADMIN UI - LIGHT THEME (Use on themes with LIGHT BACKGROUNDS)*/ --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); /* New vars for outline mode */ --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-ocean{ --font-color-main: #011e2b; --button-color: #fff; --button-font-color: #011e2b; --button-description-color: #397f9e; --button-coupon-color: #fff; --button-coupon-font-color: #011e2b; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #111; --newsletter-input-button-color: #9addfb; --newsletter-input-button-font-color: #edf9ff; --accent-color: #095d83; --background-color-basic: #edf9ff; --background-color-accent: #9addfb; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-desert{ --font-color-main: #3a1900; /* Deep ocean blue */ --button-color: #fff; /* Aquatic teal */ --button-font-color: #3a1900; --button-description-color: #7d6757; --button-coupon-color: #fff; --button-coupon-font-color: #3a1900; --newsletter-input-background-color: #fff; --newsletter-input-font-color: #3a1900; --newsletter-input-button-color: #3a1900; --newsletter-input-button-font-color: #fff; --accent-color: #8d3e00; /* Sandy yellow */ --background-color-basic: #fbf3ec; /* Soft sea foam white */ --background-color-accent: #f6e4d4; /* Pastel turquoise */ --profile-image-border: 4px solid #fff; /* Coastal teal touch */ /*ADMIN UI - LIGHT THEME (Use on themes with LIGHT BACKGROUNDS)*/ --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-forest{ --font-color-main: #022c12; /* Deep ocean blue */ --button-color: #022c12; /* Aquatic teal */ --button-font-color: #dfeede; --button-description-color: #a2d4b5; --button-coupon-color: #022c12; --button-coupon-font-color: #dfeede; --newsletter-input-background-color: #dfeede; --newsletter-input-font-color: #022c12; --newsletter-input-button-color: #022c12; --newsletter-input-button-font-color: #dfeede; --accent-color: #1e3627; /* Sandy yellow */ --background-color-basic: #fbf3ec; /* Soft sea foam white */ --background-color-accent: #c2e9d1; /* Pastel turquoise */ --profile-image-border: 4px solid #fff; /* Coastal teal touch */ /*ADMIN UI - LIGHT THEME (Use on themes with LIGHT BACKGROUNDS)*/ --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-forest-dark{ --font-color-main: #dfeede; --button-color: #dfeede; --button-font-color: #022c12; --button-description-color: #4b6c55; --button-coupon-color: #dfeede; --button-coupon-font-color: #022c12; --newsletter-input-background-color: #dfeede; --newsletter-input-font-color: #022c12; --newsletter-input-button-color: #a2d4b5; --newsletter-input-button-font-color: #022c12; --accent-color: #dfeede; --background-color-basic: #0d1e0c; --background-color-accent: #133721; --profile-image-border: 4px solid #fff; /*ADMIN UI - DARK THEME (Use on themes with DARK BACKGROUNDS)*/ --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-plum-dark{ --font-color-main: #ffffff; --button-color: #ffffff; --button-font-color: #560d46; --button-description-color: #571548; --button-coupon-color: #ffffff; --button-coupon-font-color: #521d46; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #521d47; --newsletter-input-button-color: #521d47; --newsletter-input-button-font-color: #feddf6; --accent-color: #cd88be; --background-color-basic: #5d2050; --background-color-accent: #000000; --profile-image-border: 4px solid #fff; /*ADMIN UI - DARK THEME (Use on themes with DARK BACKGROUNDS)*/ --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-emerald-sea-light { --font-color-main: #005148; --button-color: #ffffff; --button-font-color: #005148; --button-description-color: #47817b; --button-coupon-color: #ffffff; --button-coupon-font-color: #135e56; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #005148; --newsletter-input-button-color: #135e56; --newsletter-input-button-font-color: #ccede8; --accent-color: #669f99; --background-color-basic: #d9fffb; --background-color-accent: #94e0d7; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-caribbean-blue-light { --font-color-main: #015877; --button-color: #ffffff; --button-font-color: #015877; --button-description-color: #2f7e99; --button-coupon-color: #ffffff; --button-coupon-font-color: #015877; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #015877; --newsletter-input-button-color: #015877; --newsletter-input-button-font-color: #e9f9ff; --accent-color: #1690bb; --background-color-basic: #eaf9ff; --background-color-accent: #9de8ff; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-grayscale-light{ --font-color-main: #232323; --button-color: #ffffff; --button-font-color: #222222; --button-description-color: #878787; --button-coupon-color: #ffffff; --button-coupon-font-color: #222222; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #222222; --newsletter-input-button-color: #222222; --newsletter-input-button-font-color: #ffffff; --accent-color: #838383; --background-color-basic: #ededed; --background-color-accent: #a5a5a5; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-grayscale-dark{ --font-color-main: #ffffff; --button-color: #ffffff; --button-font-color: #222222; --button-description-color: #3d3d3d; --button-coupon-color: #ffffff; --button-coupon-font-color: #222222; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #222222; --newsletter-input-button-color: #222222; --newsletter-input-button-font-color: #ffffff; --accent-color: #ffffff; --background-color-basic: #111111; --background-color-accent: #373737; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-nightsky-dark{ --font-color-main: #f4f4f5; --button-color: #d9d9eb; --button-font-color: #04040f; --button-description-color: #010223; --button-coupon-color: #d9d9eb; --button-coupon-font-color: #04040f; --newsletter-input-background-color: #d9d9eb; --newsletter-input-font-color: #04040f; --newsletter-input-button-color: #8082b8; --newsletter-input-button-font-color: #05052a; --accent-color: #9798c8; --background-color-basic: #09091a; --background-color-accent: #050744; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-sunset-light{ --font-color-main: #5c390e; --button-color: #ffffff; --button-font-color: #5c390e; --button-description-color: #927a5d; --button-coupon-color: #ffffff; --button-coupon-font-color: #5c390e; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #5c390e; --newsletter-input-button-color: #5c390e; --newsletter-input-button-font-color: #e6c599; --accent-color: #df8f2a; --background-color-basic: #f5ede3; --background-color-accent: #ffd8a6; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } /*CHATGPT THEMES*/ .colors-jungle-light { --font-color-main: #064d2f; --button-color: #ffffff; --button-font-color: #064d2f; --button-description-color: #2e7a5a; --button-coupon-color: #ffffff; --button-coupon-font-color: #064d2f; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #064d2f; --newsletter-input-button-color: #2e7a5a; --newsletter-input-button-font-color: #e8f9f0; --accent-color: #00a86b; --background-color-basic: #e6f9f0; --background-color-accent: #b3f2d6; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-snowmountain-light { --font-color-main: #1a2b3c; --button-color: #ffffff; --button-font-color: #1a2b3c; --button-description-color: #6b8a99; --button-coupon-color: #ffffff; --button-coupon-font-color: #1a2b3c; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #1a2b3c; --newsletter-input-button-color: #4a6fa5; --newsletter-input-button-font-color: #eaf4ff; --accent-color: #80c6ff; --background-color-basic: #f4fbff; --background-color-accent: #d9f0ff; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-urbanescape-dark { --font-color-main: #f5f5f5; --button-color: #2a2a2a; --button-font-color: #f5f5f5; --button-description-color: #8c8c8c; --button-coupon-color: #2a2a2a; --button-coupon-font-color: #f5f5f5; --newsletter-input-background-color: #2a2a2a; --newsletter-input-font-color: #f5f5f5; --newsletter-input-button-color: #3b82f6; --newsletter-input-button-font-color: #eaf1ff; --accent-color: #ff4d6d; --background-color-basic: #111111; --background-color-accent: #1e1e1e; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-beach-light { --font-color-main: #3b2d1f; --button-color: #ffffff; --button-font-color: #3b2d1f; --button-description-color: #b59c82; --button-coupon-color: #ffffff; --button-coupon-font-color: #3b2d1f; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #3b2d1f; --newsletter-input-button-color: #f4a261; --newsletter-input-button-font-color: #fff8f0; --accent-color: #2a9d8f; --background-color-basic: #fffdf9; --background-color-accent: #ffe4b5; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-modal-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-sunshine-light { --font-color-main: #4b2e13; --button-color: #ffffff; --button-font-color: #4b2e13; --button-description-color: #a87f52; --button-coupon-color: #ffffff; --button-coupon-font-color: #4b2e13; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #4b2e13; --newsletter-input-button-color: #d97706; --newsletter-input-button-font-color: #fff8f0; --accent-color: #eab308; --background-color-basic: #fef3c7; --background-color-accent: #fde68a; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-zen-light { --font-color-main: #2e2e2e; --button-color: #ffffff; --button-font-color: #2e2e2e; --button-description-color: #7a6f55; --button-coupon-color: #ffffff; --button-coupon-font-color: #2e2e2e; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #2e2e2e; --newsletter-input-button-color: #9a3412; --newsletter-input-button-font-color: #fff5f0; --accent-color: #3f7d20; --background-color-basic: #f5f5dc; --background-color-accent: #d4e2b6; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-mediterranean-light { --font-color-main: #153e75; --button-color: #ffffff; --button-font-color: #153e75; --button-description-color: #3b6ea5; --button-coupon-color: #ffffff; --button-coupon-font-color: #153e75; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #153e75; --newsletter-input-button-color: #2d57b1; --newsletter-input-button-font-color: #e6f1fe; --accent-color: #2d57b1; /*#f59e0b; orange-y*/ --background-color-basic: #f5faff; --background-color-accent: #cce5ff; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-mediterranean-dark { --font-color-main: #f0f8ff; --button-color: #1e3a8a; --button-font-color: #f0f8ff; --button-description-color: #93c5fd; --button-coupon-color: #2563eb; --button-coupon-font-color: #f0f8ff; --newsletter-input-background-color: #1e3a8a; --newsletter-input-font-color: #f0f8ff; --newsletter-input-button-color: #3b82f6; --newsletter-input-button-font-color: #eaf4ff; --accent-color: #facc15; --background-color-basic: #0f172a; --background-color-accent: #1e293b; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-safari-dark { --font-color-main: #fff7ed; --button-color: #b45309; --button-font-color: #fff7ed; --button-description-color: #fbbf24; --button-coupon-color: #d97706; --button-coupon-font-color: #fff7ed; --newsletter-input-background-color: #78350f; --newsletter-input-font-color: #fff7ed; --newsletter-input-button-color: #ea580c; --newsletter-input-button-font-color: #fffaf5; --accent-color: #fde047; --background-color-basic: #1c1917; --background-color-accent: #451a03; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-luxe-dark { --font-color-main: #fefcf7; --button-color: #d4af37; --button-font-color: #0a0a0a; --button-description-color: #503c04; --button-coupon-color: #e5c97b; --button-coupon-font-color: #0a0a0a; --newsletter-input-background-color: #1a1a1a; --newsletter-input-font-color: #fefcf7; --newsletter-input-button-color: #d4af37; --newsletter-input-button-font-color: #0a0a0a; --accent-color: #a67c52; --background-color-basic: #0a0a0a; --background-color-accent: #1f1f1f; --profile-image-border: 4px solid #ffffff; --ui-bg-hover: var(--dark-theme-ui-bg-hover); --ui-border-hover: var(--dark-theme-ui-border-hover); --ui-modal-bg-hover: var(--dark-theme-ui-modal-bg-hover); --ui-modal-border-hover: var(--dark-theme-ui-modal-border-hover); --button-outline-color: var(--button-color); --button-outline-font-color: var(--button-color); --button-outline-description-font-color: var(--button-color); --button-outline-coupon-font-color: var(--button-color); } .colors-luxe-light { --font-color-main: #2a2a2a; --button-color: #ffffff; --button-font-color: #2a2a2a; --button-description-color: #bfa76f; --button-coupon-color: #ffffff; --button-coupon-font-color: #2a2a2a; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #2a2a2a; --newsletter-input-button-color: #d4af37; --newsletter-input-button-font-color: #2a2a2a; --accent-color: #a67c52; --background-color-basic: #fdfcf9; --background-color-accent: #f7f2e7; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-kids-light { --font-color-main: #2a2a2a; --button-color: #ffcc00; --button-font-color: #2a2a2a; --button-description-color: #ff6699; --button-coupon-color: #66ccff; --button-coupon-font-color: #2a2a2a; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #2a2a2a; --newsletter-input-button-color: #66ccff; --newsletter-input-button-font-color: #ffffff; --accent-color: #ff6699; --background-color-basic: #fff9e6; --background-color-accent: #ffecb3; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-family-light { --font-color-main: #333333; --button-color: #ffffff; --button-font-color: #333333; --button-description-color: #6b7280; --button-coupon-color: #ffffff; --button-coupon-font-color: #333333; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #333333; --newsletter-input-button-color: #3b82f6; --newsletter-input-button-font-color: #f0f9ff; --accent-color: #ef4444; --background-color-basic: #f9fafb; --background-color-accent: #e5e7eb; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-budget-light { --font-color-main: #1a2e1a; --button-color: #ffffff; --button-font-color: #1a2e1a; --button-description-color: #4caf50; --button-coupon-color: #ffffff; --button-coupon-font-color: #1a2e1a; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #1a2e1a; --newsletter-input-button-color: #16a34a; --newsletter-input-button-font-color: #eafff0; --accent-color: #86efac; --background-color-basic: #f0fdf4; --background-color-accent: #bbf7d0; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } .colors-pinkish-light { --font-color-main: #4b1c3f; --button-color: #ffffff; --button-font-color: #4b1c3f; --button-description-color: #c08497; --button-coupon-color: #ffffff; --button-coupon-font-color: #4b1c3f; --newsletter-input-background-color: #ffffff; --newsletter-input-font-color: #4b1c3f; --newsletter-input-button-color: #db2777; --newsletter-input-button-font-color: #fff0f6; --accent-color: #f472b6; --background-color-basic: #fcfcfc; --background-color-accent: #fbcfe8; --profile-image-border: 4px solid #fff; --ui-bg-hover: var(--light-theme-ui-bg-hover); --ui-border-hover: var(--light-theme-ui-border-hover); --ui-modal-bg-hover: var(--light-theme-ui-bg-hover); --ui-modal-border-hover: var(--light-theme-ui-border-hover); --button-outline-color: var(--button-font-color); --button-outline-font-color: var(--button-font-color); --button-outline-description-font-color: var(--button-font-color); --button-outline-coupon-font-color: var(--button-font-color); } /*THEMES - fonts*/ .fonts-default{ --font-family-theme: "Arial", sans-serif; --font-family-titles: "Arial", sans-serif; --font-family-text: "Arial", sans-serif; } .fonts-urban{ --font-family-theme: "Monospace", sans-serif; --font-family-titles: "Arial", sans-serif; --font-family-text: "Monospace", sans-serif; } .fonts-timeless{ --font-family-theme: "Montserrat", sans-serif; --font-family-titles: "Playfair Display", sans-serif; --font-family-text: "Montserrat", sans-serif; } .fonts-simple{ --font-family-theme: "Roboto", sans-serif; --font-family-titles: "Helvetica", sans-serif; --font-family-text: "Roboto", sans-serif; } .fonts-writer{ --font-family-theme: "Special Elite", sans-serif; --font-family-titles: "Ultra", sans-serif; --font-family-text: "Special Elite", sans-serif; } /* 1. Urban Explorer */ .fonts-urban-explorer { --font-family-titles: "Poppins", sans-serif; --font-family-text: "Roboto", sans-serif; --font-family-theme: var(--font-family-text); } /* 2. Sunny Getaway */ .fonts-sunny-getaway { --font-family-titles: "Baloo 2", cursive; --font-family-text: "Nunito", sans-serif; --font-family-theme: var(--font-family-text); } /* 3. Parisian Stroll */ .fonts-parisian-stroll { --font-family-titles: "Playfair Display", serif; --font-family-text: "Lato", sans-serif; --font-family-theme: var(--font-family-text); } /* 4. City Lights */ .fonts-city-lights { --font-family-titles: "Montserrat", sans-serif; --font-family-text: "Source Sans Pro", sans-serif; --font-family-theme: var(--font-family-text); } /* 5. Mountain Trek */ .fonts-mountain-trek { --font-family-titles: "Bebas Neue", sans-serif; --font-family-text: "Open Sans", sans-serif; --font-family-theme: var(--font-family-text); } /* 6. Ocean Breeze */ .fonts-ocean-breeze { --font-family-titles: "Quicksand", sans-serif; --font-family-text: "Mulish", sans-serif; --font-family-theme: var(--font-family-text); } /* 7. Vintage Postcard */ .fonts-vintage-postcard { --font-family-titles: "Righteous", cursive; --font-family-text: "Work Sans", sans-serif; --font-family-theme: var(--font-family-text); } /* 8. Travel Journal */ .fonts-travel-journal { --font-family-titles: "Merriweather", serif; --font-family-text: "Merriweather Sans", sans-serif; --font-family-theme: var(--font-family-text); } /* 9. Boutique Escape */ .fonts-boutique-escape { --font-family-titles: "DM Serif Display", serif; --font-family-text: "Inter", sans-serif; --font-family-theme: var(--font-family-text); } /* 10. Backpack Trail */ .fonts-backpack-trail { --font-family-titles: "Kanit", sans-serif; --font-family-text: "Rubik", sans-serif; --font-family-theme: var(--font-family-text); } /* 11. Island Sunset */ .fonts-island-sunset { --font-family-titles: "Dancing Script", cursive; --font-family-text: "Cabin", sans-serif; --font-family-theme: var(--font-family-text); } /* 12. World Atlas */ .fonts-world-atlas { --font-family-titles: "Noto Sans", sans-serif; --font-family-text: "Noto Serif", serif; --font-family-theme: var(--font-family-text); } /* 13. Starlit Journey */ .fonts-starlit-journey { --font-family-titles: "Great Vibes", cursive; --font-family-text: "Lato", sans-serif; --font-family-theme: var(--font-family-text); } /* 14. Mediterranean Dusk */ .fonts-mediterranean-dusk { --font-family-titles: "Marcellus", serif; --font-family-text: "Poppins", sans-serif; --font-family-theme: var(--font-family-text); } /* 15. Rosewood Retreat */ .fonts-rosewood-retreat { --font-family-titles: "Cormorant Garamond", serif; --font-family-text: "Nunito", sans-serif; --font-family-theme: var(--font-family-text); } /* 16. Nomad Sketchbook */ .fonts-nomad-sketchbook { --font-family-titles: "Amatic SC", cursive; --font-family-text: "Roboto", sans-serif; --font-family-theme: var(--font-family-text); }