@charset "UTF-8";
/*doc
---
title: Introduction
name: _00_introduction
category: main
---
This digital guidelines document is a tool for Consumer Reports and its collaborators to consistently deploy the Consumer Reports identity and maintain visual consistency across various digital formats and applications
## Important
In the markup and styling of the styleguide's presentation, there are classes that are prefixed by **cr-styleguide**. **These classes are used solely for the purpose of layout of the styleguide itself, and not intended to be used outside this site**. **These classes do not exist in the crux-styles stylesheets, and should never be used outside this site** .
#### Example
```html_example
```
In the example above - **cr-styleguide-crux-body-copy--list__container** is a styleguide only class and should not be used in your external styles. **crux-body-copy** and **crux-body-copy--list** are styles prefixed by **crux-**, and can be used externally.
## Base Rules
Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors.
*/
/*doc
---
title: Variables
name: _21_variables
category: developer
---
These variables are used throughout the SCSS source code. If new variables are needed, they should be added to the _variables.scss file in `/src/scss/base/` folder.
**$cr-fonts-folder:** "https://s3.amazonaws.com/cdn.dev.consumerreports.org/crux/fonts/v1/" !default;
**$cr-icons-folder:** "/fonts/" !default;
**$cr-averta:** "AvertaW01" !default;
**$cr-helvetica-neue:** "HelveticaNeue" !default;
**$cr-publico:** "PublicoText" !default;
**$cr-fonts-version:** "1.0.1" !default;
**$cr-prefix:** crux-;
**$break-sm:** 480px;
**$break-md:** 768px;
**$break-lg:** 992px;
**$break-xlg:** 1200px;
*/
@font-face {
font-family: "Averta W01 Extrathin";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-style: 100;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Extrathin";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 ExtrathinItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 ExtrathinItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Thin";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Thin";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 ThinItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 ThinItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Light";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Light";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 LightItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 LightItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Regular";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Regular";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 RegularItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 RegularItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Semibold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Semibold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 SemiboldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 SemiboldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Bold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Bold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 BoldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 BoldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 ExtraBold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 ExtraBold";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 ExtraBoldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 800;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 ExtraBoldItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 800;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 Black";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 Black";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "Averta W01 BlackItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF_L.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "Averta W01 BlackItalic";
src: url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/CR-AvertaVF-S.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "PublicoText Bold";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-Bold-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/PublicoText-Bold-Web.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "PublicoText Bold";
src: url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Bold-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Bold-Web.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "PublicoText Bold Italic";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-BoldItalic-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/PublicoText-BoldItalic-Web.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "PublicoText Bold Italic";
src: url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-BoldItalic-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-BoldItalic-Web.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "PublicoText Semibold";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-Semibold-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/PublicoText-Semibold-Web.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "PublicoText SemiBold Italic";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-SemiboldItalic-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/PublicoText-SemiboldItalic-Web.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "PublicoText";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-Roman-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/PublicoText-Roman-Web.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "PublicoText";
src: url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Roman-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Roman-Web.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
@font-face {
font-family: "PublicoText Italic";
src: url("//cdn.cr.org/crux/fonts/v1/PublicoText-Italic-Web.eot") format("eot");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: u+0020-007e, u+00a0-0127, u+012a-0137, u+0139-017f, u+018f, u+0192, u+01e6-01e7, u+01ea-01eb, u+01fa-01ff, u+0218-021b, u+0232-0233, u+0237, u+0259, u+02c6-02c7, u+02d8-02dd, u+0300-0308, u+030a-030c, u+0327-0328, u+0374-0375, u+1e80-1e85, u+1e9e, u+1ef2-1ef3, u+2002-2003, u+2007, u+2009, u+2010-2015, u+2018-201a, u+201c-201e, u+2020-2022, u+2030, u+2032-2033, u+2039-203a, u+203d, u+2042, u+2044, u+2051, u+2070, u+2074-207e, u+2080-208e, u+20ab-20ac, u+20ba, u+2113, u+2116-2117, u+2120, u+2122, u+2126, u+212e, u+215b-215e, u+2190-2199, u+2202, u+2205-2206, u+220f, u+2211-2212, u+221a, u+221e, u+222b, u+2236, u+2248, u+2260, u+2264-2265, u+2e18;
}
@font-face {
font-family: "PublicoText Italic";
src: url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Italic-Web.woff2") format("woff2"), url("//cdn.cr.org/crux/fonts/v1/small/PublicoText-Italic-Web.woff") format("woff");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: u+0020-005f, u+0061-007d, u+00a1-00a3, u+00a6, u+00a8-00a9, u+00ab, u+00ae, u+00b4, u+00b7, u+00bb, u+00bf, u+00c1, u+00c9, u+00cd, u+00d1, u+00d3, u+00d7, u+00da, u+00dc, u+00df, u+00e1, u+00e9, u+00ed, u+00f1, u+00f3, u+00f7, u+00fa, u+00fc, u+02dc, u+0301, u+0303, u+0308, u+2013-2014, u+2018-201a, u+201c-201e, u+2022, u+2039, u+203a, u+20ac, u+2122, u+2212, u+a0, u+b5, u+2026;
}
/*doc
---
title: Mixins
name: _22_mixins
category: developer
---
Use these mixins to quickly construct your CSS.
### fontdef($font: false, $size: false, $colour: false, $weight: false, $lh: false, $base: false);
**Handles output of font related settings.**
* **font-family**: use values '*regular*', '*light*', '*bold*', '*black*', '*extrathin*', and '*extrabold*' to get these variants for the Averta font. Use '*publico*' or '*publicobold*' to get Publico or Publico Bold, respectively.
* **font-size**: Use a value for px (without the px). If a rem value is desired, set the base value below in **base**.
* **color**: Pass any hex color or SASS variable
* **font-weight**: use any numeric value (100, 400, 700) or standard '*bold*', '*bolder*', or '*normal*' value.
* **line-height**: Use either px, em or rem.
* **base**: Sets the size of the base html font size (in px). This is used to handle conversion to rem. When **base** is present, both px and rem values will be set, with rem being the override and px being the fallback for browsers that don't support rem.
**Note:** For reference, the current stylesheets in use on Consumer Reports use 10px for base html font size, and 14px for max-width: 768px.
*Example:*
@include fontdef(regular, 20px, #000, normal, 1.4em, 10);
### linkstyle($width);
** Handles creating link and hover styles. Will apply a green border-bottom to your copy, with the width of your passed value. On hover, the copy will change from black to green.**
*Example:*
@include linkstyle(2px);
### green-hover();
**Handles creating the hover psuedo class that changes your copy to green when hovered over.**
*Example:*
@include green-hover();
### rev-green-hover();
**Handles creating the hover psuedo class that changes your copy to white with green background when hovered over.**
*Example:*
@include rev-green-hover();
### responsive($media);
**Handles creating a media query at the requested size.**
$media options are:
* **sm:** @media only screen and (min-width: $break-sm) and (max-width: $break-md - 1)
* **md:** @media only screen and (min-width: $break-md) and (max-width: $break-lg - 1)
* **lg:** @media only screen and (min-width: $break-lg) and (max-width: $break-xlg - 1)
* **md-lg:** @media only screen and (min-width: $break-md) and (max-width: $break-xlg - 1)
* **xlg:** @media only screen and (min-width: $break-xlg)
*Example:*
@include responsive (sm) {
// styling here
};
*/
/*doc
---
title: Navigation
name: _05_navigation
category: main
---
```html_example
```
## Sub Nav Links
```html_example
```
*/
.crux-main-nav__link {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
color: #000;
font-weight: bold;
line-height: 1.2em;
}
@media only screen and (max-width: 767px) {
.crux-main-nav__link {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
font-weight: bold;
line-height: 1.2em;
}
}
.crux-main-nav__link a {
text-decoration: none;
color: #000;
}
.crux-main-nav__link a:hover {
text-decoration: underline;
}
.crux-sub-nav__link {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
color: #000;
font-weight: bold;
line-height: 1.2em;
}
@media only screen and (max-width: 767px) {
.crux-sub-nav__link {
font-size: 14px;
font-size: 14 / 14rem;
}
}
.crux-sub-nav__link a {
text-decoration: none;
color: #000;
}
.crux-sub-nav__link a:hover, .crux-sub-nav__link a:active {
color: #000;
border-bottom: 5px solid #000;
padding-bottom: 5px;
}
/*doc
---
title: Typography
name: _03_typography
category: main
---
The Consumer Reports brand typeface is called Averta. The Averta type family has many weights,
but only four weights are to be used for Consumer Report materials. Below is a listing of appropriate type usages. Though these weights have italic counterparts, they should be avoided.
```html_example
```
```html_example
```
```html_example
```
```html_example
Here is a intro large title. With a link.
```
```html_example
Body copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit. With link . Dolorem id mollitia rerum quos nam fugiat unde reprehenderit ducimus, delectus vero. Repellendus dolores possimus ut delectus laboriosam suscipit nihil iusto cum.
```
```html_example
Body copy, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, exercitationem saepe necessitatibus nesciunt ullam magnam quasi. Perspiciatis, quibusdam molestias doloribus sapiente quam. Aliquid magnam, animi, ea maiores sit quibusdam. With a link.
```
```html_example
Body copy, small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum voluptas similique doloremque repellendus ducimus vel laborum a minima aperiam nam eum ut quam, fuga soluta dolores eius facere deserunt, quaerat. With a link .
```
```html_example
Body copy, small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem consequuntur, pariatur quas vitae quos obcaecati, dolorem eaque corporis adipisci magni, assumenda eligendi? Ad, velit quasi id impedit itaque quaerat eaque. With a link.
```
```html_example
Body copy, extra small. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. With a link .
```
```html_example
Body copy, extra small, bold. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam aut blanditiis magni dolores illo vero fuga perferendis praesentium mollitia! Beatae, quas hic adipisci id repellendus accusamus. Saepe sed, ratione. With a link .
```
## Link List View
```html_example
```
## Link List View Small
```html_example
```
```html_example
Captions looks like this. With a link .
```
```html_example
Article content looks like this.
With a link. Article H3 looks like this. With a link. Article body looks like this. A bold item would look like this , and italics will look like this . With a link.
Item one. Item two. Item three. Article Link looks like this. This class is intended to be used on an actual anchor link.
```
```html_example
Article Link Small looks like this. This class is intended to be used on an actual anchor link.
```
```html_example
Quote looks like this.
```
```html_example
Headline Standard looks like this. With a link.
```
```html_example
Headline Feature looks like this. With a link.
```
```html_example
Marketing Title looks like this. With a link.
```
```html_example
Call to action looks like this. With a link.
```
```html_example
74
```
```html_example
```
```html_example
74
```
```html_example
74
```
```html_example
74
```
```html_example
Product title looks like this. With a link.
```
```html_example
Product title small looks like this. With a link.
```
```html_example
Component title looks like this. With a link.
```
```html_example
Label style looks like this. With a link.
```
```html_example
Label style regular looks like this. With a link.
```
```html_example
Label style (small) looks like this. With a link.
```
*/
/* Mimic Baselines */
html {
font-size: 10px;
}
@media only screen and (max-width: 767px) {
html {
font-size: 14px;
}
}
.crux-black {
color: #000 !important;
}
.crux-white {
color: #fff !important;
}
.crux-page-title {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 50px;
font-size: 5rem;
color: #000;
font-weight: normal;
line-height: 1.1em;
}
.crux-page-title a {
color: #000;
text-decoration: none;
}
.crux-page-title a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-page-title {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 2.1428571429rem;
font-weight: normal;
line-height: 1.2em;
}
}
.crux-section-header {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 36px;
font-size: 3.6rem;
color: #000;
font-weight: normal;
line-height: 1.2em;
}
.crux-section-header a {
color: #000;
text-decoration: none;
}
.crux-section-header a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-section-header {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 1.8571428571rem;
font-weight: normal;
line-height: 1.2em;
}
}
.crux-section-header--small {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 2.6rem;
font-weight: normal;
line-height: 31px;
}
.crux-section-header--small a {
color: #000;
text-decoration: none;
}
.crux-section-header--small a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-section-header--small {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 21px;
font-size: 1.5rem;
font-weight: normal;
line-height: 25px;
}
}
.crux-intro-large {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 36px;
font-size: 3.6rem;
color: #000;
font-weight: normal;
line-height: 1.2em;
}
.crux-intro-large a {
color: #000;
border-color: #000;
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-intro-large a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-intro-large {
font-family: "Averta W01 Light", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 1.8571428571rem;
font-weight: normal;
line-height: 1.2em;
}
}
.crux-body-copy {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
color: #000;
font-weight: normal;
line-height: 1.34em;
}
.crux-body-copy a {
color: #000;
border-color: #000;
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-body-copy a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
font-weight: normal;
line-height: 1.34em;
}
}
.crux-body-copy.crux-body-copy--list {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.4em;
margin: 0;
padding: 0;
}
.crux-body-copy.crux-body-copy--list li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.4em;
list-style: none;
margin-left: 0;
margin-bottom: 25px;
margin-bottom: 25/14rem;
}
.crux-body-copy.crux-body-copy--list li a {
text-decoration: none;
}
.crux-body-copy.crux-body-copy--list li a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--list li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
font-weight: normal;
line-height: 1.4em;
}
}
.crux-body-copy.crux-body-copy--list a {
border-bottom: none;
}
.crux-body-copy.crux-body-copy--small {
font-size: 16px;
font-size: 16/10rem;
}
.crux-body-copy.crux-body-copy--small a {
text-decoration: none;
}
.crux-body-copy.crux-body-copy--small a:hover {
text-decoration: none;
color: #00AE4D;
}
.crux-body-copy.crux-body-copy--small.crux-body-copy--list {
font-size: 16/10rem;
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
line-height: 1.4em;
margin: 0;
padding: 0;
}
.crux-body-copy.crux-body-copy--small.crux-body-copy--list li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
line-height: 1.4em;
list-style: none;
margin-left: 0;
margin-bottom: 22px;
margin-bottom: 22/14rem;
}
.crux-body-copy.crux-body-copy--small.crux-body-copy--list li a {
text-decoration: none;
}
.crux-body-copy.crux-body-copy--small.crux-body-copy--list li a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--small.crux-body-copy--list li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.1428571429rem;
font-weight: normal;
line-height: 1.4em;
font-size: 16/14rem;
}
}
.crux-body-copy.crux-body-copy--small.crux-body-copy--list a {
border-bottom: none;
}
.crux-body-copy.crux-body-copy--small--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: normal;
line-height: 1.34em;
}
.crux-body-copy.crux-body-copy--small--bold a {
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-body-copy.crux-body-copy--small--bold a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--small--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.1428571429rem;
font-weight: normal;
line-height: 1.34em;
}
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--small {
font-size: 16px;
font-size: 16/14rem;
}
}
.crux-body-copy.crux-body-copy--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.34em;
}
.crux-body-copy.crux-body-copy--bold a {
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-body-copy.crux-body-copy--bold a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
font-weight: normal;
line-height: 1.34em;
}
}
.crux-body-copy.crux-body-copy--extra-small {
font-size: 12px;
font-size: 12/10rem;
line-height: 1.34em;
letter-spacing: 0.5px;
}
.crux-body-copy.crux-body-copy--extra-small a {
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-body-copy.crux-body-copy--extra-small a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
.crux-body-copy.crux-body-copy--extra-small--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 12px;
font-size: 1.2rem;
font-weight: normal;
line-height: 1.34em;
letter-spacing: 0.5px;
}
.crux-body-copy.crux-body-copy--extra-small--bold a {
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-body-copy.crux-body-copy--extra-small--bold a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--extra-small--bold {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 12px;
font-size: 0.8571428571rem;
font-weight: normal;
line-height: 1.34em;
}
}
@media only screen and (max-width: 767px) {
.crux-body-copy.crux-body-copy--extra-small {
font-size: 12px;
font-size: 12/14rem;
}
}
.crux-captions {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 12px;
font-size: 1.2rem;
color: #000;
font-weight: normal;
line-height: 1.3em;
letter-spacing: 0.5px;
}
.crux-captions a {
color: #000;
border-color: #000;
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-captions a:hover {
text-decoration: none;
color: #00AE4D;
border-bottom: 1px solid #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-captions {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 12px;
font-size: 0.8571428571rem;
font-weight: normal;
line-height: 1.3em;
}
}
.crux-article {
font-family: "PublicoText", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
color: #000;
font-weight: normal;
line-height: 1.5em;
}
.crux-article a {
color: #000;
border-color: #000;
text-decoration: none;
border-width: 0;
border-bottom-width: 1px;
border-style: solid;
}
.crux-article a:hover {
text-decoration: none;
background: #000;
color: #fff;
transition: background 0.6s cubic-bezier(0.33, 0.66, 0.66, 1);
}
@media only screen and (max-width: 767px) {
.crux-article {
font-family: "PublicoText", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 1.4285714286rem;
font-weight: normal;
line-height: 1.5em;
}
}
.crux-article h3 {
font-family: "PublicoText Bold", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
font-weight: 800;
line-height: 1.5em;
}
@media only screen and (max-width: 767px) {
.crux-article h3 {
font-size: 16px;
font-size: 16/14rem;
}
}
.crux-article p,
.crux-article li {
font-family: "PublicoText", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
font-weight: normal;
line-height: 1.5em;
}
@media only screen and (max-width: 767px) {
.crux-article p,
.crux-article li {
font-size: 16px;
font-size: 16/14rem;
}
}
.crux-article p em, .crux-article p i,
.crux-article li em,
.crux-article li i {
font-family: "PublicoText Italic", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
font-weight: normal;
line-height: 1.5em;
}
@media only screen and (max-width: 767px) {
.crux-article p em, .crux-article p i,
.crux-article li em,
.crux-article li i {
font-size: 16px;
font-size: 16/14rem;
}
}
.crux-article p b, .crux-article p strong,
.crux-article li b,
.crux-article li strong {
font-family: "PublicoText Bold", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
font-weight: 800;
line-height: 1.5em;
}
@media only screen and (max-width: 767px) {
.crux-article p b, .crux-article p strong,
.crux-article li b,
.crux-article li strong {
font-size: 16px;
font-size: 16/14rem;
}
}
.crux-article__bold-link {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 32px;
font-size: 3.2rem;
color: #000;
font-weight: normal;
line-height: 1.2em;
}
@media only screen and (max-width: 767px) {
.crux-article__bold-link {
font-size: 18px;
font-size: 18/14rem;
}
}
.crux-article__bold-link:hover {
text-decoration: none;
color: #00AE4D;
}
.crux-article__bold-link.crux-article__bold-link--small {
font-size: 18px;
font-size: 18/10rem;
}
@media only screen and (max-width: 767px) {
.crux-article__bold-link.crux-article__bold-link--small {
font-size: 18px;
font-size: 18/14rem;
}
}
.crux-quote {
font-family: "PublicoText Bold", Helvetica, Arial, sans-serif;
font-size: 32pxpx;
font-size: 3.2pxrem;
color: #000;
font-weight: normal;
line-height: 1.2em;
font-size: 32/10rem;
}
.crux-quote:before {
content: "“";
}
.crux-quote:after {
content: "”";
}
@media only screen and (max-width: 767px) {
.crux-quote {
font-size: 26px;
font-size: 26/14rem;
}
}
.crux-headline--feature {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 90px;
font-size: 9rem;
color: #000;
font-weight: normal;
line-height: 1em;
}
.crux-headline--feature a {
color: #000;
text-decoration: none;
}
.crux-headline--feature a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-headline--feature {
font-size: 50px;
font-size: 50/14rem;
}
}
.crux-headline--standard {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 50px;
font-size: 5rem;
color: #000;
font-weight: normal;
line-height: 1em;
}
.crux-headline--standard a {
color: #000;
text-decoration: none;
}
.crux-headline--standard a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-headline--standard {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 2.1428571429rem;
font-weight: normal;
line-height: 1em;
}
}
.crux-marketing--title {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 36px;
font-size: 3.6rem;
color: #000;
font-weight: normal;
line-height: 1em;
}
.crux-marketing--title a {
color: #000;
text-decoration: none;
}
.crux-marketing--title a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-marketing--title {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 36px;
font-size: 2.5714285714rem;
font-weight: normal;
line-height: 1em;
}
}
.crux-call-to-action {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 50px;
font-size: 5rem;
color: #000;
font-weight: normal;
line-height: 1em;
}
@media only screen and (max-width: 767px) {
.crux-call-to-action {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 2.1428571429rem;
font-weight: normal;
line-height: 1em;
}
}
.crux-call-to-action a {
color: #000;
text-decoration: none;
}
.crux-call-to-action a:hover {
text-decoration: none;
color: #00AE4D;
}
.crux-numbers, .crux-numbers.crux-numbers--small, .crux-numbers.crux-numbers--medium, .crux-numbers.crux-numbers--large, .crux-numbers.crux-numbers--extra-large {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 2.6rem;
font-weight: normal;
line-height: 1em;
color: #000;
}
.crux-numbers a, .crux-numbers.crux-numbers--small a, .crux-numbers.crux-numbers--medium a, .crux-numbers.crux-numbers--large a, .crux-numbers.crux-numbers--extra-large a {
color: #000;
text-decoration: none;
}
.crux-numbers a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-numbers, .crux-numbers.crux-numbers--small, .crux-numbers.crux-numbers--medium, .crux-numbers.crux-numbers--large, .crux-numbers.crux-numbers--extra-large {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 1.8571428571rem;
font-weight: normal;
line-height: 1em;
}
}
.crux-numbers.crux-numbers--extra-large {
font-size: 90px;
font-size: 90/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers.crux-numbers--extra-large {
font-size: 90/14rem;
}
}
.crux-numbers.crux-numbers--large {
font-size: 50px;
font-size: 50/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers.crux-numbers--large {
font-size: 50/14rem;
}
}
.crux-numbers.crux-numbers--medium {
font-size: 18px;
font-size: 18/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers.crux-numbers--medium {
font-size: 18/14rem;
}
}
.crux-numbers.crux-numbers--small {
font-size: 12px;
font-size: 12/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers.crux-numbers--small {
font-size: 12/14rem;
}
}
.crux-numbers-score {
font-family: "Averta W01 Black", Helvetica, Arial, sans-serif;
font-size: 40px;
font-size: 4rem;
color: inherit;
font-weight: normal;
line-height: 1em;
}
.crux-numbers-score.crux-numbers-score--medium {
font-size: 30px;
font-size: 30/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers-score.crux-numbers-score--medium {
font-size: 30/14rem;
}
}
.crux-numbers-score.crux-numbers-score--small {
font-size: 20px;
font-size: 20/10rem;
}
@media only screen and (max-width: 767px) {
.crux-numbers-score.crux-numbers-score--small {
font-size: 20/14rem;
}
}
.crux-product-title {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 2.6rem;
color: #000;
font-weight: normal;
line-height: 1.2em;
}
.crux-product-title a {
color: #000;
text-decoration: none;
}
.crux-product-title a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-product-title {
font-size: 18px;
font-size: 18/14rem;
}
}
.crux-product-title--small {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
line-height: 1.2em;
}
.crux-product-title--small a {
color: #000;
text-decoration: none;
}
.crux-product-title--small a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-product-title--small {
font-size: 14px;
font-size: 14/14rem;
line-height: 17/14em;
}
}
.crux-component-title {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 26px;
font-size: 2.6rem;
color: #000;
font-weight: normal;
line-height: 1.2em;
}
.crux-component-title a {
color: #000;
text-decoration: none;
}
.crux-component-title a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-component-title {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
font-weight: normal;
line-height: 1.2em;
}
}
.crux-label-style, .crux-label-style.crux-label-style--small {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #000;
font-weight: normal;
line-height: 1.1em;
text-transform: uppercase;
letter-spacing: 1px;
}
.crux-label-style a, .crux-label-style.crux-label-style--small a {
color: #000;
text-decoration: none;
}
.crux-label-style a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-label-style, .crux-label-style.crux-label-style--small {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1rem;
font-weight: normal;
line-height: 1.1em;
}
}
.crux-label-style.crux-label-style--small {
font-size: 10px;
font-size: 10/10rem;
}
.crux-label-style.crux-label-style--small a {
text-decoration: none;
}
.crux-label-style.crux-label-style--small a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-label-style.crux-label-style--small {
font-size: 10/14rem;
}
}
.crux-label-style--regular {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #000;
font-weight: normal;
line-height: 1.1em;
text-transform: uppercase;
letter-spacing: 1px;
}
.crux-label-style--regular a {
color: #000;
text-decoration: none;
}
.crux-label-style--regular a:hover {
text-decoration: none;
color: #00AE4D;
}
@media only screen and (max-width: 767px) {
.crux-label-style--regular {
font-size: 14px;
font-size: 14/14rem;
}
}
a.crux-body-copy, a.crux-body-copy--bold, a.crux-body-copy--small, a.crux-bodu-copy--extra-small, a.crux-body-copy--list, a.crux-label-style, a.crux-label-style.crux-label-style--small, a.crux-label-style--small, a.crux-label-style--regular, a.crux-numbers, a.crux-numbers.crux-numbers--extra-large, a.crux-numbers.crux-numbers--large, a.crux-numbers.crux-numbers--medium, a.crux-numbers.crux-numbers--small, a.crux-numbers--large {
text-decoration: none;
color: #000;
}
a.crux-body-copy:hover, a.crux-body-copy--bold:hover, a.crux-body-copy--small:hover, a.crux-bodu-copy--extra-small:hover, a.crux-body-copy--list:hover, a.crux-label-style:hover, a.crux-label-style--small:hover, a.crux-label-style--regular:hover, a.crux-numbers:hover, a.crux-numbers--large:hover {
text-decoration: none;
color: #00AE4D;
}
/*doc
---
title: CR Ratings
name: _04_cr_ratings
category: main
---
## Overall Score Responsive
### Excellent
```html_example
```
### Very Good
```html_example
```
### Good
```html_example
```
### Fair
```html_example
```
### Poor
```html_example
```
### Locked
```html_example
```
```html_example
```
### In Test/Not In Test
```html_example
```
```html_example
```
## Overall Score Static
### XS
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
### SM
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
### MD
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
### LG
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
# XL
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
```html_example
```
*/
.crux-overall-score-responsive {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score-responsive p {
font-size: 40px;
line-height: 100px;
}
.crux-overall-score-responsive p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 38px;
}
@media only screen and (max-width: 767px) {
.crux-overall-score-responsive p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 10px;
font-size: 0.7142857143rem;
font-weight: 900;
line-height: 1.1;
margin-top: 16px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.crux-overall-score-responsive p.crux-overall-score-in-test {
margin-top: 30px;
}
}
.crux-overall-score-responsive p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
font-size: 2rem;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 29px;
word-spacing: 100px;
}
@media only screen and (max-width: 767px) {
.crux-overall-score-responsive p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 10px;
font-size: 0.7142857143rem;
font-weight: 900;
line-height: 1.1;
margin-top: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.crux-overall-score-responsive p.crux-overall-score-not-tested {
margin-top: 18px;
}
}
.crux-overall-score-responsive .crux-icons-lock-solid:before {
top: -5px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.crux-overall-score-responsive {
width: 80px;
height: 80px;
}
.crux-overall-score-responsive p {
font-size: 40px;
line-height: 80px;
}
.crux-overall-score-responsive .crux-icons-lock-solid:before {
top: -5px;
}
}
@media only screen and (max-width: 767px) {
.crux-overall-score-responsive {
width: 40px;
height: 40px;
}
.crux-overall-score-responsive p {
font-size: 20px;
line-height: 40px;
}
.crux-overall-score-responsive .crux-icons-lock-solid:before {
top: -27px;
}
}
.crux-overall-score--xs {
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 100px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score--xs p {
font-size: 20px;
line-height: 40px;
}
.crux-overall-score--xs p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 10px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 16px;
}
.crux-overall-score--xs p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 10px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 10px;
word-spacing: 100px;
}
.crux-overall-score--xs .crux-icons-lock-solid:before {
top: -27px;
}
.crux-overall-score--sm {
width: 60px;
height: 60px;
border-radius: 50%;
text-align: center;
line-height: 60px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score--sm p {
font-size: 30px;
line-height: 60px;
}
.crux-overall-score--sm p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 23px;
}
.crux-overall-score--sm p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 12px;
word-spacing: 100px;
}
.crux-overall-score--sm .crux-icons-lock-solid:before {
top: -5px;
}
.crux-overall-score--md {
width: 70px;
height: 70px;
border-radius: 50%;
text-align: center;
line-height: 70px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score--md p {
font-size: 30px;
line-height: 70px;
}
.crux-overall-score--md p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 25px;
}
.crux-overall-score--md p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 12px;
word-spacing: 100px;
}
.crux-overall-score--md .crux-icons-lock-solid:before {
top: -5px;
}
.crux-overall-score--lg {
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
line-height: 80px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score--lg p {
font-size: 40px;
line-height: 80px;
}
.crux-overall-score--lg p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 30px;
}
.crux-overall-score--lg p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 17px;
word-spacing: 100px;
}
.crux-overall-score--lg .crux-icons-lock-solid:before {
top: -5px;
}
.crux-overall-score--xl {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.crux-overall-score--xl p {
font-size: 40px;
line-height: 100px;
}
.crux-overall-score--xl p.crux-overall-score-in-test {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 38px;
}
.crux-overall-score--xl p.crux-overall-score-not-tested {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 20px;
color: #fff;
font-weight: 900;
line-height: 1.1;
margin-top: 28px;
word-spacing: 100px;
}
.crux-overall-score--xl .crux-icons-lock-solid:before {
top: -5px;
}
/*doc
---
title: Iconography
name: _09_iconography
category: main
---
We have created a font for our icon set.
The font can be downloaded for offline use by clicking here .
A reference PDF is available for download by clicking here .
### Accessible icons
Modern versions of assistive technologies will announce CSS generated content,
as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the `aria-hidden="true"` attribute.
If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the `.sr-only` class.
If you're creating controls with no other text (such as a `` that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an `aria-label` attribute on the control itself.
````html_example
Browse
Recommended
Favorite
````
crux-icons-account
crux-icons-audio
crux-icons-audio-off
crux-icons-best-buy
crux-icons-brands
crux-icons-browse
crux-icons-bullet
crux-icons-call
crux-icons-camera
crux-icons-caret-down-big
crux-icons-caret-down-small
crux-icons-caret-slider-left
crux-icons-caret-slider-right
crux-icons-caret-up-big
crux-icons-caret-up-small
crux-icons-chat
crux-icons-check
crux-icons-close
crux-icons-confirmation
crux-icons-cr
crux-icons-doc
crux-icons-dontbuy
crux-icons-download
crux-icons-excellent
crux-icons-facebook
crux-icons-fair
crux-icons-fall
crux-icons-filter
crux-icons-filter-compare
crux-icons-filter-grid
crux-icons-filter-list
crux-icons-flag
crux-icons-flag-fill
crux-icons-gallery
crux-icons-good
crux-icons-heart
crux-icons-heart-fill
crux-icons-help-information
crux-icons-key
crux-icons-less
crux-icons-location
crux-icons-lock
crux-icons-lock-open
crux-icons-lock-solid
crux-icons-lock-solid-open
crux-icons-mail
crux-icons-member-expert
crux-icons-menu
crux-icons-money
crux-icons-mpg-gas
crux-icons-pause
crux-icons-pinterest
crux-icons-play
crux-icons-plus
crux-icons-poor
crux-icons-print
crux-icons-question
crux-icons-rain
crux-icons-recall-warning
crux-icons-recently-viewed
crux-icons-recommended
crux-icons-search
crux-icons-selection
crux-icons-share
crux-icons-share2
crux-icons-shopping-cart
crux-icons-sms
crux-icons-star
crux-icons-sun
crux-icons-swipe
crux-icons-thumbs-down
crux-icons-thumbs-up
crux-icons-twitter
crux-icons-upload
crux-icons-verygood
crux-icons-winter
crux-icons-youtube
crux-icons-add
## Character Mappings
*/
@font-face {
font-family: "crux-icons";
src: url("../static/icons/crux-icons.eot");
src: url("../static/icons/crux-icons.eot?#iefix") format("embedded-opentype"), url("../static/icons/crux-icons.woff") format("woff"), url("../static/icons/crux-icons.ttf") format("truetype"), url("../static/icons/crux-icons.svg#crux-icons") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "crux-icons" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
font-size: inherit;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^=crux-icons-]:before,
[class*=" crux-icons-"]:before {
font-family: inherit;
font-size: inherit;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.crux-icons {
font-family: "crux-icons";
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
}
.crux-icons:before {
font-style: normal;
font-weight: 400;
line-height: 1;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
position: relative;
top: 0;
}
/* For buttons */
.crux-btn .crux-icons:before {
font-size: 20px;
top: -1px;
}
.crux-btn span {
vertical-align: middle;
}
/* Generated from Fontastic.me CSS */
.crux-icons-account:before {
content: "a";
}
.crux-icons-audio:before {
content: "°";
}
.crux-icons-audio-off:before {
content: "·";
}
.crux-icons-best-buy:before {
content: "b";
}
.crux-icons-brands:before {
content: "ç";
}
.crux-icons-browse:before {
content: "d";
}
.crux-icons-bullet:before {
content: "e";
}
.crux-icons-call:before {
content: "f";
}
.crux-icons-camera:before {
content: "g";
}
.crux-icons-caret-down-big:before {
content: "h";
}
.crux-icons-caret-down-small:before {
content: "i";
}
.crux-icons-caret-slider-left:before {
content: "j";
}
.crux-icons-caret-slider-right:before {
content: "k";
}
.crux-icons-caret-up-big:before {
content: "7";
}
.crux-icons-caret-up-small:before {
content: "µ";
}
.crux-icons-chat:before {
content: "l";
}
.crux-icons-check:before {
content: "m";
}
.crux-icons-close:before {
content: "n";
}
.crux-icons-confirmation:before {
content: "o";
}
.crux-icons-cr:before {
content: "†";
}
.crux-icons-doc:before {
content: "q";
}
.crux-icons-dontbuy:before {
content: "r";
}
.crux-icons-download:before {
content: "s";
}
.crux-icons-excellent:before {
content: "5";
}
.crux-icons-facebook:before {
content: "u";
}
.crux-icons-fair:before {
content: "2";
}
.crux-icons-fall:before {
content: "w";
}
.crux-icons-filter:before {
content: "x";
}
.crux-icons-filter-compare:before {
content: "y";
}
.crux-icons-filter-grid:before {
content: "z";
}
.crux-icons-filter-list:before {
content: "t";
}
.crux-icons-flag:before {
content: "B";
}
.crux-icons-flag-fill:before {
content: "v";
}
.crux-icons-gallery:before {
content: "C";
}
.crux-icons-good:before {
content: "3";
}
.crux-icons-heart:before {
content: "E";
}
.crux-icons-heart-fill:before {
content: "A";
}
.crux-icons-help-information:before {
content: "F";
}
.crux-icons-key:before {
content: "G";
}
.crux-icons-less:before {
content: "H";
}
.crux-icons-location:before {
content: "I";
}
.crux-icons-lock:before {
content: "J";
}
.crux-icons-lock-open:before {
content: "K";
}
.crux-icons-lock-solid:before {
content: "L";
}
.crux-icons-lock-solid-open:before {
content: "M";
}
.crux-icons-mail:before {
content: "N";
}
.crux-icons-member-expert:before {
content: "O";
}
.crux-icons-menu:before {
content: "D";
}
.crux-icons-money:before {
content: "P";
}
.crux-icons-mpg-gas:before {
content: "Q";
}
.crux-icons-pause:before {
content: "R";
}
.crux-icons-pinterest:before {
content: "S";
}
.crux-icons-play:before {
content: "T";
}
.crux-icons-plus:before {
content: "U";
}
.crux-icons-poor:before {
content: "1";
}
.crux-icons-print:before {
content: "V";
}
.crux-icons-question:before {
content: "W";
}
.crux-icons-rain:before {
content: "X";
}
.crux-icons-recall-warning:before {
content: "¥";
}
.crux-icons-recently-viewed:before {
content: "Z";
}
.crux-icons-recommended:before {
content: "0";
}
.crux-icons-search:before {
content: "Y";
}
.crux-icons-selection:before {
content: "™";
}
.crux-icons-share:before {
content: "£";
}
.crux-icons-share2:before {
content: "¢";
}
.crux-icons-shopping-cart:before {
content: "∞";
}
.crux-icons-sms:before {
content: "§";
}
.crux-icons-star:before {
content: "¶";
}
.crux-icons-sun:before {
content: "•";
}
.crux-icons-swipe:before {
content: "p";
}
.crux-icons-thumbs-down:before {
content: "ª";
}
.crux-icons-thumbs-up:before {
content: "!";
}
.crux-icons-twitter:before {
content: "6";
}
.crux-icons-upload:before {
content: "#";
}
.crux-icons-verygood:before {
content: "4";
}
.crux-icons-winter:before {
content: "%";
}
.crux-icons-youtube:before {
content: "&";
}
.crux-icons-add:before {
content: "c";
}
/*doc
---
title: Buttons
name: _06_buttons
category: main
---
The standard desktop button for CR is 60px in height and 45px for mobile.
### Primary Button (Responsive)
If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.
```html_example
Button Text
```
### Primary Button Large
Black buttons should be used on all backgrounds, for normal button functions (i.e. sign up, sign in, save, compare, view ratings).
```html_example
Button Text
```
### Primary Button Small
```html_example
Button Text
```
### Special Button (Responsive)
Green buttons should be used on photos, or where a special call to action is required (i.e. subscribe, marketing, donate, membership, sign up, price & shop, non-subscriber view ratings). If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.
```html_example
Button Text
```
### Special Button Large
Green buttons should be used on photos, or where a special call to action is required (i.e. subscribe, marketing, donate, membership, sign up, price & shop, non-subscriber view ratings).
```html_example
Button Text
```
### Special Button Small
```html_example
Button Text
```
### Tertiary Button (Responsive)
Gray buttons should be used sparingly. ( i.e. load more or learn more). If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.
```html_example
Button Text
```
### Tertiary Button Large
Gray buttons should be used sparingly. ( i.e. load more or learn more)
```html_example
Button Text
```
### Tertiary Button Small
```html_example
Button Text
```
### Inactive Button (Responsive)
If you leave the --lg or --sm modifier off of the class, you get the responsive version of the button. This will use the --lg variant styling at desktop sizes, and the --sm styling at the mobile sizes.
```html_example
Button Text
```
### Inactive Button Large
```html_example
Button Text
```
### Inactive Button Small
```html_example
Button Text
```
### Example using input tag
```html_example
```
```html_example
```
### Example using link
```html_example
```
```html_example
```
### Disabled Buttons
If using a `` element, the proper way to represent a disabled button is to use the `.crux-btn-inactive` button.
```html_example
Inactive Button
```
If using an `Block Button Copy
```
*/
/* Buttons */
/* Mixin to handle disabled psuedo class and hover */
/* Mixin to handle when btn classes are applied to links */
.crux-btn {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #fff;
font-weight: normal;
line-height: normal;
touch-action: manipulation;
border: 0;
border-radius: 0;
text-decoration: none; /* for the instances where it used outside of .crux-body-copy */
}
@media only screen and (max-width: 767px) {
.crux-btn {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
font-weight: normal;
line-height: normal;
}
}
.crux-btn:focus {
outline: 0;
}
.crux-btn-primary, .crux-btn-primary--sm, .crux-btn-primary--lg {
text-align: center;
background: #000;
transition: background-color 0.3s ease;
padding: 0 60px;
height: 60px;
line-height: 60px;
}
@media only screen and (max-width: 767px) {
.crux-btn-primary, .crux-btn-primary--sm, .crux-btn-primary--lg {
font-size: 22px;
font-size: 22 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
.crux-btn-primary, .crux-btn-primary--sm, .crux-btn-primary--lg {
font-size: 22 / 14rem;
}
}
.crux-btn-primary--lg {
padding: 0 60px;
height: 60px;
line-height: 60px;
}
.crux-btn-primary--lg:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-primary--lg:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-primary--lg {
display: inline-block;
border-bottom: 0;
color: #fff;
height: 60px;
padding: 0 60px;
}
a.crux-btn-primary--lg.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-primary--lg:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-primary--sm {
font-size: 18px;
font-size: 18 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
@media only screen and (max-width: 767px) {
.crux-btn-primary--sm {
font-size: 18 / 14rem;
}
}
.crux-btn-primary--sm:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-primary--sm:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-primary--sm {
display: inline-block;
border-bottom: 0;
color: #fff;
height: 45px;
padding: 0 45px;
}
a.crux-btn-primary--sm.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-primary--sm:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-primary:hover, .crux-btn-primary--lg:hover, .crux-btn-primary--sm:hover {
background: #00AE4D;
}
.crux-btn-special, .crux-btn-special--sm, .crux-btn-special--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #fff;
font-weight: normal;
line-height: normal;
text-align: center;
background: #00AE4D;
transition: background-color 0.3s ease;
padding: 0 60px;
height: 60px;
line-height: 60px;
}
@media only screen and (max-width: 767px) {
.crux-btn-special, .crux-btn-special--sm, .crux-btn-special--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
font-weight: normal;
line-height: normal;
}
}
@media only screen and (max-width: 767px) {
.crux-btn-special, .crux-btn-special--sm, .crux-btn-special--lg {
font-size: 22px;
font-size: 22 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
.crux-btn-special, .crux-btn-special--sm, .crux-btn-special--lg {
font-size: 22 / 14rem;
}
}
.crux-btn-special--lg {
padding: 0 60px;
height: 60px;
line-height: 60px;
}
.crux-btn-special--lg:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-special--lg:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-special--lg {
display: inline-block;
border-bottom: 0;
color: #fff;
height: 60px;
padding: 0 60px;
}
a.crux-btn-special--lg.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-special--lg:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-special--sm {
font-size: 18px;
font-size: 18 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
@media only screen and (max-width: 767px) {
.crux-btn-special--sm {
font-size: 18 / 14rem;
}
}
.crux-btn-special--sm:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-special--sm:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-special--sm {
display: inline-block;
border-bottom: 0;
color: #fff;
height: 45px;
padding: 0 45px;
}
a.crux-btn-special--sm.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-special--sm:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-special:hover, .crux-btn-special--lg:hover, .crux-btn-special--sm:hover {
background: #000;
}
.crux-btn-tertiary, .crux-btn-tertiary--sm, .crux-btn-tertiary--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22pxpx;
font-size: 2.2pxrem;
color: #000;
font-weight: normal;
line-height: normal;
text-align: center;
background: #c8c8c8;
transition: background-color 0.3s ease;
padding: 0 60px;
height: 60px;
line-height: 60px;
}
@media only screen and (max-width: 767px) {
.crux-btn-tertiary, .crux-btn-tertiary--sm, .crux-btn-tertiary--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
font-weight: normal;
line-height: normal;
}
}
@media only screen and (max-width: 767px) {
.crux-btn-tertiary, .crux-btn-tertiary--sm, .crux-btn-tertiary--lg {
font-size: 22 / 14rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
}
.crux-btn-tertiary--lg {
padding: 0 60px;
height: 60px;
line-height: 60px;
}
.crux-btn-tertiary--lg:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-tertiary--lg:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-tertiary--lg {
display: inline-block;
border-bottom: 0;
color: #000;
height: 60px;
padding: 0 60px;
}
a.crux-btn-tertiary--lg.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-tertiary--lg:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-tertiary--sm {
font-size: 18px;
font-size: 18 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
@media only screen and (max-width: 767px) {
.crux-btn-tertiary--sm {
font-size: 18 / 14rem;
}
}
.crux-btn-tertiary--sm:disabled {
color: #999999;
background: #c8c8c8;
}
.crux-btn-tertiary--sm:disabled:hover {
color: #999999;
background: #c8c8c8;
}
a.crux-btn-tertiary--sm {
display: inline-block;
border-bottom: 0;
color: #000;
height: 45px;
padding: 0 45px;
}
a.crux-btn-tertiary--sm.crux-btn-disabled {
pointer-events: none;
background: #c8c8c8;
color: #999999;
}
a.crux-btn-tertiary--sm:hover {
color: #fff;
border-bottom: 0;
}
.crux-btn-tertiary:hover, .crux-btn-tertiary--lg:hover, .crux-btn-tertiary--sm:hover {
background: #000;
color: #fff;
}
.crux-btn-inactive, .crux-btn-inactive--sm, .crux-btn-inactive--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22pxpx;
font-size: 2.2pxrem;
color: #999999;
font-weight: normal;
line-height: normal;
text-align: center;
background: #c8c8c8;
padding: 0 60px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.crux-btn-inactive, .crux-btn-inactive--sm, .crux-btn-inactive--lg {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
font-weight: normal;
line-height: normal;
}
}
@media only screen and (max-width: 767px) {
.crux-btn-inactive, .crux-btn-inactive--sm, .crux-btn-inactive--lg {
font-size: 22 / 14rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
}
.crux-btn-inactive--lg {
text-align: center;
background: #c8c8c8;
padding: 0 60px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
.crux-btn-inactive--sm {
font-size: 18px;
font-size: 18 / 10rem;
padding: 0 45px;
height: 45px;
line-height: 45px;
}
@media only screen and (max-width: 767px) {
.crux-btn-inactive--sm {
font-size: 18 / 14rem;
}
}
.crux-btn.crux-btn-block {
display: block;
width: 100%;
}
/*doc
---
title: Components
name: _07_components
category: main
---
Components CSS is derived from the base CSS styles. We only override the font settings to apply the Averta font in this CSS.
### Pagination Buttons
```html_example
```
### Hover Classes
Using helper classes from [Bootstrap](http://getbootstrap.com): `well` / `well-sm` / `text-center`.
```html_example
Default Hover
Primary Hover
Tertiary Hover
```
*/
/* Classes to add color specific hovers to divs */
.crux-primary-hover:hover {
background: #000;
color: #fff;
}
.crux-special-hover:hover {
background: #00AE4D;
color: #fff;
}
.crux-tertiary-hover:hover {
background: #c8c8c8;
color: #fff;
}
.crux-pagination {
font-family: "Averta W01 Bold", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #fff;
font-weight: normal;
line-height: normal;
text-align: center;
margin-top: 10px;
margin-bottom: 80px;
}
.crux-pagination__page-button {
display: inline-block;
height: 36px;
margin-right: 5px;
min-width: 36px;
padding: 0 6px;
background-color: #000;
color: #fff;
text-align: center;
font-size: 14px;
font-size: 14 / 10rem;
text-decoration: none;
font-weight: 800;
line-height: 2.7;
transition: background-color 0.5s ease;
}
@media only screen and (max-width: 767px) {
.crux-pagination__page-button {
font-size: 14 / 14rem;
}
}
.crux-pagination__page-button:first-child {
padding: 0;
}
.crux-pagination__page-button:last-child {
margin: 0;
padding: 0;
}
.crux-pagination__page-button:hover, .crux-pagination__page-button--active {
background-color: #00AE4D;
color: #fff;
text-decoration: none;
}
.crux-pagination__page-button:focus {
color: #fff;
text-decoration: none;
}
.crux-pagination__page-button--disabled, .crux-pagination__page-button--enabled {
vertical-align: top;
}
.crux-pagination__page-button--disabled:focus, .crux-pagination__page-button--enabled:focus {
background-color: #000;
}
.crux-pagination__page-button--disabled:first-child:before, .crux-pagination__page-button--enabled:first-child:before {
font-family: "crux-icons";
content: "j";
margin-left: 0;
}
.crux-pagination__page-button--disabled:last-child:before, .crux-pagination__page-button--enabled:last-child:before {
font-family: "crux-icons";
content: "k";
margin-left: 3px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.crux-pagination__page-button--disabled:before, .crux-pagination__page-button--enabled:before {
width: 32%;
height: 32%;
margin-left: 5px;
top: 7%;
}
}
.crux-pagination__page-button--disabled {
background-color: #bababa;
pointer-events: none;
}
.crux-pagination__page-button--disabled:focus {
background-color: #bababa;
}
.crux-pagination .crux-ellipses {
display: inline-block;
margin: 0 20px 0 10px;
font-size: 14px;
font-size: 14 / 10rem;
font-weight: 800;
color: #000;
}
@media only screen and (max-width: 767px) {
.crux-pagination .crux-ellipses {
font-size: 14 / 14rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.crux-pagination__page-button {
color: #fff;
text-decoration: none;
}
.crux-pagination__page-button--disabled:hover {
background-color: #bababa;
}
.crux-pagination__page-button--active {
background-color: #00AE4D;
color: #fff;
text-decoration: none;
}
}
@media only screen and (max-width: 767px) {
.crux-pagination .crux-page-button--enabled:hover {
background-color: #000;
}
.crux-pagination .crux-page-button--enabled:active {
background-color: #00AE4D;
}
.crux-pagination .crux-page-button--enabled:last-of-type {
margin-right: 0;
}
.crux-pagination .crux-page-button--disabled:hover {
background-color: #bababa;
}
}
@keyframes hover {
0% {
background-color: #00AE4D;
}
50%, 100% {
background-color: #000;
}
}
/*doc
---
title: Grid
name: _01_grid
category: main
---
Pages should be designed using Bootstrap 3's mobile first fluid grid system that appropriately scales up to 12 columns
as the device or viewport size increases.
There are some additional custom grid-classes which can be used with bootstrap grid elements.
.crux-container derives from bootstrap .container, with a change for tablet sized devices.
```html_example
Here is a container
```
Also there are two classes for adding offsets to columns: .crux-offset--left and .crux-offset--right
The values of these are 60px (for desktop) and 30px (for tablet).
### Two-columns layout
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
```
### Three-columns layout
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
```
### One-column layout
```html_example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo velit viverra, euismod quam id, rhoncus magna. Sed sodales condimentum tincidunt.
```
### Breakpoints
```
#### Input with Tooltips
```html_example
```
#### Input with white Tooltips on gray background
```html_example
```
#### Input with inline button (info)
```html_example
```
#### Error state
```html_example
```
#### Disabled state (input with placeholder)
```html_example
```
#### Disabled state (input with value)
You may have noticed that in this case we are using disabled attribute instead of crux-disabled class, you can use any of these for the component.
crux-disabled is here in order to be consistent with all other form components, since some of them like Dropdown are custom, they don't support disabled attribute.
```html_example
```
### Text Area
#### Blank state
```html_example
```
#### Ideal State
```html_example
```
#### Error state
```html_example
```
### Dropdown
#### Blank state
```html_example
```
#### Disabled state (dropdown with placeholder)
```html_example
```
#### Disabled state (dropdown with value)
```html_example
```
#### Focus state with many items
```html_example
```
#### Focus state with few items
```html_example
```
### Radio Button
#### Blank State
```html_example
```
#### Success State
```html_example
```
#### Disabled State
```html_example
```
### Check box
#### Blank state
```html_example
```
#### Success state
```html_example
```
#### Disabled black state
```html_example
```
#### Disabled success state
```html_example
```
### Toggle Switch
#### Normal switch
```html_example
```
#### Special switch
```html_example
```
#### On/Off switch
```html_example
```
### Password field
#### Blank password field
```html_example
```
#### Password field (Hidden password mode)
```html_example
```
#### Password field (Shown password mode)
```html_example
```
#### Disabled blank password field
```html_example
```
#### Disabled password field (Hidden password mode)
```html_example
```
#### Disabled password field (Shown password mode)
```html_example
```
*/
/* Input */
input[type=text].crux-input {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #fff;
border: 1px solid #999999;
color: #000;
height: 60px;
padding: 0 10px;
width: 100%;
}
@media only screen and (max-width: 767px) {
input[type=text].crux-input {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
input[type=text].crux-input::placeholder {
color: #999999;
opacity: 1 !important;
}
input[type=text].crux-input.crux-disabled, input[type=text].crux-input[disabled] {
background-color: #f0f0f0;
color: #505050;
pointer-events: none;
}
input[type=text].crux-input.crux-disabled::placeholder, input[type=text].crux-input[disabled]::placeholder {
color: #505050;
}
div.crux-input-tooltip {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #f0f0f0;
border: solid 1px #dcdcdc;
line-height: 1.3em;
padding: 10px;
text-align: left;
width: 100%;
}
@media only screen and (max-width: 767px) {
div.crux-input-tooltip {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
color: #000;
font-weight: normal;
line-height: 1.3em;
}
}
div.crux-input-tooltip--white {
background-color: #fff;
border: solid 1px #dcdcdc;
}
.crux-input-with-button-container {
position: relative;
}
.crux-input-with-button-container input[type=text].crux-input {
padding-right: 50px;
}
.crux-input-with-button-container button.crux-input-inline-button {
background-color: #fff;
border: 0;
font-size: 20px;
height: 58px;
position: absolute;
right: 1px;
top: 1px;
width: 48px;
}
.crux-input-error {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.8rem;
color: #000;
font-weight: normal;
line-height: normal;
position: relative;
}
@media only screen and (max-width: 767px) {
.crux-input-error {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 18px;
font-size: 1.2857142857rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
.crux-input-error input[type=text].crux-input {
border: solid 2px #ec1c24;
color: #000;
padding-right: 60px;
}
.crux-input-error button.crux-input-inline-button {
display: none;
}
.crux-input-error .crux-input-error-message {
color: #ec1c24;
font-size: 20px;
line-height: 1.3;
margin: 5px 10px;
}
/*Textarea*/
.crux-textarea {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #fff;
border: 1px solid #999999;
color: #000;
min-height: 210px;
padding: 15px 10px;
resize: none;
width: 100%;
}
@media only screen and (max-width: 767px) {
.crux-textarea {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
.crux-textarea::placeholder {
color: #999999;
opacity: 1 !important;
}
.crux-textarea:focus {
outline: 0;
}
.crux-textarea--error {
border: solid 2px #ec1c24;
}
.crux-textarea + .crux-textarea-error-message {
color: #ed1d24;
font-size: 20px;
line-height: 1.3;
margin: 5px 10px;
}
/* Dropdown */
.crux-dropdown {
position: relative;
}
.crux-dropdown.crux-disabled {
color: #505050;
pointer-events: none;
}
.crux-dropdown.crux-disabled input, .crux-dropdown.crux-disabled button {
background-color: #f0f0f0;
color: #505050;
}
.crux-dropdown.crux-disabled input::placeholder, .crux-dropdown.crux-disabled button::placeholder {
color: #505050;
}
.crux-dropdown input {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #fff;
border: 1px solid #999999;
color: #000;
height: 60px;
padding: 0 48px 0 10px;
width: 100%;
}
@media only screen and (max-width: 767px) {
.crux-dropdown input {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
.crux-dropdown input::placeholder {
color: #999999;
opacity: 1 !important;
}
.crux-dropdown input:focus {
outline: none;
}
.crux-dropdown button {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #fff;
border: 0;
height: 56px;
margin-top: 2px;
position: absolute;
right: 1px;
top: 1px;
width: 48px;
}
@media only screen and (max-width: 767px) {
.crux-dropdown button {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.1428571429rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
.crux-dropdown button:focus {
outline: none;
}
.crux-dropdown ul {
background-color: #fff;
border-color: #999999;
border-style: solid;
border-width: 0 1px 1px 1px;
color: #000;
font-size: 22px;
list-style-type: none;
max-height: 380px;
overflow-y: auto;
padding: 10px 0;
width: 100%;
}
.crux-dropdown ul li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: normal;
cursor: pointer;
overflow-x: hidden;
padding: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
@media only screen and (max-width: 767px) {
.crux-dropdown ul li {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
.crux-dropdown ul li:hover {
background-color: #f0f0f0;
}
/* Radio Button*/
.crux-radio label {
cursor: pointer;
display: flex;
margin: 0;
padding: 5px 10px;
text-align: left;
}
.crux-radio label span.crux-radio-label {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: 20px;
margin: 2px 0 0 15px;
}
@media only screen and (max-width: 767px) {
.crux-radio label span.crux-radio-label {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: 20px;
}
}
.crux-radio input[type=radio] {
display: none;
}
.crux-radio input[type=radio] + span.crux-radio-button {
background-color: #fff;
border: 2px solid #999999;
border-radius: 100%;
display: block;
height: 23px;
position: relative;
width: 23px;
z-index: 5;
}
.crux-radio input[type=radio]:checked + span.crux-radio-button::before {
background-color: #00AE4D;
border-radius: 100%;
content: "";
display: block;
height: 13px;
left: 3px;
margin: auto;
position: absolute;
top: 3px;
width: 13px;
}
.crux-radio input:disabled + span.crux-radio-button {
background-color: #f0f0f0;
}
.crux-radio input:disabled + span.crux-radio-button span.crux-radio-label {
opacity: 0.5;
}
.crux-radio input:disabled:checked + span.crux-radio-button::before {
background-color: #999999;
}
/* Checkbox */
.crux-checkbox label {
cursor: pointer;
display: block;
margin: 0;
padding: 5px 10px;
text-align: left;
}
.crux-checkbox label span.crux-checkbox-label {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: 31px;
margin-left: 10px;
vertical-align: top;
}
@media only screen and (max-width: 767px) {
.crux-checkbox label span.crux-checkbox-label {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: 31px;
}
}
.crux-checkbox input[type=checkbox] {
display: none;
}
.crux-checkbox input[type=checkbox]:checked + span::before, .crux-checkbox input[type=checkbox] + span::before {
background-color: #fff;
border: solid 2px #999999;
color: #fff;
content: "m";
display: inline-block;
font-family: "crux-icons";
font-size: 14px;
height: 23px;
margin-top: 3px;
padding: 0 0 0 3px;
position: relative;
width: 23px;
}
.crux-checkbox input[type=checkbox]:checked + span::before {
background-color: #00AE4D;
border-color: #00AE4D;
}
.crux-checkbox input:disabled:checked + span .crux-checkbox-label, .crux-checkbox input:disabled + span .crux-checkbox-label {
color: #999999;
}
.crux-checkbox input:disabled:checked + span::before, .crux-checkbox input:disabled + span::before {
background-color: #f0f0f0;
border-color: #999999;
color: #f0f0f0;
}
.crux-checkbox input:disabled:checked + span::before {
color: #fff;
background-color: #999999;
}
/* Toggle Switch */
.crux-toggle-switch {
margin: 8px 0;
}
.crux-toggle-switch span {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #999999;
font-weight: normal;
line-height: normal;
}
@media only screen and (max-width: 767px) {
.crux-toggle-switch span {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #999999;
font-weight: normal;
line-height: normal;
}
}
.crux-toggle-switch span.crux-active {
color: #000;
}
.crux-toggle-switch.crux-toggle-switch--special label input:checked + span {
background-color: #00AE4D;
}
.crux-toggle-switch.crux-toggle-switch--special label span {
background-color: #00AE4D;
}
.crux-toggle-switch.crux-toggle-switch--on-off span {
color: #000;
}
.crux-toggle-switch.crux-toggle-switch--on-off label input:checked + span {
background-color: #00AE4D;
}
.crux-toggle-switch.crux-toggle-switch--on-off label span {
background-color: #999999;
}
.crux-toggle-switch.crux-disabled span, .crux-toggle-switch.crux-disabled span.active {
color: #999999;
}
.crux-toggle-switch label {
display: inline-block;
height: 29px;
margin-bottom: -6px;
margin-left: 10px;
margin-right: 10px;
position: relative;
width: 45px;
}
.crux-toggle-switch label input {
display: none;
}
.crux-toggle-switch label input:checked + span {
background-color: #000;
}
.crux-toggle-switch label input:focus + span {
box-shadow: 0 0 1px #2196f3;
}
.crux-toggle-switch label input:checked + span:before {
-ms-transform: translateX(16px);
-webkit-transform: translateX(16px);
transform: translateX(16px);
}
.crux-toggle-switch label input:disabled:checked + span, .crux-toggle-switch label input:disabled + span {
background-color: #999999;
}
.crux-toggle-switch label span {
-webkit-transition: 0.4s;
background-color: #000;
border-radius: 34px;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.crux-toggle-switch label span:before {
-webkit-transition: 0.4s;
background-color: #fff;
border-radius: 50%;
bottom: 2px;
content: "";
height: 25px;
left: 2px;
position: absolute;
transition: 0.4s;
width: 25px;
}
/* Password field */
input.crux-password {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 2.2rem;
color: #000;
font-weight: normal;
line-height: normal;
background-color: #fff;
border: 1px solid #999999;
color: #000;
height: 60px;
padding: 0 10px;
width: 100%;
}
@media only screen and (max-width: 767px) {
input.crux-password {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 22px;
font-size: 1.5714285714rem;
color: #000;
font-weight: normal;
line-height: normal;
}
}
input.crux-password:focus {
background-color: #fff;
color: #000;
border: 1px solid #999999;
}
input.crux-password::placeholder {
color: #999999;
opacity: 1 !important;
}
input.crux-password.crux-disabled, input.crux-password[disabled] {
background-color: #f0f0f0;
color: #505050;
pointer-events: none;
}
input.crux-password.crux-disabled::placeholder, input.crux-password[disabled]::placeholder {
color: #505050;
}
.crux-password-container {
position: relative;
}
.crux-password-container.crux-disabled {
background-color: #f0f0f0;
pointer-events: none;
}
.crux-password-container.crux-disabled button, .crux-password-container.crux-disabled input {
color: #999999;
}
.crux-password-container input {
padding-right: 72px;
}
.crux-password-container button {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1.4rem;
color: #000;
font-weight: bold;
line-height: normal;
background-color: #fff;
border: 0;
height: 58px;
padding: 10px;
position: absolute;
right: 1px;
text-align: right;
text-transform: uppercase;
top: 1px;
width: 70px;
}
@media only screen and (max-width: 767px) {
.crux-password-container button {
font-family: "Averta W01 Regular", Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 1rem;
color: #000;
font-weight: bold;
line-height: normal;
}
}
/*doc
---
title: Colors
name: _02_colors
category: main
---
## Colors Primary
The primary Consumer Reports colors are green and black.
````html_example
White: #FFFFFF;
Green: #00AE4D;
Black: #000;
````
The following classes exist as shortcuts for colors and can be used. Note you can also append `-bg` to the class to get the color as your background (as seen above).
`.crux-white` / `.crux-black` / `.crux-green`
## Colors Secondary
The five colors shown below are used within the ratings systems for both print and digital. These colors indicate a positive or negative attribute and should only be used in that context.
````html_example
Excellent
Very Good
Good
Fair
Poor
````
```html_example
Excellent: #00AE4D;
Very Good: #BFD730;
Good: #FFD500;
Fair: #F8941D;
Poor: #EC1C24;
```
## Digital Grayscale
```html_example
#000000;
#505050;
#999999;
#C8C8C8;
#DCDCDC;
#F0F0F0;
```
Additionally ```.crux-unrated``` and ```.crux-unrated-bg``` are alternate classnames for ```.crux-medium-gray``` and ```.crux-medium-gray-bg```, respectively.
```html_example
#C8C8C8;
```
To use a color for copy, use the classes above without the '-bg' applied. For instance:
```html_example
This is some red text.
```
*/
.crux-green, .crux-green a, .crux-green p, .crux-green i, .crux-green b, .crux-green span {
color: #00AE4D;
}
.crux-green a {
border-color: #00AE4D;
}
.crux-green-bg {
color: #fff;
background-color: #00AE4D;
}
.crux-black, .crux-black a, .crux-black p, .crux-black i, .crux-black b, .crux-black span {
color: #000;
}
.crux-black a {
border-color: #000;
}
.crux-black-bg {
color: #fff;
background-color: #000;
}
.crux-white, .crux-white a, .crux-white p, .crux-white i, .crux-white b, .crux-white span {
color: #fff;
}
.crux-white a {
border-color: #fff;
}
.crux-white-bg {
color: #000;
background-color: #fff;
}
.crux-color-excellent, .crux-color-excellent a, .crux-color-excellent p, .crux-color-excellent i, .crux-color-excellent b, .crux-color-excellent span {
color: #00AE4D;
}
.crux-color-excellent a {
border-color: #00AE4D;
}
.crux-color-excellent-bg {
color: #fff;
background-color: #00AE4D;
}
.crux-color-very-good, .crux-color-very-good a, .crux-color-very-good p, .crux-color-very-good i, .crux-color-very-good b, .crux-color-very-good span {
color: #bfd730;
}
.crux-color-very-good a {
border-color: #bfd730;
}
.crux-color-very-good-bg {
color: #fff;
background-color: #bfd730;
}
.crux-color-good, .crux-color-good a, .crux-color-good p, .crux-color-good i, .crux-color-good b, .crux-color-good span {
color: #ffd500;
}
.crux-color-good a {
border-color: #ffd500;
}
.crux-color-good-bg {
color: #fff;
background-color: #ffd500;
}
.crux-color-fair, .crux-color-fair a, .crux-color-fair p, .crux-color-fair i, .crux-color-fair b, .crux-color-fair span {
color: #f8941d;
}
.crux-color-fair a {
border-color: #f8941d;
}
.crux-color-fair-bg {
color: #fff;
background-color: #f8941d;
}
.crux-color-poor, .crux-color-poor a, .crux-color-poor p, .crux-color-poor i, .crux-color-poor b, .crux-color-poor span {
color: #ec1c24;
}
.crux-color-poor a {
border-color: #ec1c24;
}
.crux-color-poor-bg {
color: #fff;
background-color: #ec1c24;
}
.crux-dark-gray, .crux-dark-gray a, .crux-dark-gray p, .crux-dark-gray i, .crux-dark-gray b, .crux-dark-gray span {
color: #505050;
}
.crux-dark-gray a {
border-color: #505050;
}
.crux-dark-gray-bg {
color: #fff;
background-color: #505050;
}
.crux-primary-gray, .crux-primary-gray a, .crux-primary-gray p, .crux-primary-gray i, .crux-primary-gray b, .crux-primary-gray span {
color: #999999;
}
.crux-primary-gray a {
border-color: #999999;
}
.crux-primary-gray-bg {
color: #fff;
background-color: #999999;
}
.crux-medium-gray, .crux-medium-gray a, .crux-medium-gray p, .crux-medium-gray i, .crux-medium-gray b, .crux-medium-gray span, .crux-unrated, .crux-unrated a, .crux-unrated p, .crux-unrated i, .crux-unrated b, .crux-unrated span {
color: #c8c8c8;
}
.crux-medium-gray a, .crux-unrated a {
border-color: #c8c8c8;
}
.crux-medium-gray-bg, .crux-unrated-bg {
color: #fff;
background-color: #c8c8c8;
}
.crux-middle-gray, .crux-middle-gray a, .crux-middle-gray p, .crux-middle-gray i, .crux-middle-gray b, .crux-middle-gray span {
color: #dcdcdc;
}
.crux-middle-gray a {
border-color: #dcdcdc;
}
.crux-middle-gray-bg {
color: #fff;
background-color: #dcdcdc;
}
.crux-background-gray, .crux-background-gray a, .crux-background-gray p, .crux-background-gray i, .crux-background-gray b, .crux-background-gray span {
color: #f0f0f0;
}
.crux-background-gray a {
border-color: #f0f0f0;
}
.crux-background-gray-bg {
color: #000;
background-color: #f0f0f0;
}