@charset "UTF-8"; /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0.0 Beta 6 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://v2.designsystem.digital.gov/style-tokens ---------------------------------------- */ /* ---------------------------------------- Image Path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0.0 Beta 6 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://v2.designsystem.digital.gov/style-tokens/typography ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - global: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .eot, .ttf, .woff, and .woff2 ExampleSerif-Normal.eot ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 40ch 2: 60ch 3: 66ch 4: 72ch 5: 77ch none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0.0 Beta 6 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://v2.designsystem.digital.gov/style-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0.0 Beta 6 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://v2.designsystem.digital.gov/style-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0.0 Beta 6 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://v2.designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typography ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typography ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.7.0 ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ======================================== Functions ---------------------------------------- */ /* ======================================== General-purpose functions ---------------------------------------- */ /* ---------------------------------------- map-deep-get() ---------------------------------------- @author Hugo Giraudel @access public @param {Map} $map - Map @param {Arglist} $keys - Key chain @return {*} - Desired value ---------------------------------------- */ /* ---------------------------------------- strip-unit() ---------------------------------------- Remove the unit of a length @author Hugo Giraudel @param {Number} $number - Number to remove unit from @return {Number} - Unitless number ---------------------------------------- */ /* ---------------------------------------- multi-cat() ---------------------------------------- Concatenate two lists ---------------------------------------- */ /* ---------------------------------------- map-collect() ---------------------------------------- Collect multiple maps into a single large map source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe ---------------------------------------- */ /* ---------------------------------------- smart-quote() ---------------------------------------- Quotes strings Inspects `px`, `xs`, and `xl` numbers Leaves bools as is ---------------------------------------- */ /* ---------------------------------------- remove() ---------------------------------------- Remove a value from a list ---------------------------------------- */ /* ---------------------------------------- strunquote() ---------------------------------------- Unquote a string ---------------------------------------- */ /* ---------------------------------------- to-map() ---------------------------------------- Convert a single value to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- base-to-map() ---------------------------------------- Convert a single base to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- ns() ---------------------------------------- Add a namesspace of $type if that namespace is set to output ---------------------------------------- */ /* ---------------------------------------- de-list() ---------------------------------------- Transform a one-element list or arglist into that single element. ---------------------------------------- (1) => 1 ((1)) => (1) ---------------------------------------- */ /* ---------------------------------------- unpack() ---------------------------------------- Create lists of single items from lists of lists. ---------------------------------------- (1, (2.1, 2.2), 3) --> (1, 2.1, 2.2, 3) ---------------------------------------- */ /* ---------------------------------------- get-last() ---------------------------------------- Return the last item of a list, Return null if the value is null ---------------------------------------- */ /* ---------------------------------------- has-important() ---------------------------------------- Check to see if `!important` is being passed in a mixin's props ---------------------------------------- */ /* ---------------------------------------- append-important() ---------------------------------------- Append `!important` to a list ---------------------------------------- */ /* ---------------------------------------- spacing-multiple() ---------------------------------------- Converts a spacing unit multiple into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- rem-to-px() ---------------------------------------- Converts a value in rem to a value in px ---------------------------------------- */ /* ---------------------------------------- rem-to-user-em() ---------------------------------------- Converts a value in rem to a value in [user-settings] em for use in media queries ---------------------------------------- */ /* ---------------------------------------- validate-typeface-token() ---------------------------------------- Check to see if a typeface-token exists. Throw an error if a passed token does not exist in the typeface-token map. ---------------------------------------- */ /* ---------------------------------------- cap-height() ---------------------------------------- Get the cap height of a valid typeface ---------------------------------------- */ /* ---------------------------------------- px-to-rem() ---------------------------------------- Converts a value in px to a value in rem ---------------------------------------- */ /* ---------------------------------------- normalize-type-scale() ---------------------------------------- Normalizes a specific face's optical size to a set target ---------------------------------------- */ /* ---------------------------------------- utility-font() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- Not the public-facing function. Used for building the utilities and withholds certain errors. ---------------------------------------- */ /* ---------------------------------------- line-height() lh() ---------------------------------------- Get a normalized line-height from a family and a line-height scale unit ---------------------------------------- */ /* ---------------------------------------- convert-to-font-type() ---------------------------------------- Converts a font-role token into a font-type token. Leaves font-type tokens unchanged. ---------------------------------------- */ /* ---------------------------------------- get-font-stack() ---------------------------------------- Get a font stack from a style- or role-based font token. ---------------------------------------- */ /* ---------------------------------------- get-typeface-token() ---------------------------------------- Get a typeface token from a font-type or font-role token. ---------------------------------------- */ /* ---------------------------------------- get-system-color() ---------------------------------------- Derive a system color from its family, value, and vivid or a passed variable that is, itself, a list ---------------------------------------- */ /* ---------------------------------------- system-type-scale() ---------------------------------------- Get a value from the system type scale ---------------------------------------- */ /* ---------------------------------------- calc-gap-offset() ---------------------------------------- Calculate a valid uswds unit that is half the width of a given unit, for calculating gap offset in the layout grid. ---------------------------------------- */ /* ---------------------------------------- get-standard-values() ---------------------------------------- Gets a map of USWDS standard values for a property ---------------------------------------- */ /* ---------------------------------------- number-to-token() ---------------------------------------- Converts an integer or numeric value into a system value Ex: 0.5 --> '05' -1px --> 'neg-1px' ---------------------------------------- */ /* ---------------------------------------- columns() ---------------------------------------- outputs a grid-col number based on the number of desired columns in the 12-column grid Ex: columns(2) --> 6 grid-col(columns(2)) ---------------------------------------- */ /* ---------------------------------------- get-uswds-value() ---------------------------------------- Finds and outputs a value from the USWDS standard values. Used to build other standard utility functions and mixins. ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- advanced-color() ---------------------------------------- Derive a color from a color triplet: [family], [grade], [variant] ---------------------------------------- */ /* ---------------------------------------- units() ---------------------------------------- Converts a spacing unit into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- get-palettes() ---------------------------------------- Build a single map of plugin values from a list of plugin keys. ---------------------------------------- */ /* ---------------------------------------- border-radius() ---------------------------------------- Get a border-radius from the system border-radii ---------------------------------------- */ /* ---------------------------------------- font-weight() fw() ---------------------------------------- Get a font-weight value from the system font-weight ---------------------------------------- */ /* ---------------------------------------- feature() ---------------------------------------- Gets a valid USWDS font feature setting ---------------------------------------- */ /* ---------------------------------------- flex() ---------------------------------------- Gets a valid USWDS flex value ---------------------------------------- */ /* ---------------------------------------- font-family() family() ---------------------------------------- Get a font-family stack from a role-based or type-based font family ---------------------------------------- */ /* ---------------------------------------- letter-spacing() ls() ---------------------------------------- Get a letter-spacing value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- measure() ---------------------------------------- Gets a valid USWDS reading line length ---------------------------------------- */ /* ---------------------------------------- opacity() ---------------------------------------- Get an opacity from the system opacities ---------------------------------------- */ /* ---------------------------------------- order() ---------------------------------------- Get an order value from the system orders ---------------------------------------- */ /* ---------------------------------------- radius() ---------------------------------------- Get a border-radius value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- font-size() ---------------------------------------- Get type scale value from a [family] and [scale] ---------------------------------------- */ /* ---------------------------------------- z-index() z() ---------------------------------------- Get a z-index value from the system z-index ---------------------------------------- */ /* ======================================== core/units ---------------------------------------- The master palettes of - colors - whitespace - typescale ---------------------------------------- This file is not meant to be modified by USWDS project teams. Change your project values in project/uswds-project-settings ---------------------------------------- */ /* ---------------------------------------- Spacing grid multiplier ---------------------------------------- */ /* ---------------------------------------- Spacing grid ---------------------------------------- */ /* ---------------------------------------- Breakpoints ---------------------------------------- */ /* ---------------------------------------- Units ---------------------------------------- */ /* ---------------------------------------- Layout grid widths ---------------------------------------- */ /* ---------------------------------------- Font stacks ---------------------------------------- */ /* ---------------------------------------- Typeface ---------------------------------------- */ /* ---------------------------------------- Typescale ---------------------------------------- */ /* ---------------------------------------- Measure ---------------------------------------- */ /* ---------------------------------------- Line height ---------------------------------------- */ /* ---------------------------------------- Base cap height ---------------------------------------- 500px 'N' height measured in Sketch. Used for normalizing font sizes. Current normalized to Apple system fonts. ---------------------------------------- */ /* ---------------------------------------- Colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0 Variables Use for computed variables or any not meant to be set by system users directly. ---------------------------------------- */ /* ---------------------------------------- Touch target size ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Spacing ---------------------------------------- All spacing values that can be called by units() ---------------------------------------- */ /* ---------------------------------------- Project fonts ---------------------------------------- Collects font settings in a map for looping. ---------------------------------------- */ /* ---------------------------------------- Font stack ---------------------------------------- Compute the project font stack based on the project fonts and the font definition values set in core/_font-definitions ---------------------------------------- */ /* ---------------------------------------- Cap heights ---------------------------------------- Collect project cap heights ---------------------------------------- */ /* ---------------------------------------- Theme color map ---------------------------------------- */ /* ---------------------------------------- Theme color shortcodes ---------------------------------------- */ /* ---------------------------------------- Build the project type scale map ---------------------------------------- */ /* ---------------------------------------- Border-radius ---------------------------------------- */ /* ---------------------------------------- Column gaps ---------------------------------------- */ /* ---------------------------------------- Grid ---------------------------------------- */ /* ---------------------------------------- Aspect Ratios ---------------------------------------- */ /* ---------------------------------------- USWDS Properties ---------------------------------------- */ /* ---------------------------------------- family() ---------------------------------------- Get a font-family stack ---------------------------------------- */ /* ---------------------------------------- size() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- font() ---------------------------------------- Get a font-family stack AND Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- typeset() ---------------------------------------- Sets: - family - size - line-height ---------------------------------------- */ /* stylelint-disable max-nesting-depth */ /* ---------------------------------------- @render-pseudoclass ---------------------------------------- Build a pseucoclass utiliy from values calculated in the @render-utilities-in loop ---------------------------------------- */ /* ---------------------------------------- @render-utility ---------------------------------------- Build a utility from values calculated in the @render-utilities-in loop ---------------------------------------- TODO: Determine the proper use of unquote() in the following. Changed to account for a 'interpolation near operators will be simplified in a future version of Sass' warning. ---------------------------------------- */ /* ---------------------------------------- @render-utilities-in ---------------------------------------- The master loop that sets the building blocks of utilities from the values in individual rule settings and loops through all possible variants ---------------------------------------- */ /* stylelint-enable */ /* deprecated.scss --- Occasionally the design system will deprecate old variables or functionality. If we replace the old functionality with something new, this is a place to connect the old functionality to the new functionality, in the service of better continuity and backwards compatibility within a major release cycle. Note the USWDS version where we deprecated the old functionality in a comment. Be sure to update notifications.scss. This file should started fresh at each major version. */ /* notifications.scss --- Adds a notification at the top of each USWDS compile. Use this file for important notifications and updates to the design system. This file should started fresh at each major version. */ /* prettier-ignore */ /* prettier-ignore */ html { height: 100vh; } /** * Collections! */ .usa-collection__body { padding-left: 1rem; padding-right: 4rem; } .usa-collection__meta-item { text-transform: uppercase; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; } .usa-collection__heading { font-size: 2em; margin: 0.5em 0; line-height: 1.2; font-weight: 300; } .usa-collection__heading a { text-decoration: none; color: black; } .usa-collection__heading a:hover, .usa-collection__heading a:focus { text-decoration: underline; } .usa-collection__heading.text-white a { color: white; } .usa-collection__description { margin: 0; } html { height: 100vh; } /** * Collections! */ .usa-collection__body { padding-left: 1rem; padding-right: 4rem; } .usa-collection__meta-item { text-transform: uppercase; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; } .usa-collection__heading { font-size: 2em; margin: 0.5em 0; line-height: 1.2; font-weight: 300; } .usa-collection__heading a { text-decoration: none; color: black; } .usa-collection__heading a:hover, .usa-collection__heading a:focus { text-decoration: underline; } .usa-collection__heading.text-white a { color: white; } .usa-collection__description { margin: 0; } .usa-grid-container { margin-left: auto; margin-right: auto; max-width: 75rem; padding-left: 1rem; padding-right: 1rem; } @media all and (min-width: 75em) { .usa-grid-container { padding-left: 2rem; padding-right: 2rem; } } .usa-grid-row { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } @media all and (min-width: 40em) { .usa-grid-row { margin-left: -0.5rem; margin-right: -0.5rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .usa-grid-row > * { padding-left: 0.5rem; padding-right: 0.5rem; } } .usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; width: 100%; } @media all and (min-width: 40em) { .usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } } .default-container { background-color: #fcfcfc; } html, body { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; height: auto; color: rgba(0, 0, 0, 0.8); } .usa-center { text-align: center; } .usa-prose site-prose { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } h2 { font-size: 2.25em; } h1, h2, h3 { scroll-margin-top: 5rem; } .sticky { position: -webkit-sticky; position: sticky; top: 0; } .sticky::before, .sticky::after { content: ""; display: table; } .site-header { background-color: #121923; } @media all and (min-width: 64em) { .site-header { border-bottom: none; } } .site-header .site-logo { margin-left: 1rem; } @media all and (min-width: 64em) { .site-header .site-logo { display: initial; float: left; margin-bottom: 0; margin-left: 2rem; } } @media all and (min-width: 64em) { .site-header .site-logo .usa-logo__text { display: initial; letter-spacing: -0.01em; } } .site-header .usa-button-list { display: none; margin-top: -0.25rem; } @media all and (min-width: 64em) { .site-header .usa-button-list { float: right; line-height: 5rem; margin-top: 0; display: block; padding-right: 2rem; } } .site-header .usa-button-list li { display: inline; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; } .site-header .usa-button-list li:last-child .usa-button { margin-right: 0; } .site-header .usa-button-list .usa-button { margin-bottom: 0; margin-top: 0; } @media all and (min-width: 64em) { .navbar__search .usa-input { background-color: #13171f; color: white; height: 39px; } } @media all and (min-width: 64em) { .navbar__search .usa-button { height: 39px; } } .site-banner { background-color: #f8fafd; color: #1a4480; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .site-banner .usa-banner__inner { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } .site-banner .usa-banner__button { color: #adadad; } .site-banner .usa-banner__button:hover { color: white; } .site-banner .usa-banner__header-text { color: #1a4480; } .site-banner .usa-banner__header-action { color: #adadad; } .site-header-navbar { border-bottom: #adadad; } @media all and (min-width: 64em) { .site-header-navbar { height: 5rem; width: 100%; display: block; } } @-moz-document url-prefix() { @media all and (min-width: 64em) { .site-header-navbar { padding-top: 1px; } } } .site-header-navbar .get-involved { display: none; } @media all and (min-width: 64em) { .site-header-navbar .get-involved { display: inline-block; position: absolute; right: 0; margin-top: -1px; } } .sidenav-mobile .usa-button.usa-button--outline-inverse { -webkit-box-shadow: inset 0 0 0 2px #4a77b4; box-shadow: inset 0 0 0 2px #4a77b4; color: #4a77b4; } .sidenav-mobile .usa-button.usa-button--outline-inverse:hover { -webkit-box-shadow: inset 0 0 0 "px" #2f4668; box-shadow: inset 0 0 0 "px" #2f4668; color: #2f4668; } @media all and (min-width: 64em) { .sidenav-mobile { display: none; } } .sidenav-mobile .usa-button-list { margin-top: 2rem; } .sidenav-mobile .usa-button { margin-top: 0.5rem; } .site-logo .logo-image-mobile { max-width: 150px; } .site-logo.logo-image-desktop { display: none; width: 300px; } @media all and (min-width: 64em) { .site-logo.logo-image-mobile { display: none; } .site-logo.logo-image-desktop { display: block; } } @media all and (min-width: 64em) { .site-logo { margin-top: 2px; } } .site-logo a { color: rgba(0, 0, 0, 0.8); } .site-logo .logo-image { vertical-align: middle; } .site-logo .usa-logo__text { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 2.5rem; } .site-logo .usa-logo__text::before { height: 1.5rem; width: 1.5rem; content: ""; display: inline-block; margin-left: -2px; margin-right: 0.25rem; position: relative; top: -1px; vertical-align: middle; } @media all and (min-width: 64em) { .site-logo .usa-logo__text::before { height: 1.5rem; width: 1.5rem; } } @media all and (min-width: 64em) { .site-logo .usa-logo__text { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1; line-height: 4.5rem; } } .site-nav-secondary { display: none; } @media all and (min-width: 64em) { .site-nav-secondary.page-our-process { background-color: white; border-bottom: 2px solid rgba(0, 0, 0, 0.1); clear: both; display: block; height: 3rem; padding-left: 1rem; z-index: 100; } } .site-nav-secondary.page-our-process.sticky { top: 5rem; position: -webkit-sticky !important; } .site-nav-secondary.page-our-process ul { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .site-nav-secondary.page-our-process ul > li { margin-bottom: 0; max-width: unset; } .site-nav-secondary.page-our-process ul li { display: inline; } .site-nav-secondary.page-our-process a { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1; color: #757575; display: inline-block; font-weight: normal; height: 3rem; padding: 1rem; position: relative; text-decoration: none; } .site-nav-secondary.page-our-process a:hover { position: relative; color: #2672de; } .site-nav-secondary.page-our-process a:hover::after { background-color: #2672de; border-radius: 0; content: ""; display: block; position: absolute; height: 0.25rem; left: 1rem; right: 1rem; bottom: 0; } .site-nav-secondary.page-our-process a:active { position: relative; color: #2672de; } .site-nav-secondary.page-our-process a:active::after { background-color: #2672de; border-radius: 0; content: ""; display: block; position: absolute; height: 0.25rem; left: 1rem; right: 1rem; bottom: 0; } .site-nav-secondary.page-our-process.usa-current { position: relative; color: rgba(0, 0, 0, 0.8); font-weight: bold; } .site-nav-secondary.page-our-process.usa-current::after { background-color: #2672de; border-radius: 0; content: ""; display: block; position: absolute; height: 0.25rem; left: 1rem; right: 1rem; bottom: 0; } .site-nav-secondary.page-our-process.usa-current:hover { color: rgba(0, 0, 0, 0.8); } .site-sidenav.usa-sidenav { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.4; background-color: white; border: 2px solid rgba(0, 0, 0, 0.1); border-radius: 0.25rem; padding: 0; } .site-sidenav.usa-sidenav a { padding-left: 1rem; padding-right: 1rem; color: #28303b; } .site-sidenav.usa-sidenav a:hover { background-color: transparent; color: #2672de; } .site-sidenav.usa-sidenav .usa-current { color: #28303b; position: static; } .site-sidenav.usa-sidenav .usa-current::after { border-radius: 0; bottom: 0; background-color: #2672de; bottom: -1px; left: -2px; top: 0; z-index: 100; } .site-sidenav.usa-sidenav .usa-sidenav__item:first-child .usa-current::after { border-top-left-radius: 0.25rem; top: -2px; } .site-sidenav.usa-sidenav .usa-sidenav__item:last-child .usa-current::after { border-bottom-left-radius: 0.25rem; bottom: -2px; } .site-sidenav.usa-sidenav .usa-sidenav__item { border-top: none; line-height: 1.4; position: relative; } .site-sidenav.usa-sidenav .usa-sidenav__item + .usa-sidenav__item a { border-top: 1px solid rgba(0, 0, 0, 0.05); } .site-sidenav.usa-sidenav .usa-sidenav__item.is-current { background-color: #fcfcfc; } .site-sidenav.usa-sidenav .usa-sidenav__item.is-current .is-current { background-color: transparent; } .site-sidenav.usa-sidenav .usa-sidenav__sublist { font-size: 0.81rem; } .site-sidenav.usa-sidenav .usa-sidenav__sublist a { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-left: 1rem; } .site-sidenav.usa-sidenav .usa-sidenav__sublist .usa-current { color: #2672de; } .site-sidenav.usa-sidenav .usa-sidenav__sublist .usa-sidenav__sublist a { padding-left: 2rem; } .sidenav { display: none; position: -webkit-sticky; position: sticky; top: 150px; left: 100px; } @media all and (min-width: 64em) { .sidenav { display: block; float: left; margin-bottom: 3rem; margin-top: 2rem; padding-right: 0; width: 15rem; } } .sidenav .usa-navigation-submenu[aria-hidden=false] { display: block; } .main-content { position: absolute; right: 0; position: absolute; bottom: 0; display: inline-block; margin-top: 2.5rem; position: relative; width: 100%; } @media all and (min-width: 64em) { .main-content { width: calc(100% - 15rem); } } .lt-ie9 .main-content { width: 75%; } #main-content .usa-accordion__button { line-height: 1; } .site-h2, .styleguide-content > h2 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.75rem; line-height: 1.2; color: rgba(0, 0, 0, 0.8); margin-top: 2rem; } .site-h2 + p, .styleguide-content > h2 + p { margin-top: 0.75rem; } .interior-hero { background-color: #004280; color: #ffffff; position: relative; z-index: 5; padding-top: 5rem; } .interior-hero__bg { background-size: cover; background-repeat: no-repeat; padding: 0 4.5rem; border-radius: 10px; } .interior-hero__callout { color: #ffffff; } .interior-hero__heading { font-weight: 700; color: #ffffff; margin-bottom: 0; margin-top: 2rem; } .interior-hero__title { font-size: 11; font-weight: 700; color: #ffffff; margin-bottom: 0; margin-top: 2rem; } .tag-header-dark { padding: 0.5rem; background-color: #121923; color: white; margin-top: -19px; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; width: 140px; text-align: center; } .tag-header { padding: 0.5rem; background-color: #0048ad; color: white; margin-top: -19px; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; width: 130px; text-align: center; } .tag-subheader { padding: 0.5rem; background-color: #0048ad; color: white; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; width: 130px; text-align: center; } .vertical-line-light { border-left: 1px solid white; position: relative; height: 3.5rem; left: 50%; top: 0; } .vertical-line { border-left: 1px solid; position: relative; height: 3.5rem; left: 50%; top: 0; } @media all and (min-width: 64em) { .circuit-banner { display: block; } } /* Re-style usa banner */ .usa-accordion { margin: 0; list-style-type: none; opacity: 0.75; padding: 4px 0; width: 100%; } .usa-banner__header-text { font-size: 11px; font-weight: 500; } .usa-banner__button-text { color: #1a4480; } .usa-button__primary-dark { margin-top: 1.5rem; border: none; border-radius: none; text-transform: uppercase; padding: 1rem 2.5rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: #121923; color: white; } .usa-button__primary-dark a { text-decoration: none; color: white; } .usa-button__primary-dark a:hover { text-decoration: underline; } .usa-button__primary-dark:hover { cursor: pointer; } .usa-button__primary-red { margin-top: 1.5rem; border: none; border-radius: none; text-transform: uppercase; padding: 1rem 2.5rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: #ce482d; color: white; } .usa-button__primary-red a { text-decoration: none; color: white; } .usa-button__primary-red a:hover { text-decoration: underline; } .usa-button__primary-red:hover { cursor: pointer; } .usa-button__secondary-white { margin-top: 1.5rem; border: 1px solid white; border-radius: none; text-transform: uppercase; padding: 1rem 2.5rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: transparent; color: white; } .usa-button__secondary-white a { text-decoration: none; color: white; } .usa-button__secondary-white a:hover { text-decoration: underline; } .usa-button__secondary-white:hover { cursor: pointer; } .usa-button__secondary-gray { margin-top: 1.5rem; border: 1px solid #545e6a; border-radius: none; text-transform: uppercase; padding: 1rem 2.5rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: transparent; color: #545e6a; } .usa-button__secondary-gray a { text-decoration: none; color: black; } .usa-button__secondary-gray a:hover, .usa-button__secondary-gray a:focus { text-decoration: underline; } .usa-button__secondary-gray:hover { cursor: pointer; } .usa-button__secondary-dark { margin-top: 1.5rem; border: 1px solid #121923; text-transform: uppercase; padding: 1rem 2rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: transparent; color: #121923; } .usa-button__secondary-dark:hover { color: #545e6a; text-decoration: underline; } .usa-button__secondary-dark:hover { cursor: pointer; } .usa-button__secondary-red { margin-top: 1.5rem; border: 0; text-transform: uppercase; padding: 1rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: transparent; color: #ce482d; } .usa-button__secondary-red:hover { color: #545e6a; text-decoration: underline; } .usa-button__secondary-red:hover { cursor: pointer; } .border-stars { margin-top: -3.5rem; margin-bottom: 3.5rem; } .clickable-card:hover { cursor: pointer; } @media all and (min-width: 64em) { .product-card-modal-image { margin-left: 30rem !important; } } @media all and (min-width: 64em) { .product-card-modal-text { margin-left: 50% !important; } } @media all and (min-width: 20em) { .data-kit { padding: 5rem; margin-bottom: -1rem; } } .data-kit .data-kit__container { position: relative; } @media all and (min-width: 20em) { .data-kit .data-kit__container { margin-bottom: 12rem; } } .data-kit .data-kit__container .data-kit__card { width: 90%; position: relative; background-size: cover; background-repeat: no-repeat; z-index: 4; padding: 9rem 3.5rem 3.5rem 3.5rem; border-radius: 10px; cursor: default; } .data-kit .data-kit__container .data-kit__card h2 { margin-top: 0; margin-bottom: 0; font-size: 1.86rem; font-weight: 700; line-height: 1.5; color: white; } .data-kit .data-kit__container .data-kit__card p { font-size: 1.06rem; color: white; line-height: 1.4; margin-bottom: 2rem; } .data-kit .data-kit__container .data-kit__card .data-kit__arrow { float: right; z-index: 10; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .data-kit .data-kit__container .data-kit__card h2, .data-kit .data-kit__container .data-kit__card p, .data-kit .data-kit__container .data-kit__card .data-kit__arrow { position: relative; z-index: 5; } .data-kit .data-kit__container .data-kit__card::after { -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease; content: " "; z-index: 5; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; border-radius: 10px; background: RGB(19, 25, 47, 0.6); } .data-kit .data-kit__container .data-kit__active { -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 400ms ease; cursor: pointer; } .data-kit .data-kit__container .data-kit__active:hover { -webkit-transform: translate(-5px, -10px); transform: translate(-5px, -10px); } .data-kit .data-kit__container .data-kit__active:hover .data-kit__arrow { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } .data-kit .data-kit__container .data-kit__active:hover::after { opacity: 0.65; } .data-kit .data-kit__container .data-kit__bg { height: 30rem; background-color: #13192F; position: absolute; z-index: 1; border-radius: 10px; top: 1.5rem; left: 1.5rem; width: 90%; } .data-kit .data-kit__container .data-kit__upcoming { text-transform: uppercase; font-size: 0.93rem; color: #13192F; font-weight: 600; letter-spacing: 0.8px; padding: 0.5rem 0.8rem; background-color: #F7C636; border-radius: 4px; position: absolute; bottom: 2rem; right: 2rem; } .data-kit .data-kit__container .data-kit__stats { color: #1a4480; font-weight: 400; letter-spacing: 0.8px; padding: 0.5rem 0.8rem; background-color: white; border-radius: 4px; position: absolute; bottom: 2rem; right: 2rem; } .data-kit .data-kit__container .data-kit__stats .data-kit__icon-items { display: inline-block; margin-right: 0.5rem; vertical-align: middle; } .data-kit .data-kit__container .data-kit__stats p { display: inline-block; margin: 0; font-size: 1.4rem; line-height: 1.4rem; vertical-align: middle; } .data-kit__button { text-decoration: none; } .data-kit__suggest { -webkit-transition: all 400ms ease; transition: all 400ms ease; border-radius: 10px; width: 100%; text-align: center; padding: 12em 0; } @media all and (min-width: 20em) { .data-kit__suggest { width: 100%; } } .data-kit__suggest .data-kit__icon-suggestion { opacity: 0.8; } .data-kit__suggest p { color: white; font-weight: 600; font-size: 1.33rem; opacity: 0.8; } .data-kit__suggest:hover .data-kit__icon-suggestion, .data-kit__suggest:hover p { opacity: 1; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-transform: translateX(5px); transform: translateX(5px); } 60% { -webkit-transform: translateX(2px); transform: translateX(2px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 40% { -webkit-transform: translateX(5px); transform: translateX(5px); } 60% { -webkit-transform: translateX(2px); transform: translateX(2px); } } .data-source__button { background-color: transparent; border: none; } .data-source__button:hover .data-source p { border-bottom-style: solid; } .data-source p { font-weight: 500; color: white; font-size: 1.06rem; line-height: 30px; border-bottom: 1.5px dotted; -webkit-transition: border-bottom 400ms ease; transition: border-bottom 400ms ease; } .dkh-modal { width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: black; /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ background: RGB(19, 25, 47, 0.9); display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 99999; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; -webkit-animation-name: show; animation-name: show; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 400ms; animation-duration: 400ms; } .dkh-modal--hidden { display: none; } .dkh-modal__contents { position: fixed; width: 53rem; height: 60rem; top: 50%; left: 50%; margin-top: -30rem; /* Negative half of height. */ margin-left: -27rem; background-color: #004280; padding: 2rem 4rem; color: white; } .dkh-modal__contents h3 { font-weight: 700; font-size: 1.33rem; margin-bottom: 1.5rem; margin-top: 8rem; } .dkh-modal__contents-p { font-weight: 400; font-size: 1.06rem; } .dkh-modal__contents-p a { text-decoration: none; font-weight: 500; color: white; -webkit-transition: font-style 400ms ease; transition: font-style 400ms ease; text-decoration: underline; } .dkh-modal__contents-p a:visited { color: inherit; } .dkh-modal__contents-p a:hover { font-weight: 600; } .dkh-modal__contents-close { font-size: 1rem; background-color: #004280; border: none; border-bottom: 1.5px dotted #F7C636; padding: 0 0 0.4rem 0; text-align: center; font-weight: 600; display: block; margin: 3rem auto; color: white; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .dkh-modal__contents-close:hover { cursor: pointer; border-bottom-style: solid; } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .topics { background-color: #004280; position: relative; top: -10rem; margin-bottom: -13.2rem; } .topics__container { padding-top: 10rem; } .topics__row { margin: 3rem auto; padding-bottom: 3rem; border-bottom: 5px solid #F7C636; } .topics__card { background-color: #1a4480; padding: 2.5rem 2rem; border-radius: 4px; margin-right: 1.5rem; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1.5px solid #1a4480; -webkit-transition: border 400ms ease; transition: border 400ms ease; } .topics__card p { font-size: 0.93rem; font-weight: 400; color: white; } .topics__card:hover { cursor: pointer; border: 1.5px solid #F7C636; } .topics__card--active { border: 1.5px solid #F7C636; } .challenge { background-color: #004280; margin-bottom: -0.2rem; } .challenge__container { padding: 3.5rem 0; display: none; } .challenge__container--show { display: block; opacity: 0; -webkit-animation-name: show; animation-name: show; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; } .challenge__image { display: inline-block; max-height: 165px; border-radius: 4px; } .challenge__text { display: inline-block; color: white; font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; vertical-align: top; margin-left: 3rem; } .challenge__text-caption { font-size: 0.93rem; text-transform: uppercase; letter-spacing: 1px; color: #F7C636; font-weight: 600; margin: 0; } .challenge__text-title { font-size: 0.87rem; font-weight: 600; margin: 1rem 0; } .challenge__text-description { font-size: 0.93rem; font-weight: 400; margin: 0; } .challenge__text-link { font-size: 0.93rem; font-weight: 400; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .challenge__text-link a { color: white; -webkit-text-decoration: #F7C636 dotted underline; text-decoration: #F7C636 dotted underline; -webkit-text-underline-position: under; text-underline-position: under; } .challenge__text-link a:hover { -webkit-text-decoration-style: solid; text-decoration-style: solid; } .challenge__text-description-mobile { display: none; font-size: 0.93rem; font-weight: 400; color: white; margin: 0; } .challenge__text-link-mobile { display: none; font-size: 0.93rem; font-weight: 400; -webkit-transition: all 400ms ease; transition: all 400ms ease; } .challenge__text-link-mobile a { color: white; -webkit-text-decoration: #F7C636 dotted underline; text-decoration: #F7C636 dotted underline; -webkit-text-underline-position: under; text-underline-position: under; } .external-link-white .external-link { display: none; } .datasets__card { background-color: #004280; border: #121923; border-radius: 10px; color: white; font-size: 0.93rem; -webkit-transition: border 400ms ease; transition: border 400ms ease; } .datasets__card a { text-decoration: none; color: white; } .datasets__card a[href^=http]:not([href*=".gov"])::after { display: none; } .datasets__card .external-link { display: none; } .datasets__card .listed-link:hover { text-decoration: underline; } .datasets__card:hover { -webkit-transition: all 400ms ease; transition: all 400ms ease; border: 2px solid #F7C636; } .datasets__card:hover .external-link { display: block; float: right; margin: 1rem; } .toolkit-hero-image { display: inline; } @media all and (min-width: 64em) { .toolkit-hero-image { margin-left: -50px; } } .toolkit-colored-div { width: 110vw; margin-left: calc(-55vw + 55%); } .toolkit-resources { box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } .toolkit-resources .toolkit-resource-link { color: #000000; } .toolkit-resources .toolkit-resource-link::before { height: 1rem; width: 1rem; background: url("../img/icons/arrow-up-right.png") no-repeat 0 0; background-size: 100%; content: ""; display: inline-block; margin-top: 2px; margin-right: 0.75rem; text-decoration: none; } .toolkit-resources .toolkit-resource-link[href^=http]:not([href*=".gov"])::after { display: none; } .toolkit-resources .toolkit-resource-link:hover { cursor: pointer; } .toolkit-highlight { color: #adadad; font-style: italic; border-left: 2px solid #adadad; margin-left: 3rem; padding-left: 1rem; margin-top: 0; } .toolkit-checkmark { list-style-image: url("../img/icons/check.png"); } .toolkit-checkmark .nested-bullet { margin-left: 2.5rem; list-style-image: circle !important; } .toolkit-table { width: 100%; -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4); } .toolkit-table th { border: none; font-weight: bold; padding-left: 0; } .toolkit-table td.col-1 { border: 1px solid #e6e6e6; text-align: left; padding: 6px; } .toolkit-table td.col-2 { border: 1px solid #e6e6e6; text-align: center; } .toolkit-table td.col-3 { border: 1px solid #ffffff; text-align: left; padding: 6px; } .styleguide-content { padding-left: 1rem; padding-right: 1rem; margin-bottom: 3rem; max-width: 75rem; overflow: hidden; position: relative; } @media all and (min-width: 75em) { .styleguide-content { padding-left: 2rem; padding-right: 2rem; } } .styleguide-content header + p { margin-top: 0.75rem; } .styleguide-content > h3 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.06rem; line-height: 1.4; } .styleguide-content > h3 + p { margin-top: 0.5rem; } .styleguide-content > h4 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.4; text-transform: uppercase; color: rgba(0, 0, 0, 0.8); font-weight: normal; letter-spacing: 0.1em; margin-top: 1.5rem; } .styleguide-content > h4 + p, .styleguide-content > h4 + ol, .styleguide-content > h4 + ul { margin-top: 0.5rem; } .styleguide-content > h5 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.4; color: rgba(0, 0, 0, 0.8); font-weight: bold; margin-top: 1rem; } .styleguide-content > h5 + p, .styleguide-content > h5 + ol, .styleguide-content > h5 + ul { border-top: 1px solid #e6e6e6; padding-top: 0.5rem; margin-top: 0.25rem; } .product-roadmap-list li { max-width: 100%; } .label-recommended, .label-done, .label-upcoming, .label-beta, .label-next, .label-alpha, .label-in-progress { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.5; color: #1b1b1b; font-weight: bold; margin-left: 0.75rem; position: absolute; text-decoration: none; } [href^=http].label-recommended:not([href*=".gov"])::after, [href^=http].label-done:not([href*=".gov"])::after, [href^=http].label-upcoming:not([href*=".gov"])::after, [href^=http].label-beta:not([href*=".gov"])::after, [href^=http].label-next:not([href*=".gov"])::after, [href^=http].label-alpha:not([href*=".gov"])::after, [href^=http].label-in-progress:not([href*=".gov"])::after { display: none; } .label-alpha, .label-in-progress { background-color: #ffbe2e; } .label-beta, .label-next { background-color: #004280; color: white; } .label-upcoming { letter-spacing: 0.025em; font-weight: normal; border-color: #adadad; border-width: 1px; border-style: solid; background-color: transparent; } .label-recommended, .label-done { background-color: #ecf3ec; } .heading-margin-alt { margin-top: 3.5rem; } .site-subheading { margin-bottom: 0; margin-top: 0; clear: both; font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 0.87rem; line-height: 1.1; font-weight: normal; letter-spacing: 0.025em; text-transform: uppercase; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.81rem; color: rgba(0, 0, 0, 0.6); letter-spacing: 0.025em; margin-bottom: 0.5rem; margin-top: 0; } * + .site-subheading { margin-top: 1.5em; } .site-subheading + * { margin-top: 1em; } .cta img { height: 1rem; margin-right: 0.25rem; position: relative; top: 2px; vertical-align: baseline; } .site-footer { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; clear: both; } .site-footer h3 { margin-top: 0; } .site-footer .logo-links { margin-bottom: 0.5rem; margin-right: 1.25rem; } @media all and (min-width: 40em) { .site-footer .logo-links { float: left; margin-bottom: 0; } } .site-footer .logo-links img { width: 2rem; } .site-footer .logo-links a { display: inline-block; line-height: 0; } .site-footer .usa-footer__secondary-section { padding-bottom: 0; padding-top: 1rem; background-color: #f3f3f4; } @media all and (min-width: 40em) { .site-footer .usa-footer__secondary-section { padding-top: 2rem; } } .footer-main-img { display: none; max-width: 10rem; } @media all and (min-width: 40em) { .footer-main-img { display: block; margin: 0; width: 100%; } } .footer-content { margin-bottom: 2.5rem; } .footer-content h3 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.2; margin: 0; } .footer-content p { max-width: 72ex; } .footer-contact-links { margin-left: -0.5rem; margin-right: -0.5rem; } .footer-contact-links > * { padding-left: 0.5rem; padding-right: 0.5rem; } .footer-contact-links h4, .footer-contact-links a { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; } .footer-contact-links h4 { font-weight: normal; margin-bottom: 0; margin-top: 2px; } .footer-contact-links a { color: #2f4668; } .footer-contact-links img { width: 2.5rem; } .footer-contact-links .usa-media-block { clear: both; line-height: 1.4; margin-top: 1.25rem; } @media all and (min-width: 40em) { .footer-contact-links .usa-media-block { margin-top: 0; } } @media all and (min-width: 40em) { .footer-contact-links { margin-top: 2rem; } } .footer-section-bottom { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); width: 90%; margin: 0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .preview { margin-bottom: 1rem; margin-top: 1rem; background-color: white; padding: 1rem; border: 1px solid #f3f3f4; } .preview::after { clear: both; content: ""; display: block; } .preview .usa-dark-background { padding-left: 0.5rem; padding-right: 0.5rem; display: inline-block; } .preview > *:first-child { margin-top: 0; } .preview-no_border { border: 0; margin-bottom: 1.25rem; margin-top: 0; padding: 0; } .preview-lists .usa-heading-alt { margin-top: 0; } .preview-dropdown { padding-top: 0; } .page-grids .preview { border: 0; margin-bottom: 1.25rem; margin-top: 0; padding: 0; } .page-grids .preview > *:first-child { margin-top: 1rem; } .grid-example .usa-grid { background: #d9e8f6; } .grid-example .usa-grid > * { margin-bottom: 0.25rem; margin-top: 0.25rem; color: white; padding: 0.5rem; background: #1a4480; } @media all and (min-width: 40em) { .grid-example .usa-width-one-twelfth { padding-left: 0; padding-right: 0; } } .grid-example-blank .usa-grid { text-align: center; } .grid-text .usa-grid { background: #1a4480; } .grid-text .usa-grid > * { background: #d9e8f6; color: black; } .grid-text .usa-grid h3 { margin-top: 0; } .grid-text .usa-grid p { margin-bottom: 0; } h3 + .button_wrapper { margin-top: -0.25rem; } .button_wrapper { clear: both; display: block; margin-left: -0.5rem; padding: 0 0.5rem; } @media all and (min-width: 30em) { .button_wrapper { display: table; } } .button_wrapper button:last-child { margin-right: 0; } .button_wrapper-dark { background: #28303b; } .usa-heading { color: #2f4668; } .usa-color-primary { background-color: #4a77b4; } .usa-color-primary-darker { background-color: #2f4668; } .usa-color-primary-darkest { background-color: #252f3e; } .usa-color-base { background-color: #121923; } .usa-color-gray-dark { background-color: #28303b; } .usa-color-gray-light { background-color: #adadad; } .usa-color-white { background-color: white; -webkit-box-shadow: inset 0 0 0 1px #565c65; box-shadow: inset 0 0 0 1px #565c65; } .usa-color-primary-alt { background-color: #4132f7; } .usa-color-primary-alt-dark { background-color: #28a0cb; } .usa-color-primary-alt-darkest { background-color: #07648d; } .usa-color-primary-alt-light { background-color: #97d4ea; } .usa-color-primary-alt-lightest { background-color: #e1f3f8; } .usa-color-secondary { background-color: #ce482d; } .usa-color-secondary-dark { background-color: #b50909; } .usa-color-secondary-darkest { background-color: #8b0a03; } .usa-color-secondary-light { background-color: #f2938c; } .usa-color-secondary-lightest { background-color: #f3e1e4; } .usa-color-gray { background-color: #565c65; } .usa-color-gray-lighter { background-color: #dfe1e2; } .usa-color-gray-lightest { background-color: #edeff0; } .usa-color-gray-warm-dark { background-color: #454540; } .usa-color-gray-warm-light { background-color: #e6e6e2; } .usa-color-gray-cool-light { background-color: #ecf1f7; } .usa-color-gold { background-color: #ffbe2e; } .usa-color-gold-light { background-color: #ffe396; } .usa-color-gold-lighter { background-color: #f5e6af; } .usa-color-gold-lightest { background-color: #fef0c8; } .usa-color-green { background-color: #4d8055; } .usa-color-green-light { background-color: #5e9f69; } .usa-color-green-lighter { background-color: #b4d0b9; } .usa-color-green-lightest { background-color: #ecf3ec; } .usa-color-cool-blue { background-color: #0b4778; } .usa-color-cool-blue-light { background-color: #4a77b4; } .usa-color-cool-blue-lighter { background-color: #98afd2; } .usa-color-cool-blue-lightest { background-color: #e1e7f1; } .usa-color-focus { background-color: #2491ff; } .usa-color-visited { background-color: #54278f; } .usa-color-text-primary-darkest { color: #252f3e; } .usa-color-text-primary-darker { color: #2f4668; } .usa-color-text-primary { color: #4a77b4; } .usa-color-text-cool-blue-light { color: #4a77b4; } .usa-color-text-primary-alt-darkest { color: #07648d; } .usa-color-text-green { color: #4d8055; } .usa-color-text-visited { color: #54278f; } .usa-color-text-gray-dark { color: #2d2e2f; } .usa-color-text-gray { color: #565c65; } .usa-color-text-gray-warm-dark { color: #454540; } .usa-color-text-secondary-darkest { color: #8b0a03; } .usa-color-text-secondary-dark { color: #b50909; } .usa-color-text-secondary { color: #ce482d; } .usa-color-text-white { color: white; } .usa-heading-alt { border-bottom: 1px solid #565c65; padding-bottom: 0.5rem; } .usa-typography-example-font { padding-top: 0.5rem; } .usa-typography-example-font h1, .usa-typography-example-font h2, .usa-typography-example-font h3, .usa-typography-example-font h4, .usa-typography-example-font h5, .usa-typography-example-font h6, .usa-typography-example-font .usa-font-example p { margin: 0; } @media all and (min-width: 40em) { .font-example-paragraph { max-width: 15rem; width: 100%; } } .usa-typography-example .usa-monospace { font-size: 0.77rem; margin-bottom: 2rem; margin-top: 0; } .usa-monospace { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; } code, pre { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; background-color: rgba(0, 0, 0, 0.05); font-weight: normal; } pre { padding: 1rem; } pre code { padding: 0; background-color: transparent; } pre code::before, pre code::after { display: none; } pre.lineno { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } a.token { padding-left: 0.25rem; padding-right: 0.25rem; padding-bottom: 0.25rem; padding-top: 0.25rem; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.77rem; text-decoration: none; background-color: #e1e7f1; border: 1px solid #e1e7f1; border-radius: 2px; color: rgba(0, 0, 0, 0.8); display: inline-block; line-height: 1; } a.token:visited { color: rgba(0, 0, 0, 0.8); } a.token:hover, a.token:hover:visited { background-color: #2672de; border-color: #2672de; color: white; } a.token:active, a.token:active:visited { background-color: rgba(0, 0, 0, 0.8); border-color: rgba(0, 0, 0, 0.8); color: white; } code { padding-bottom: 2px; padding-top: 2px; } code::before, code::after { letter-spacing: -0.03em; content: " "; } .site-accordion-code { margin-bottom: 0.5rem; } .site-accordion-code pre, .site-accordion-code code { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; line-height: 1.6; background: none; margin-bottom: 0; margin-top: 0; padding: 0; } .site-accordion-code .usa-unstyled-list { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .site-accordion-code .usa-unstyled-list > li { margin-bottom: 0; max-width: unset; } [class*=language-] { color: #121923; } [class*=language-] .nt, [class*=language-] .token.property, [class*=language-] .token.tag, [class*=language-] .token.boolean, [class*=language-] .token.number, [class*=language-] .token.constant, [class*=language-] .token.symbol, [class*=language-] .token.deleted { color: #07648d; } [class*=language-] .na, [class*=language-] .token.selector, [class*=language-] .token.attr-name, [class*=language-] .token.string, [class*=language-] .token.char, [class*=language-] .token.builtin, [class*=language-] .token.inserted { color: #ce482d; } [class*=language-] .s, [class*=language-] .token.atrule, [class*=language-] .token.attr-value, [class*=language-] .token.keyword { color: #4d8055; } [class*=language-] .token.punctuation { color: #07648d; } [class*=language-] .c { color: #565c65; } .alignment-example { border-left: 2px solid #2f4668; padding-left: 0.5rem; } .help-text { border-top: 2px solid #2f4668; color: #2f4668; font-size: 16px; padding-top: 0.5rem; text-align: center; } .text-tiny { margin-bottom: 0; margin-top: 0.25rem; } .text-tiny:first-child { margin-top: 0; } .typography-sans-intro .text-huge { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 9.32rem; line-height: 0.9; } .typography-sans-intro .text-tiny { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 0.93rem; line-height: 0.9; } .typography-serif-intro .text-huge { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 8.54rem; line-height: 1; } .typography-serif-intro .text-tiny { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 0.85rem; line-height: 1; } .typography-lang-intro .text-huge { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 8.75rem; line-height: 1; } .typography-lang-intro .text-tiny { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1; } .typography-mono-intro .text-huge { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 8.34rem; line-height: 1; } .typography-mono-intro .text-tiny { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; line-height: 1; } .serif-robust .usa-display-alt { font-size: 2.5rem; font-weight: 300; } .serif-robust .usa-font-lead { font-weight: 300; } .serif-robust .usa-font-lead .usa-font-lead-alt { font-size: 0.94rem; font-weight: normal; } .serif-robust.serif-body .usa-font-example p { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 0.91rem; line-height: 1.4; } .serif-robust.serif-body .usa-font-example .usa-font-lead { font-size: 1.25rem; } .serif-robust.serif-body .usa-font-example .usa-font-lead .usa-font-lead-alt { font-size: 0.94rem; font-weight: normal; } .sans-style h1, .sans-style h2, .sans-style h3, .sans-style h4, .sans-style h5, .sans-style h6 { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; } .sans-style h1 { font-size: 3.19rem; } .sans-style h2 { font-size: 2.13rem; line-height: 1.2; } .sans-style h3 { font-size: 1.86rem; } .sans-style h4 { font-size: 1.33rem; } .sans-style h5 { font-size: 1.13rem; } .sans-style h6 { font-size: 0.93rem; } .sans-style .usa-display { font-size: 3.73rem; } .sans-style .usa-display-alt { font-size: 3.19rem; font-weight: 300; } .sans-style .usa-font-lead { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 1.6rem; line-height: 1.4; font-weight: 300; } .sans-style.serif-body .usa-font-example p { font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif; font-size: 0.98rem; line-height: 1.4; } .sans-style.serif-body .usa-font-example .usa-font-lead { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 1.33rem; line-height: 1.4; font-weight: 300; } .serif-sans-minor h6 { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; } .site-accordion-docs { margin-bottom: 3.5rem; } .explicit-external-link::after { background-image: url("../img/external-link.svg"); background-position: 50% 60%; background-repeat: no-repeat; background-size: 100%; content: ""; display: inline; margin-left: 0.25rem; padding-left: 0.65em; } .explicit-external-link:hover::after { background-image: url("../img/external-link-hover.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/external-link-hover.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-button[href^=http]:not([href*=".gov"])::after, .link-download[href^=http]:not([href*=".gov"])::after, .media_link[href^=http]:not([href*=".gov"])::after { display: none; } .logo-links [href^=http]:not([href*=".gov"])::after, .usa-disclaimer-stage [href^=http]:not([href*=".gov"])::after { display: none; } .split-background-primary { background: -webkit-gradient(linear, left top, left bottom, from(#0048ad), to(#0048ad)) 0 0/100% 40% no-repeat; background: linear-gradient(#0048ad, #0048ad) 0 0/100% 40% no-repeat; } .split-background-dark { background: -webkit-gradient(linear, left top, left bottom, from(#121923), to(#121923)) 0 0/100% 40% no-repeat; background: linear-gradient(#121923, #121923) 0 0/100% 40% no-repeat; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: black; /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; border: 1px solid #888; } .modal-content.fixed-width-modal { max-width: 750px; } /* The Close Button */ .close { color: white; position: absolute; top: 0; right: 0; font-size: 18px; background-color: #ce482d; padding: 5px; margin: 0; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .modal-inactive { display: none !important; } .modal-active { display: block; } .pc-inactive { display: none !important; } .usa-media-block__body { color: white; } @media all and (min-width: 64em) { .usa-media-block__body .border-right { border-right: solid 1px #f3f3f4; } } .usa-media-block__footer a { text-decoration: none; color: white; } .usa-media-block__footer h3 { color: white; } .usa-media-block__body-outlined { color: white; padding: 3rem; border: solid 1px rgba(255, 255, 255, 0.8); } .usa-media-block__inline-items { display: -webkit-box; display: -ms-flexbox; display: flex; } .usa-media-block__inline-items .inline-number { display: inline-block; } .usa-media-block__inline-items .inline-number p { color: white; background-color: #ce482d; font-size: 0.94rem; padding-left: 0.5rem; } .usa-media-block__inline-items .inline-text { display: inline-block; padding-left: 1.5rem; } .usa-media-block__background-image-landscape .content { width: 100%; top: 0; color: white; padding: 0.5rem 2.5rem 0.5rem 1.5rem; margin-right: 1rem; } .usa-media-block__background-image-landscape .content a { text-decoration: none; padding-top: 2rem; padding-bottom: 2rem; color: white; } .usa-media-block__background-image-landscape .content a:visited { color: white; } .usa-media-block__background-image-landscape .content a:hover { color: #adadad; text-decoration: underline; } .usa-media-block__background-image-landscape .overlay .overlay-image { width: 100%; padding: 0; padding-left: -1rem; } @media all and (min-width: 20em) { .usa-media-block__background-image-landscape .overlay .overlay-image { height: 475px; } } .usa-media-block__background-image-landscape .overlay img + .overlay-content { position: absolute; bottom: 2.5rem; background-color: #121923; color: white; padding: 1.5rem 2.5rem; } .usa-media-block__background-image-landscape .overlay img + .overlay-content a { text-decoration: none; padding-top: 2rem; padding-bottom: 2rem; color: white; } .usa-media-block__background-image-landscape .overlay img + .overlay-content a:visited { color: #adadad; } .usa-media-block__background-image-landscape .overlay img + .overlay-content a:hover { color: #adadad; text-decoration: underline; } @media all and (min-width: 64em) { .usa-media-block__background-image-landscape .overlay img + .overlay-content { width: 65%; } } .usa-media-block__background-image-landscape img + .content-grid-one-third { height: 300px; width: 85%; position: absolute; bottom: 7px; background-color: #121923; color: white; padding: 1rem; } @media screen and (max-width: 64rem) and (min-width: 40rem) { .page-home .usa-graphic-list .usa-graphic-list__row .usa-media-block:nth-child(-n+2) { margin-bottom: 4rem; } } .page-home .usa-footer__secondary-section { background-color: #e6e6e6; } @media all and (min-width: 55em) { .hero { background-image: url("../img/home/hero.png"); background-size: contain; background-repeat: no-repeat; background-position: right 2.5rem center; } } .hero--heading { font-size: 1.75rem; } @media all and (min-width: 40em) { .hero--heading { font-size: 2.5rem; } } .hero--content { font-size: 1.25rem; } .showcase img { -webkit-box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 0.25rem 0 rgba(0, 0, 0, 0.1); } .showcase a { display: inline-block; font-size: 1.06rem; font-weight: bold; margin-bottom: 2rem; margin-top: 0.5rem; } @media all and (min-width: 40em) { .showcase a { margin-bottom: 0; } } .font-display { font-size: 3rem; } @media all and (min-width: 64em) { .background-hero-image-home { background-image: url("../img/photos/home/hero.png"); height: 600px; background-position: right; background-repeat: no-repeat; background-size: contain; } } @media all and (min-width: 64em) { .background-hero-image-coil { background-image: url("../img/photos/coil/coil-hero.png"); height: 600px; background-position: right; background-repeat: no-repeat; background-size: contain; } } @media all and (min-width: 64em) { .background-hero-image-hcd { background-image: url("../img/photos/hcd/HCD-Training-Photos-24.jpg"); height: 500px; background-position: right 0px top 100px; background-repeat: no-repeat; background-size: contain; } } @media all and (min-width: 64em) { .statistic-border-right { border-right: solid 1px #28303b; } } @media all and (min-width: 64em) { .translucent-bottom-border { border-bottom: solid 1px #e6e6e6; } } .logo-garden-container { display: none; } @media all and (min-width: 64em) { .logo-garden-container { margin-top: 3rem; opacity: 0.5; width: 64rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .logo-garden-mobile { opacity: 0.5; } @media all and (min-width: 64em) { .logo-garden-mobile { display: none; } } .logo-garden-item { max-height: 30px; max-width: auto; display: inline-block; } .logo-garden-large { max-height: 100px; max-width: auto; display: inline-block; margin-left: 40px; margin-right: 40px; } .header-overlay { width: 60%; position: absolute; top: 2.5rem; background-color: #121923; color: white; } .homepage-rule { margin-bottom: 0; margin-top: 0; border: 0; height: 1rem; width: 100%; position: relative; } .homepage-rule.center-diamond { background: none; text-align: center; } .homepage-rule.center-diamond::before { content: " "; display: inline-block; background: #4a77b4; height: 1px; position: relative; top: 0.5rem; width: 100%; } .homepage-rule.center-diamond::after { content: "◆"; display: inline-block; position: relative; top: -2rem; font-size: 1.125rem; padding: 0 0.5rem; color: #ce482d; background: #fcfcfc; } .page-ui-components .usa-font-lead:first-of-type { margin-top: 2rem; } @media all and (min-width: 40em) { .page-design-principles .main-content .usa-grid-full { margin-bottom: 2rem; margin-top: 2.5rem; } } .page-design-principles img { max-width: 10rem; } .link-download { display: table; } .link-download::before { height: 0.75rem; width: 0.75rem; background: url("../img/icon-download.png") no-repeat 0 0; background: url("../img/icon-download.svg") no-repeat 0 0; background-size: 100%; content: ""; display: inline-block; margin-bottom: 0; margin-right: 0.75rem; } .link-download-subtext { margin-left: 1.5rem; } .link_group-download .link-download { margin-bottom: 0.5rem; } #product-search-form { width: 20rem; } #product-search-form .usa-input { border-color: #adadad; } .product-filter-form-desktop { visibility: hidden; } @media all and (min-width: 64em) { .product-filter-form-desktop { visibility: visible; } } @media all and (min-width: 64em) { .product-filter-form-mobile { visibility: hidden; } } .usa-accordion { opacity: 1; } .usa-accordion__button { background-image: url(../img/icons/remove-24px-icon-black.svg); background-repeat: no-repeat; } .usa-accordion__button.light { background-image: url(../img/icons/remove-24px-icon-white.svg); background-repeat: no-repeat; } .usa-accordion__button[aria-expanded=false] { background-image: url(../img/icons/add-24px-icon-black.svg); background-repeat: no-repeat; } .usa-accordion__button[aria-expanded=false].light { background-image: url(../img/icons/add-24px-icon-white.svg); background-repeat: no-repeat; } .usa-accordion__button-alt { background-image: none; } @media all and (min-width: 40em) { .usa-accordion__button-alt::after { background-image: url("../img/angle-arrow-down-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } .usa-accordion__button-alt[aria-expanded=false] { background-image: none; } @media all and (min-width: 40em) { .usa-accordion__button-alt[aria-expanded=true]::after { background-image: url("../img/angle-arrow-up-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-up-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } .usa-accordion__button-toolkit { background-image: none; } @media all and (min-width: 40em) { .usa-accordion__button-toolkit::after { background-image: url("../img/angle-arrow-down-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } .usa-accordion__button-toolkit[aria-expanded=false] { background-image: none; } @media all and (min-width: 40em) { .usa-accordion__button-toolkit[aria-expanded=true]::after { background-image: url("../img/angle-arrow-up-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-up-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } .dropdown-menu { width: 20rem; height: 10rem; padding: 1rem; overflow: auto; border: 1px solid #adadad; background-color: white; opacity: 1; } .yr-btn { display: inline; font-size: 0.83rem; border: solid white 1px; color: white; margin: 0; padding: 0.5rem 1rem; -webkit-transition: 0.2s; transition: 0.2s; } .yr-btn:hover, .yr-btn-active { color: #121923; background-color: white; } .year-wrapper { border: solid white 1px; float: right; border-radius: 5px; cursor: pointer; } .ps-inactive { display: none !important; } .docs-grid-example { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.89rem; } .docs-grid-example .grid-row { margin-top: 0.5rem; } .docs-grid-example [class*=grid-col] { background-color: #e1e7f1; text-align: center; } .docs-grid-example .grid-row:not([class*=grid-gap]) [class*=grid-col] { border: 1px solid; padding: 1rem; } .docs-grid-example [class*=grid-gap] [class*=grid-col] > * { background-color: white; border: 1px solid; padding: 1rem; } .is-inverse { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .page-content h3 { font-size: 1.5rem; font-weight: normal; line-height: 1.4; } @media all and (min-width: 55em) { .page-content h3 { font-size: 3rem; } } .docs-text { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.06rem; margin-bottom: 0.5rem; margin-top: 2rem; max-width: 72ex; font-weight: normal; } strong { font-weight: bold; } .docs-inline-code { background-color: #f5f5f0; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.89rem; padding-left: 0.25rem; padding-right: 0.25rem; padding-bottom: 2px; padding-top: 2px; border-radius: 2px; } .property { border-width: 1px; border-style: solid; color: #d54309; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.71rem; line-height: 1; padding-left: 0.25rem; padding-right: 0.25rem; padding-bottom: 2px; padding-top: 2px; border-radius: 2px; font-weight: normal; white-space: nowrap; text-decoration: none; text-transform: uppercase; font-style: normal; letter-spacing: 0.1em; } .prose-graf-intro { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.81rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; } @media all and (min-width: 75em) { .prose-graf-intro { font-size: 0.88rem; } } .text-color .example { border-bottom-width: 1px; border-bottom-color: #e6e6e6; border-bottom-style: solid; margin-bottom: 0.25rem; margin-top: 0.25rem; padding-bottom: 0.25rem; padding-top: 0.25rem; } .output-list { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; margin-top: 0; width: 100%; } .output-list .output-utility, .output-list .output-css, .output-list .output-variable { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #adadad; border-bottom-style: solid; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; min-height: 2rem; padding-bottom: 0.25rem; padding-top: 0.25rem; } .output-list .output-utility { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 33.3333333333%; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; padding-right: 1rem; } .output-list .output-css { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; padding-right: 1rem; } .output-list .output-css .output-token { display: inline-block; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; } .output-list .output-variable { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 16.6666666667%; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; font-weight: 300; } .output-token { background-color: white; border-width: 1px; border-color: #e6e6e6; border-style: solid; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.89rem; padding-left: 0.25rem; padding-right: 0.25rem; padding-bottom: 2px; padding-top: 2px; border-radius: 2px; font-weight: normal; } .output-rule { display: block; } .output-rule + .output-rule { margin-top: 0.25rem; } .output-true, .output-false { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #0076d6; display: inline-block; padding-bottom: 0; padding-top: 0; padding-left: 0.25rem; padding-right: 0.25rem; border-radius: 2px; color: white; } .output-false { background-color: #d54309; } li.display-inline-block { margin-bottom: 0; } .page-introducing-uswds-2-0 .post-content img { max-width: 20rem; mix-blend-mode: darken; } .utilities-property-title { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.63rem; margin-left: 2px; margin-bottom: 0; margin-top: 0; font-weight: normal; text-transform: uppercase; letter-spacing: 0.025em; } .utilities-property { background-color: white; display: inline-block; margin-top: 0; padding: 0.25rem; text-transform: none; letter-spacing: initial; } .utilities-section { border-top-width: 1px; border-top-style: solid; margin-top: 2rem; padding-top: 0.5rem; } .utilities-section-title-bar { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1rem; } .utilities-section-title { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; margin: 0; font-weight: normal; } .utilities-section-title code { background-color: white; border-width: 1px; border-style: solid; display: inline-block; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 1.01rem; margin-right: 2px; padding-left: 0; padding-right: 0; padding-bottom: 2px; padding-top: 2px; border-radius: 0.25rem; font-weight: 300; } @media all and (min-width: 40em) { .utilities-section-title.usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } } .utilities-section-helper { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.75rem; margin-bottom: 0; margin-top: 0; max-width: none; } @media all and (min-width: 40em) { .utilities-section-helper.usa-grid-col { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; width: auto; max-width: 100%; min-width: 1px; } } @media all and (min-width: 40em) { .utilities-section-helper { text-align: right; } } .utility { background-color: white; border-width: 1px; border-color: #28303b; border-style: solid; margin-bottom: 1rem; margin-top: 1rem; padding-bottom: 1rem; padding-top: 1rem; border-radius: 0.25rem; } .utility-title-bar { margin-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; } .utility-title-bar > .usa-grid-row { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .utility-name.usa-grid-col { max-width: 100%; } @media all and (min-width: 40em) { .utility-name.usa-grid-col { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; width: auto; max-width: 100%; min-width: 1px; } } .utility-title { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.06rem; margin-bottom: 0.25rem; margin-top: 0; } .utility-property { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.81rem; margin: 0; text-transform: uppercase; letter-spacing: 0.025em; } .utility-property-code { font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; font-weight: 300; text-transform: none; letter-spacing: initial; color: #d54309; } .utility-scope { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; display: inline; margin: 0; } @media all and (min-width: 40em) { .utility-scope { text-align: right; max-width: 70%; } } @media all and (min-width: 40em) { .utility-scope.usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } } .utility-scope-button, .utility-scope-button-active a, .utility-scope-button-disabled { display: inline-block; font-size: 0.88rem; line-height: 1; margin-right: 2px; margin-top: 0.25rem; padding: 0.25rem; border-radius: 2px; } @media all and (min-width: 40em) { .utility-scope-button, .utility-scope-button-active a, .utility-scope-button-disabled { font-size: 0.94rem; margin-right: 0.25rem; margin-top: 0; padding-bottom: 0.5rem; padding-top: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; border-radius: 0.25rem; } } .utility-scope-button-disabled { background-color: white; border-width: 1px; border-color: #e6e6e6; border-style: solid; color: #c9c9c9; text-decoration: line-through; } .utility-scope-button-active { display: inline; } .utility-scope-button-active a { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #0076d6; color: white; text-decoration: none; } .utility-scope-button-active a:hover { background-color: #2e2e2e; color: white; } .utility-examples { margin-left: 1rem; margin-right: 1rem; } .utility-examples-title { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; padding-top: 2rem; margin-bottom: 0; margin-top: 0.5rem; border-top: 1px solid #e6e6e6; } .utility-examples-helper { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.81rem; margin-left: 0.5rem; font-weight: normal; color: rgba(0, 0, 0, 0.8); } .utility-class, .utility-value-color, .utility-value { background-color: #f3f3f4; display: inline-block; font-family: Roboto Mono Web, Silka-Mono, roboto-mono; font-size: 0.83rem; margin: 0; padding-bottom: 2px; padding-top: 2px; padding-left: 0.25rem; padding-right: 0.25rem; border-radius: 2px; } .utility-value { background-color: #f3e1e4; } .utility-value-color { background-color: white; border-width: 1px; border-color: #e6e6e6; border-style: solid; margin-top: 0; font-weight: 300; white-space: nowrap; text-transform: lowercase; } .utility-value-color-chip { height: 0.75rem; border-radius: 99rem; width: 0.75rem; display: inline-block; margin-right: 0.25rem; vertical-align: middle; } .utility-example-container { border-top-width: 1px; border-top-color: #e6e6e6; border-top-style: solid; margin-top: 0.5rem; margin-bottom: 0; max-width: none; padding-top: 0.5rem; overflow: hidden; } .utility-example-container > .usa-grid-row { margin-left: -0.5rem; margin-right: -0.5rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .utility-example-container > .usa-grid-row > * { padding-left: 0.5rem; padding-right: 0.5rem; } .utility-example { max-width: 70%; } .utility-example.usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .utility-example-class.usa-grid-col { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; width: auto; max-width: 100%; min-width: 1px; } .utility-example-value.usa-grid-col { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .utilities-output-heading { border-bottom-width: 1px; border-bottom-color: #e6e6e6; border-bottom-style: solid; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.75rem; margin-top: 1rem; padding-bottom: 0.25rem; font-weight: bold; } .utility-code-sample { background-color: #e6e6e6; line-height: 1.4; margin-left: 0; margin-right: 0; margin-bottom: 0.5rem; margin-top: 0.5rem; border-radius: 0.25rem; white-space: pre-wrap; } .utility-note { background-color: #ffbe2e; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.6; margin-bottom: 1rem; margin-top: 1rem; max-width: none; padding: 1rem; border-radius: 0.25rem; color: rgba(0, 0, 0, 0.8); } .utility-note + .utility-examples-title { border-top: none; margin-top: 0; padding-top: 0; } .utility-note a { color: #1b1b1b; } .utility-text { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.6; max-width: 72ex; } .utility-text + .utility-text { margin-top: 0.5rem; } p + .usa-accordion, h2 + div:not(.usa-accordion__content), h3 + div:not(.usa-accordion__content), h4 + div:not(.usa-accordion__content), h5 + div:not(.usa-accordion__content), h6 + div:not(.usa-accordion__content) { margin-top: 1rem; } .sidenav a { padding-right: 0.25rem; } .default-container::after { clear: both; content: ""; display: block; } .site-font-lead { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.6; max-width: 64ex; color: rgba(0, 0, 0, 0.8); font-weight: 300; } .site-font-lead + p { margin-top: 2rem; } .site-header .usa-button { background-color: #2672de; } .site-header .usa-button:hover { background-color: #0050d8; } .site-header .usa-button--outline-inverse { background-color: transparent; margin-right: 0; } .site-header .usa-button--outline-inverse:hover { background-color: transparent; } @media all and (min-width: 64em) { .site-header .navbar--container { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 1.5rem; height: 5rem; margin-top: -1px; margin-bottom: -4px; } } .site-header .navbar--container .usa-button { display: none; } @media all and (min-width: 64em) { .site-header .navbar--container .usa-button { display: initial; } } .site-header .navbar--container .usa-accordion__button[aria-expanded=false] { background-image: url("../img/angle-arrow-down-white.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-white.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-header .navbar--container .usa-accordion__button[aria-expanded=false]:hover { background-image: url("../img/angle-arrow-down-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-header .navbar--container .usa-accordion__button[aria-expanded=true]:hover { background-image: url("../img/angle-arrow-up-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-up-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-docs-card-link { border-top: 0.25rem solid rgba(0, 0, 0, 0.1); padding-top: 0.75rem; } .site-docs-card-link:hover { border-color: #0048ad; } .site-docs-card-link:hover a { color: black; -webkit-text-decoration-color: #e6e6e6; text-decoration-color: #e6e6e6; } .block-link::before { position: absolute; bottom: 0; left: 0; right: 0; top: 0; content: ""; } .usa-button-list.site-button-list .usa-button { font-size: 0.94rem; margin: 0; width: 100%; } @media all and (min-width: 64em) { .usa-button-list.site-button-list .usa-button { width: auto; } } .usa-button-list.site-button-list li + li .usa-button { margin-top: 0.25rem; } @media all and (min-width: 64em) { .usa-button-list.site-button-list li + li .usa-button { margin-left: 2px; margin-top: 0; } } .usa-nav__inner { margin-bottom: 0; color: white; } .usa-nav__inner .usa-button:hover { background-color: #0050d8; } .usa-nav__inner .usa-button.site-button-version { -moz-osx-font-smoothing: auto; -webkit-font-smoothing: subpixel-antialiased; color: rgba(0, 0, 0, 0.8); background-color: #fcfcfc; } .usa-nav__inner .usa-button.site-button-version:visited { color: rgba(0, 0, 0, 0.8); } .usa-nav__inner .usa-button.site-button-version:hover { background-color: #face00; } .usa-nav__inner .usa-nav__link { color: white; } .usa-nav__inner .usa-nav__link:hover { color: #3380c8; } .usa-nav__inner .usa-nav__link:visited { color: #3380c8; } .usa-nav__inner .usa-button.site-button-outline-secondary { -webkit-box-shadow: inset 0 0 0 2px #0048ad; box-shadow: inset 0 0 0 2px #0048ad; background-color: transparent; color: #0048ad; } .usa-nav__inner .usa-button.site-button-outline-secondary:visited { color: #0048ad; } .usa-nav__inner .usa-button.site-button-outline-secondary:hover { -webkit-box-shadow: inset 0 0 0 2px #0050d8; box-shadow: inset 0 0 0 2px #0050d8; background-color: transparent; color: #0050d8; } .site-header-dark .site-header-navbar { background-color: #121923; } .site-header-dark .site-logo a { color: white; } .site-header-dark .site-logo .usa-logo__text::before { background-image: url("../img/uswds-logo/4c-lg-on-black.png"); background-image: url("../img/uswds-logo/4c-lg-on-black.svg"); } .site-header-dark .usa-button.site-button-outline-secondary { -webkit-box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); background-color: transparent; color: rgba(255, 255, 255, 0.7); } .site-header-dark .usa-button.site-button-outline-secondary:hover { -webkit-box-shadow: inset 0 0 0 2px white; box-shadow: inset 0 0 0 2px white; background-color: transparent; color: white; } @media all and (min-width: 64em) { .site-header-dark .usa-button.site-button-outline-secondary { margin-right: 2rem; } } .site-page-title { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 2.5rem; line-height: 1.2; font-weight: bold; color: rgba(0, 0, 0, 0.8); } .foo { border-width: 0.25rem; border-style: solid; } pre { white-space: pre; } @media all and (min-width: 40em) { .site-table-wrapper { border: 1px solid; border-radius: 0.25rem; display: block; background-color: white; } } .site-table-wrapper .site-table-responsive { margin: 0; } .site-table-wrapper + .site-table-wrapper { margin-top: 1.5rem; } .site-prose .site-table-responsive, .site-table-responsive { width: 100%; max-width: none; border-collapse: collapse; } @media all and (max-width: 39.99em) { .site-prose .site-table-responsive, .site-table-responsive { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.8; display: block; width: 100%; } .site-prose .site-table-responsive caption, .site-table-responsive caption { display: block; } .site-prose .site-table-responsive thead, .site-table-responsive thead { position: absolute; left: -999em; } .site-prose .site-table-responsive caption, .site-prose .site-table-responsive tbody, .site-prose .site-table-responsive tr, .site-prose .site-table-responsive th, .site-prose .site-table-responsive td, .site-prose .site-table-responsive tfoot, .site-table-responsive caption, .site-table-responsive tbody, .site-table-responsive tr, .site-table-responsive th, .site-table-responsive td, .site-table-responsive tfoot { border: 0; display: block; padding: 0; text-align: left; white-space: normal; } .site-prose .site-table-responsive caption, .site-table-responsive caption { font-weight: bold; padding-bottom: 0.5rem; } .site-prose .site-table-responsive td, .site-prose .site-table-responsive th, .site-table-responsive td, .site-table-responsive th { width: 100%; padding: 0.25rem 0.25rem 0.25rem 0; position: relative; z-index: 100; } .site-prose .site-table-responsive td[data-title]:before, .site-prose .site-table-responsive th[data-title]:before, .site-table-responsive td[data-title]:before, .site-table-responsive th[data-title]:before { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.75rem; line-height: 1.2; padding-left: 0.5rem; padding-right: 0.5rem; content: attr(data-title); -webkit-box-flex: 0; -ms-flex: none; flex: none; font-weight: normal; margin-right: 0.25rem; max-width: 7.5rem; text-align: left; width: 50%; } .site-prose .site-table-responsive td.is-empty, .site-prose .site-table-responsive th.is-empty, .site-table-responsive td.is-empty, .site-table-responsive th.is-empty { display: none; } .site-prose .site-table-responsive th:not([data-title]), .site-table-responsive th:not([data-title]) { font-weight: bold; } .site-prose .site-table-responsive tr, .site-table-responsive tr { background-color: white; border: 1px solid; border-radius: 0.25rem; display: block; padding-bottom: 2px; position: relative; } .site-prose .site-table-responsive tr::after, .site-table-responsive tr::after { position: absolute; bottom: 0; top: 0; position: absolute; left: 0; content: ""; background-color: #f9f9f9; border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; display: block; max-width: 7.5rem; position: absolute; width: 50%; z-index: 0; } .site-prose .site-table-responsive tr.is-empty, .site-table-responsive tr.is-empty { display: none; } .site-prose .site-table-responsive tr + tr, .site-table-responsive tr + tr { margin-top: 0.5rem; } .site-prose .site-table-responsive td, .site-table-responsive td { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.5; } .site-prose .site-table-responsive td:empty, .site-table-responsive td:empty { display: none; } .site-prose .site-table-responsive td + td, .site-table-responsive td + td { border-top: 1px solid #e6e6e6; } .site-prose .site-table-responsive td .site-inline-swatch, .site-table-responsive td .site-inline-swatch { width: 100%; } } @media all and (min-width: 40em) { .site-prose .site-table-responsive thead, .site-table-responsive thead { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.75rem; } .site-prose .site-table-responsive caption, .site-table-responsive caption { font-weight: bold; padding-bottom: 0.5rem; } .site-prose .site-table-responsive caption, .site-prose .site-table-responsive tbody, .site-prose .site-table-responsive tr, .site-prose .site-table-responsive th, .site-prose .site-table-responsive td, .site-prose .site-table-responsive tfoot, .site-table-responsive caption, .site-table-responsive tbody, .site-table-responsive tr, .site-table-responsive th, .site-table-responsive td, .site-table-responsive tfoot { text-align: left; } .site-prose .site-table-responsive th:first-child, .site-table-responsive th:first-child { padding-left: 1rem; } .site-prose .site-table-responsive tr, .site-prose .site-table-responsive td, .site-table-responsive tr, .site-table-responsive td { background-color: transparent; } .site-prose .site-table-responsive th, .site-prose .site-table-responsive td, .site-table-responsive th, .site-table-responsive td { padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.5rem; padding-top: 0.5rem; border: none; text-align: left; } .site-prose .site-table-responsive th:first-child, .site-prose .site-table-responsive td:first-child, .site-table-responsive th:first-child, .site-table-responsive td:first-child { padding-left: 1rem; } .site-prose .site-table-responsive th:last-child, .site-prose .site-table-responsive td:last-child, .site-table-responsive th:last-child, .site-table-responsive td:last-child { padding-right: 1rem; } .site-prose .site-table-responsive tbody tr, .site-table-responsive tbody tr { border: none; border-top: 2px solid; } .site-prose .site-table-responsive tbody tr + tr, .site-table-responsive tbody tr + tr { border-top: 1px solid #e6e6e6; } } .site-prose .site-table-responsive.site-table-simple p, .site-table-responsive.site-table-simple p { margin: 0; } @media all and (min-width: 40em) { .site-prose .site-table-responsive.site-table-simple thead, .site-table-responsive.site-table-simple thead { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.81rem; } .site-prose .site-table-responsive.site-table-simple th, .site-prose .site-table-responsive.site-table-simple td, .site-table-responsive.site-table-simple th, .site-table-responsive.site-table-simple td { padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.25rem; padding-top: 0.25rem; border: none; } .site-prose .site-table-responsive.site-table-simple th:first-child, .site-prose .site-table-responsive.site-table-simple td:first-child, .site-table-responsive.site-table-simple th:first-child, .site-table-responsive.site-table-simple td:first-child { padding-left: 0; } .site-prose .site-table-responsive.site-table-simple th:last-child, .site-prose .site-table-responsive.site-table-simple td:last-child, .site-table-responsive.site-table-simple th:last-child, .site-table-responsive.site-table-simple td:last-child { padding-right: 0; } .site-prose .site-table-responsive.site-table-simple tr, .site-table-responsive.site-table-simple tr { display: -webkit-box; display: -ms-flexbox; display: flex; } .site-prose .site-table-responsive.site-table-simple tr th, .site-prose .site-table-responsive.site-table-simple tr td, .site-table-responsive.site-table-simple tr th, .site-table-responsive.site-table-simple tr td { -webkit-box-flex: 1; -ms-flex: 1 0 0px; flex: 1 0 0; } .site-prose .site-table-responsive.site-table-simple tbody tr, .site-table-responsive.site-table-simple tbody tr { border: none; border-top: 1px solid #adadad; } .site-prose .site-table-responsive.site-table-simple tbody tr:last-child, .site-table-responsive.site-table-simple tbody tr:last-child { border-bottom: 1px solid #adadad; } } .site-inline-swatch { height: 2rem; width: 2rem; border-radius: 2px; display: inline-block; text-align: middle; } table .site-inline-swatch { display: block; } .site-caption-swatches { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.5rem; line-height: 1.2; color: #1b1b1b; margin-top: 1rem; margin-bottom: 0.5rem; padding-left: 0; } @media all and (min-width: 40em) { .site-caption-swatches { padding-left: 1rem; } } .site-table-note { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.5; padding: 1rem; background-color: #ffbe2e; border-radius: 0.25rem; margin-bottom: 0.5rem; } @media all and (min-width: 40em) { .site-table-note { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } } @media all and (min-width: 30em) { .site-title-short { display: none; } } @media all and (max-width: 29.99em) { .site-title { position: absolute; left: -999em; } } .site-accordion-docs, .site-accordion-code, .site-accordion { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-prose { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-prose > p { max-width: 72ex; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1rem; line-height: 1.5; line-height: 1.75; } .site-prose > p + * { margin-top: 1em; } .site-prose > h2, .site-prose > h3, .site-prose > h4, .site-prose > h5, .site-prose > h5 { color: #1b1b1b; margin: 0; } .site-prose > h3 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.2; } .site-prose > .site-text-intro + p { margin-top: 2rem; } .site-prose > header + .site-text-intro { margin-top: 0.5rem; } .site-prose > .usa-content-list { padding-left: 0; max-width: 72ex; } .site-prose > li, .site-prose > ul li, .site-prose > ol li { line-height: 1.6; max-width: 72ex; } .site-text-intro, .site-component-section .site-text-intro, .site-prose > .site-text-intro { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.6; font-weight: 300; margin-top: 0.5rem; } .usa-accordion--bordered .usa-accordion__content { padding-bottom: 1.5rem; padding-left: 1rem; padding-top: 1.5rem; } .usa-content-list { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .usa-content-list > li { margin-bottom: 0; max-width: unset; } .usa-content-list > li { border-top: 1px solid #e6e6e6; margin-top: 0.5rem; padding-top: 0.5rem; max-width: 72ex; } .usa-content-list > li ul { list-style-type: disc; padding-left: 1.5rem; } .usa-content-list > li li { margin-top: 0.25rem; max-width: calc(measure($site-measure) - units(3)); } .usa-content-list ol { counter-reset: ol-counter; list-style: none; padding-left: 0; } .usa-content-list ol li { counter-increment: ol-counter; margin-top: 0.5em; padding-left: 1.5rem; text-indent: -1.5rem; } .usa-content-list ol li:before { content: counter(ol-counter) ". "; display: inline-block; font-size: 0.81rem; font-weight: bold; padding-right: 0.25rem; text-align: left; text-indent: 0; width: 1.5rem; } .site-accordion-code .usa-accordion__button { background-image: url("../img/minus-thin-white.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/minus-thin-white.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-color: #004280; color: white; } .site-accordion-code .usa-accordion__button:hover { background-color: #162e51; } .site-accordion-code .usa-accordion__button[aria-expanded=false] { background-image: url("../img/plus-thin-white.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/plus-thin-white.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-accordion-docs .usa-accordion__button, .site-accordion .usa-accordion__button { background-image: url("../img/minus-thin-ink.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/minus-thin-ink.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-accordion-docs .usa-accordion__button[aria-expanded=false], .site-accordion .usa-accordion__button[aria-expanded=false] { background-image: url("../img/plus-thin-ink.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/plus-thin-ink.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-component-section { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; max-width: 72ex; margin-top: 2.5rem; } .site-component-section > h2 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 2.5rem; line-height: 1.2; color: #1b1b1b; margin: 0; } .site-component-usage p + * { margin-top: 1em; } .site-component-usage h2, .site-component-usage h3, .site-component-usage h4, .site-component-usage h5, .site-component-usage h5 { color: #1b1b1b; margin: 0; } .site-component-usage h3 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.2; } .site-component-usage h4 { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 1.25rem; line-height: 1.2; color: #5c5c5c; font-weight: 200; } .site-prose > * + h2, .site-prose > * + h3, .site-prose > * + h4, .site-prose > * + h5, .site-component-section > * + h2, .site-component-usage * + h2, .site-component-usage * + h3, .site-component-usage * + h4, .site-component-usage * + h5 { margin-top: 2em; } .site-prose > h2 + *, .site-prose > h3 + *, .site-prose > h4 + *, .site-prose > h5 + *, .site-component-section > h2 + *, .site-component-usage h2 + *, .site-component-usage h3 + *, .site-component-usage h4 + *, .site-component-usage h5 + * { margin-top: 1em; } .site-button-list .usa-button { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1; } .site-header { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-header .usa-menu-btn { font-size: 0.81rem; } .site-nav { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-nav .usa-accordion { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-nav .usa-nav__close { background-image: url("../img/close-blue-60v-alt.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/close-blue-60v-alt.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; height: 3rem; width: 3rem; background-color: #f3f3f4; background-position: center center; background-repeat: no-repeat; background-size: 1rem; } .site-nav .usa-nav__link { color: white; } .site-nav .usa-nav__link .usa-nav__primary-item a { color: white; line-height: 1.2; } .site-nav .usa-nav__link[aria-expanded=true] { background-image: url("../img/minus-thin-ink.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/minus-thin-ink.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-nav .usa-nav__link[aria-expanded=false] { background-image: url("../img/plus-thin-ink.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/plus-thin-ink.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .site-nav .usa-nav__primary button { color: white; line-height: 1.2; } .site-nav .usa-nav__submenu-item { color: white; font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.88rem; line-height: 1.2; } .site-nav .usa-nav__inner .usa-nav__primary button { color: #5c5c5c; } .site-nav .usa-nav__inner .usa-nav__primary-item :hover { color: #1a4480; } .site-banner { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; background-color: #f8fafd; color: #1a4480; } .site-banner [href^=http]:not([href*=".gov"])::after { display: none; } .site-banner .usa-accordion { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .site-banner .usa-banner__header-text, .site-banner .usa-banner__header-action, .site-banner .usa-banner__button { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.75rem; line-height: 1.2; } .site-banner .usa-banner__content { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.6; } .site-banner .usa-banner__content p { line-height: 1.6; } .site-banner .usa-banner__header-action::after { background-image: url("../img/angle-arrow-down-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 0.25rem; /* stylelint-enable */ } @media all and (min-width: 40em) { .site-banner .usa-banner__button::after { background-image: url("../img/angle-arrow-down-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } @media all and (min-width: 40em) { .site-banner .usa-banner__button[aria-expanded=true]::after { background-image: url("../img/angle-arrow-up-primary.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-up-primary.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 0.5rem; content: ""; display: inline-block; height: 0.5rem; width: 0.5rem; /* stylelint-disable block-closing-brace-newline-after, at-rule-empty-line-before */ margin-left: 2px; /* stylelint-enable */ } } .usa-content-list { max-width: 72ex; } .site-button { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1; font-weight: normal; } .site-table, .usa-prose > .site-table { font-family: Public Sans Web, Silka, Helvetica, Arial, sans; font-size: 0.94rem; line-height: 1.8; } .usa-accordion__button:hover { text-decoration: none; } .usa-hero { background-image: none; background-color: #121923; padding-top: 7.5rem; padding-bottom: 7.5rem; } .usa-hero__title { font-size: 48px; font-weight: 600; line-height: 1.35; padding-top: 3.5rem; } .usa-hero__subtitle { padding-bottom: 3.5rem; } figure.highlight { margin: 0; } pre.lineno { color: #545e6a; font-weight: 300; margin-right: 2ch; text-align: right; width: 3ch; } [class*=language-] { color: #545e6a; } [class*=language-] .nt { color: #1a4480; } [class*=language-] .s { color: #004280; } #utility-mixins p, #utility-mixins ul { max-width: 72ex; } body { text-rendering: optimizeLegibility; } .site-accordion .usa-accordion__content { padding-left: 0; padding-right: 0; } .site-note { background-color: #ffbe2e; max-width: 72ex; padding: 0.5rem; border-radius: 2px; } .site-note a { color: #1b1b1b; } .site-hero { background-color: #f3f3f4; padding-bottom: 2rem; padding-left: 0; padding-right: 0; background-image: url("../img/introducing-uswds-2-0/feature-image.png"); background-repeat: no-repeat; background-position: 0 1rem; background-size: 100% auto; padding-top: 68vw; } @media all and (min-width: 40em) { .site-hero { padding-bottom: 4rem; padding-top: 3rem; background-image: url("../img/introducing-uswds-2-0/feature-image-homepage.svg"); background-repeat: no-repeat; background-position: left calc(30rem + 1rem) top 0.75rem; background-size: auto 400px; } } @media all and (min-width: 55em) { .site-hero { background-position: left calc(50% + 15rem) top 0.75rem; } } .post-content h2 { line-height: 1.2; } .page-website-standards .site-subheading { display: none; } .site-nav .usagov-search-autocomplete { min-width: 0; } .site-nav .usa-button { display: block; } .site-button-github .logo { bottom: 2px; display: inline-block; fill: white; margin-right: 0.25rem; vertical-align: middle; width: 1.5rem; } .site-button-github .logo path { fill: white; } .site-button-github .text { bottom: -2px; position: relative; } @media all and (min-width: 64em) { .site-button-github .text { position: absolute; left: -999em; } } @media all and (min-width: 64em) { .site-button-github.usa-button { padding-left: 0; padding-right: 0; background-color: transparent; display: inline-block; } .site-button-github.usa-button .logo { padding-left: 0; padding-right: 0; bottom: 1px; margin-left: 0.25rem; position: relative; width: 2rem; } .site-button-github.usa-button .logo path { fill: rgba(255, 255, 255, 0.7); } .site-button-github.usa-button:hover, .site-button-github.usa-button:active { background-color: transparent; } .site-button-github.usa-button:hover .logo path, .site-button-github.usa-button:active .logo path { fill: white; } .site-button-github .text { position: absolute; left: -999em; } } @media all and (min-width: 64em) { .site-header .buttons .usa-button { position: relative; bottom: -2px; } .site-header .buttons .site-button-standards { -webkit-box-shadow: inset 0 0 0 2px #e5a000; box-shadow: inset 0 0 0 2px #e5a000; color: #e5a000; } } .embed-youtube { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .site-roadmap-list, .site-roadmap-list__sublist { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .site-roadmap-list { margin-top: 1rem; } .site-roadmap-list__item, .site-roadmap-list__subitem { border-top-width: 1px; border-top-style: solid; line-height: 1.4; padding-top: 0.25rem; margin-top: 0.25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .site-roadmap-list__item { border-top-color: #1b1b1b; border-top-style: solid; font-weight: bold; } .site-roadmap-list__item .usa-tag { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .site-roadmap-list__sublist { width: 100%; } .site-roadmap-list__sublist .site-roadmap-list__item { border-top-color: #e6e6e6; border-top-style: solid; font-weight: normal; } /** * callout expander classes */ .callout-button { text-transform: uppercase; font-size: 0.85em; letter-spacing: 1px; cursor: pointer; background-image: url("../img/angle-arrow-down-white.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-down-white.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; padding: 0 2em 0 0; border: none; background-repeat: no-repeat; background-size: 1.2rem; background-position: right 0 top 53%; background-color: transparent; } .callout-button.show-less { background-image: url("../img/angle-arrow-up-white.svg"), -webkit-gradient(linear, left top, left bottom, from(transparent), to(transparent)); background-image: url("../img/angle-arrow-up-white.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .callout-expanded a { color: white; } .callout-expanded a:visited { color: white; } .grid-section { background-color: white; margin-left: auto; margin-right: auto; max-width: 75rem; padding-left: 1rem; padding-right: 1rem; max-width: 64rem; padding-left: 1rem; padding-right: 1rem; } @media all and (min-width: 75em) { .grid-section { padding-left: 2rem; padding-right: 2rem; } } .write-a-story { margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 2.5rem 0; } .flex-space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .news-blurb h3 a::after, .card-header h3 a::after, .usa-media-block__background-image-landscape h3 a::after { content: " →"; } .card-container { height: 20rem; padding-top: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .card-header { bottom: 0.5rem; background-color: #121923; color: white; line-height: 1.3; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .card-header h3 { font-size: 2em; margin: 0; } .card-header .card-date { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .card-header a { text-decoration: none; padding-top: 2rem; padding-bottom: 2rem; color: white; } .card-header a:hover { color: #adadad; text-decoration: underline; } @media all and (min-width: 40em) { .card-header { margin-right: 2rem; margin-bottom: 1.5rem; padding-right: 2.5rem; } } .short-card { max-height: 15rem; margin-bottom: 1rem; } .short-card:last-child { margin-bottom: 0; } .short-card .card-header { background-color: transparent; margin-bottom: 0; } .small-header-card .card-header h3 { font-family: Source Sans Pro Web, Silka, Helvetica, Arial, sans; font-size: 1.33rem; } h2.section-header { color: #121923; margin-bottom: 0.5rem; padding-bottom: 0.5rem; line-height: 1.3; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #adadad; border-bottom-style: solid; } .news-blurb { outline-width: 1px; outline-style: solid; outline-color: #e6e6e6; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 1rem; padding-top: 1rem; } .news-blurb.large-blurb { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0; } /*# sourceMappingURL=uswds-custom.css.map */