/* * Copyright (c) 2023. * This SOFTWARE PRODUCT is provided by Credit Security Limited "as is" * and "with all faults". Credit Security Limited makes no representations or * warranties of any kind concerning the safety, suitability, lack of viruses, * inaccuracies, typographical errors, or other harmful components of this * SOFTWARE PRODUCT. There are inherent dangers in the use of any * software, and you are solely responsible for determining whether this * SOFTWARE PRODUCT is compatible with your equipment and other * software installed on your equipment. You are also solely responsible for * the protection of your equipment and backup of your data, and Credit * Security Limited will not be liable for any damages you may suffer in * connection with using, modifying,or distributing this SOFTWARE * PRODUCT. */ /* The below are set here so you don't need to go hunting through the CSS to find the look and feel changes */ :root { /* Breakpoints (Note that these are NOT used by any of the @media settings!) */ --csl-xs: 390px; /* iPhone 12 Pro (390x844) */ --csl-sm: 576px; --csl-md: 768px; --csl-lg: 992px; --csl-xl: 1200px; --csl-xxl: 1400px; --small-screen: 575px; --csl-navbar-text-color: rgba(33, 31, 90, 1); --csl-navbar-bg-color: rgba(255, 255, 255, 0.5); --csl-payment-box-color: #ccc; /* Gray background color */ --csl-bold: 700; --csl-less-bold: 300; --csl-base-color: #787d85; --csl-base-bg-color: #f8f8f9; --csl-base-banner-bg-color: rgba(255, 255, 255, 0.5); --csl-btn-hover-bg: #211f5a; --csl-first-color: #211F5A; --csl-second-color: #FFFFFF; --csl-faq-bg-color: #F8F8F9; --csl-box-color: #F2F2F2; /* The below are complimentary colours using the CSL logo as base */ --color-primary-dark: #211F5A; /* Main Dark Primary color */ --color-primary-dark-0: #4D4C7B; --color-primary-dark-1: #9595B1; --color-primary-dark-2: #6C6B93; --color-primary-dark-3: #353460; --color-primary-dark-4: #212051; --rgba-primary-dark: rgba(33, 31, 90, 1); /* Main Dark Primary color */ --rgba-primary-dark-0: rgba(77, 76, 123, 1); --rgba-primary-dark-1: rgba(149, 149, 177, 1); --rgba-primary-dark-2: rgba(108, 107, 147, 1); --rgba-primary-dark-3: rgba(53, 52, 96, 1); --rgba-primary-dark-4: rgba(33, 32, 81, 1); --color-primary-light: #3bb8eb; /* Main Light Primary color */ --color-primary-light-0: #5CC6EF; --color-primary-light-1: #BBE9FB; --color-primary-light-2: #85D7F6; --color-primary-light-3: #37B5E5; --color-primary-light-4: #139ED4; --rgba-primary-light: rgba(59, 184, 235, 1); /* Main Light Primary color */ --rgba-primary-light-opaque: rgba(59, 184, 235, 0.4); /* Main Light Primary color */ --rgba-primary-light-0: rgba(92, 198, 239, 1); --rgba-primary-light-1: rgba(187, 233, 251, 1); --rgba-primary-light-2: rgba(133, 215, 246, 1); --rgba-primary-light-3: rgba(55, 181, 229, 1); --rgba-primary-light-4: rgba(19, 158, 212, 1); /* Fonts */ --csl-font: normal 17px / 23px "Open Sans", Helvetica, Arial, Verdana, sans-serif; --csl-font-lato: normal 17px / 23px "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-navbar-font: normal 19px / 23px "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-footer-font-family: normal 0.75rem / 23px "Open Sans", Helvetica, Arial, Verdana, sans-serif; --csl-footer-font-size: 0.75rem; --csl-footer-font-weight: 300; /* Font sizes for Headings */ --csl-h1-font-size-desktop: 46px; --csl-h1-font-size: 46px; --csl-h1-line-height-desktop: 53px; --csl-h1-line-height: 53px; --csl-h1-text-transform: none; --csl-h2-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-h2-font-size-desktop: 34px; --csl-h2-font-size: 34px; --csl-h2-line-height-desktop: 44px; --csl-h2-line-height: 44px; --csl-h2-text-transform: none; --csl-h3-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-h3-font-size-desktop: 26px; --csl-h3-font-size: 26px; --csl-h3-font-weight: 300; --csl-h3-line-height-desktop: 36px; --csl-h3-line-height: 36px; --csl-h3-text-transform: none; --csl-h4-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-h4-font-size-desktop: 18px; --csl-h4-font-size: 18px; --csl-h4-line-height-desktop: 28px; --csl-h4-line-height: 28px; --csl-h4-text-transform: none; --csl-h5-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-h5-font-size-desktop: 16px; --csl-h5-font-size: 16px; --csl-h5-line-height-desktop: 26px; --csl-h5-line-height: 26px; --csl-h5-text-transform: none; --csl-h6-font-family: "Lato", Helvetica, Arial, Verdana, sans-serif; --csl-h6-font-size-desktop: 14px; --csl-h6-font-size: 14px; --csl-h6-line-height-desktop: 24px; --csl-h6-line-height: 24px; --csl-h6-text-transform: none; /* Background images */ /*noinspection CssUnknownTarget*/ --background-homepage: url(/images/backgrounds/homepage.png); /*noinspection CssUnknownTarget*/ --background-faq: url(/images/backgrounds/faq-background.png); /*noinspection CssUnknownTarget*/ --background-support: url(/images/backgrounds/support.png); /*noinspection CssUnknownTarget*/ --background-fair-treatment: url(/images/backgrounds/fair-treatment.png); /*noinspection CssUnknownTarget*/ --background-contact: url(/images/backgrounds/contact.png); /*noinspection CssUnknownTarget*/ --background-payment: url(/images/backgrounds/make-a-payment.png); /*noinspection CssUnknownTarget*/ --background-clients: url(/images/backgrounds/clientsv2.png); /*noinspection CssUnknownTarget*/ --background-terms-and-conditions: url(/images/backgrounds/termsandconditions.png); --wiggle-scale: 0.7; /* Default scale for 'wiggle' icons */ --csl-spinner-z-index: 1080; } /* Make the Headings smaller on screen sizes under 767px */ @media only screen and (max-width: 767px) { :root { --csl-h1-font-size: 150%; --csl-h2-font-size: 130%; --csl-h3-font-size: 120%; --csl-h4-font-size: 110%; --csl-h5-font-size: 100%; --csl-h6-font-size: 90%; } }