/* Font Styles */
/* Google Fonts CDN is used. Import fonts here so they are easier to manage with the body and other html tags that use them. */
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=block");
/* Note: All fonts should be set in the "html" and "body" tags in order to apply univeral inheritance across the website. - MS */
/* CSS Variables : Note that these are passed into the sheet from the global css variable sheet. This allows liquid to later override global values, if customized by other systems. */
:root {
/* DEFAULT FONTS SETTINGS */
--theme1-local-font-family: "Poppins";/* note this must match what font is imported above */
--theme1-local-font-color: 0,0,0;
--theme1-local-font-size: medium;
--theme1-local-font-weight: 400;
/* If this project uses global variables like the Fashion theme, you can use these mappings. */
/*--theme1-local-font-color: var(--theme1-global-font-rgbcolor-1);*/
/*--theme1-local-font-size: var(--theme1-global-font-size-1);*/
/*--theme1-local-font-weight: var(--theme1-global-font-weight-1);*/
/*--theme1-local-font-family: var(--theme1-global-font-family-1);*/
/*--theme1-local-input-background: var(--theme1-global-input-background-rgbcolor-1);*/
}
/* FONT SETS (using google cdn) : Importing fonts this way hides the link url from the header page on view source, and allows us to use a CSS variable to inject a user's chosen font selection. Add new Google font sets via a pipe" ?family=Poppins|Tangerine . Keep in mind these could delay download times. Also be sure to include all weight (bold) sizes as apparently these are independent font subsets. Note 100,200 appear to be the same as 300. 400 same as "normal" or default weight. Do not use "bold" or "bolder" as same as 700 weight. So weights 300, 500, and 600 only unique weights in Poppins that cannot be recreated except with weight values.
Note that google fonts creates the @font-face with swap. We just need the font-face name and a fallback default font like "sans-serif" as the font loads or in case it fales. Note the google url settings control fallbacks. You just have to provide an ordered fallback font-list you can rely on in the end-user's browser. */
:root,
html {
/* Use Absolute Font Sizes: This setting "medium" is the default font-size setting in most browsers, by default, and inherited by all other HTML elements from the html and body tags when using "rem" units. "Absolute Font Sizes" allow users with poor eyesite to change font size settings in their web browser and it reflect in the website pages, font-sizes, and dimensions they view. To make this work, you need to use "rem" units for all font sizes and dimensions. */
/*font-size: medium;*/
font-size: var(--theme1-local-font-size, medium);
}
html body {
/* Note: We always list "sans-serif" browser font defaults for each OS if font fails */
/*font-family: "Poppins", -apple-system, sans-serif;*/
font-family: var(--theme1-local-font-family, "Poppins"), -apple-system, sans-serif;/* default font should try a google font before a sans-serif browser default in the list */
/*font-size: medium;*/
font-size: var(--theme1-local-font-size, medium);
color: rgba(var(--theme1-local-font-color), 1);
font-weight: var(--theme1-local-font-weight, 400);
-webkit-font-smoothing: antialiased; /* only use this instead of auto if you see visual improvement when scaling text */
-moz-osx-font-smoothing: antialiased;
font-smooth: antialiased;
text-rendering: optimizeLegibility;
touch-action: auto;
}
/* FOR "Engage" WE HAVE TURNED OFF MOBILE AS IT IS ALWAYS MOBILE! */
/* mobile */
/*@media only screen and (max-width: 1024px) {*/
/*:root, html {*/
/* ADD SMALLER FONT-SIZE ON MOBILE: All websites inherit basic font sizes from the html and body tags. Any use of "rem" in the website references the :root or html element's font-size value. The body tag will either inherit from html or is set below, and generally cascades inheritable font size to all other elements not explicitly referencing the html root font size. In desktop mode, "medium" is the default font-size, so "small" is often used to style mobile and small screen devices. However, it can be hard to read since many HD devices may make the font even smaller. So comment out below if mobile font sizes appear too small. "small" size generally allows more content on certain low rez small screens. */
/*font-size: small;*/
/*}*/
/*html body {*/
/* NOT needed as we already manage this in theb"html.css" file */
/*
min-width: auto;
max-width: auto;
min-height: auto;
max-height: auto;
margin: 0;
padding:0;
*/
/*font-size: small;*/
/*}*/
/*}*/
/* Custom Anchor Styling */
/* IMPORTANT: For now we do not define link colors in the local css variables, but may later. Fashion Theme used gray scaling rollovers, but we might want traditional colors. I have turned off these colors, which now use the "html.css" colors that were designed to use traditional-legacy link rollover coloring. - MStokely */
html body a {
color: rgba(var(--theme1-local-font-color), 1);
transition: none;
}
html body a:link {
color: rgba(var(--theme1-local-font-color), 1);
transition: none;
}
html body a:visited {
/*color: rgba(var(--theme1-local-font-color), 1);*/
transition: none;
}
html body a:hover {
/*color: rgba(var(--theme1-local-font-color), 1);*/
transition: none;
}
html body a:focus {
/*color: rgba(var(--theme1-local-font-color), 1);*/
transition: none;
}
html body a:active {
/*color: rgba(var(--theme1-local-font-color), 1);*/
transition: none;
}
/* inputs */
html body input,
html body input:visited,
html body input:hover,
html body input:focus,
html body input:active {
color: rgba(var(--theme1-local-font-color), 1);
transition: none;
}
input::placeholder {
/*color: rgba(var(--theme1-local-font-color), 1) !important;*/
transition: none;
}
textarea::placeholder {
/*color: rgba(var(--theme1-local-font-color), 1) !important;*/
transition: none;
}
/* CHROME BROWSER HACK : This partially solves a Chrome browser bug where using the autofill input attribute then choosing a text choice from the browser popup displays a font in the wrong family, size, and with a blue background! This fixes the blue background and font size, but not the font family which cannot be modified as of 4/2024. - MS */
input:-webkit-autofill,
input:-webkit-autofill:link,
input:-webkit-autofill:visited,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:active {
-webkit-background-clip: text !important;
-webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset !important; /* hack to destroy chromes nasty blue autofill bg color */
-webkit-text-fill-color: rgba(var(--theme1-local-font-color), 1) !important;
}
/* css color background override */
textarea {
/*background: rgba(var(--theme1-local-input-background), 1) !important;*/
}
/* FORCED FONT STYLES ON REPLACED ELEMENTS : If the "html.css" sheet loads, inheritance should apply
to the form controls below and force correct font inheritance. But I am forcefully applying font
settings copied from the body tag in the case of form controls as they are "replaced" elements
the OS controls. And I have seen issues where they might not be applied, so applied here. - MS */
input,
button,
select,
textarea {
/*font-family: "Poppins", -apple-system, sans-serif;*/
font-family: var(--theme1-local-font-family, "Poppins"), -apple-system, sans-serif;
-webkit-font-smoothing: antialiased; /* opnly use this instead of auto if you see visual improvement when scaling text */
-moz-osx-font-smoothing: antialiased;
font-smooth: antialiased;
text-rendering: optimizeLegibility;
touch-action: auto;
}
/* ================ EXIGO CODE : Font Test ===============
Poppins Font
Poppins Font
Poppins Font
Poppins Font
"normal" same as 400
Poppins Font
Poppins Font
Poppins Font
Poppins Font
Poppins Font
Poppins Font
========================================================= */