/* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- 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 ---------------------------------------- */ /* ---------------------------------------- Prefix separator ---------------------------------------- Set the character the separates responsive and state prefixes from the main class name. The default (":") needs to be preceded by two backslashes to be properly escaped. ---------------------------------------- */ /* ---------------------------------------- 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 ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typesetting/overview/ ---------------------------------------- */ /* ---------------------------------------- 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 ---------------------------------------- */ /* ---------------------------------------- Broswer compatibility mode ---------------------------------------- When true, outputs woff and ttf font formats in addition to woff2 ---------------------------------------- */ /* ---------------------------------------- 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 declarations 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 .woff2 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 ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- 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 ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- 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 ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- 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 ---------------------------------------- */ /* ---------------------------------------- get-last() ---------------------------------------- Return the last item of a list, Return null if the value is null ---------------------------------------- */ /* ---------------------------------------- append-important() ---------------------------------------- Append `!important` to a list ---------------------------------------- */ /* ---------------------------------------- de-list() ---------------------------------------- Transform a one-element list or arglist into that single element. ---------------------------------------- (1) => 1 ((1)) => (1) ---------------------------------------- */ /* ---------------------------------------- uswds-error() ---------------------------------------- Allow the system to pass an error as text to test error states in unit testing ---------------------------------------- */ /* ---------------------------------------- error-not-token() ---------------------------------------- Returns a common not-a-token error. ---------------------------------------- */ /* ---------------------------------------- get-default() ---------------------------------------- Returns the default value from a map of project defaults get-default("bg-color") > $theme-body-background-color ---------------------------------------- */ /* ---------------------------------------- has-important() ---------------------------------------- Check to see if `!important` is being passed in a mixin's props ---------------------------------------- */ /* ---------------------------------------- map-collect() ---------------------------------------- Collect multiple maps into a single large map source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe ---------------------------------------- */ /* ---------------------------------------- map-deep-get() ---------------------------------------- @author Hugo Giraudel @access public @param {Map} $map - Map @param {Arglist} $keys - Key chain @return {*} - Desired value ---------------------------------------- */ /* ---------------------------------------- multi-cat() ---------------------------------------- Concatenate two lists ---------------------------------------- */ /* ---------------------------------------- remove() ---------------------------------------- Remove a value from a list ---------------------------------------- */ /* ---------------------------------------- smart-quote() ---------------------------------------- Quotes strings Inspects `px`, `xs`, and `xl` numbers Leaves bools as is ---------------------------------------- */ /* ---------------------------------------- str-replace() ---------------------------------------- Replace any substring with another string ---------------------------------------- */ /* ---------------------------------------- str-split() ---------------------------------------- Split a string at a given separator and convert into a list of substrings ---------------------------------------- */ /* ---------------------------------------- strip-unit() ---------------------------------------- Remove the unit of a length @author Hugo Giraudel @param {Number} $number - Number to remove unit from @return {Number} - Unitless number ---------------------------------------- */ /* ---------------------------------------- base-to-map() @TODO: Deprecate and delete ---------------------------------------- Convert a single base to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- to-number() ---------------------------------------- Casts a string into a number ---------------------------------------- @param {String | Number} $value - Value to be parsed @return {Number} ---------------------------------------- */ /* ---------------------------------------- unpack() ---------------------------------------- Create lists of single items from lists of lists. ---------------------------------------- (1, (2.1, 2.2), 3) --> (1, 2.1, 2.2, 3) ---------------------------------------- */ /* ---------------------------------------- get-system-color() ---------------------------------------- Derive a system color from its family, value, and vivid or a passed variable that is, itself, a list ---------------------------------------- */ /* ---------------------------------------- set-theme-color() ---------------------------------------- Derive a color from a system color token or a hex value ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- px-to-rem() ---------------------------------------- Converts a value in px to a value in 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 ---------------------------------------- */ /* ---------------------------------------- spacing-multiple() ---------------------------------------- Converts a spacing unit multiple into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- number-to-token() ---------------------------------------- Converts an integer or numeric value into a system value Ex: 0.5 --> '05' -1px --> 'neg-1px' ---------------------------------------- */ /* ---------------------------------------- units() ---------------------------------------- Converts a spacing unit into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- Project fonts ---------------------------------------- Collects font settings in a map for looping. ---------------------------------------- */ /* ---------------------------------------- Luminance ranges ---------------------------------------- */ /* ---------------------------------------- ns() ---------------------------------------- Add a namesspace of $type if that namespace is set to output ---------------------------------------- */ /* ---------------------------------------- Line height ---------------------------------------- */ /* ---------------------------------------- Measure ---------------------------------------- */ /* ---------------------------------------- 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 ---------------------------------------- */ /* ---------------------------------------- convert-to-font-type() ---------------------------------------- Converts a font-role token into a font-type token. Leaves font-type tokens unchanged. ---------------------------------------- */ /* ---------------------------------------- font-sources() ---------------------------------------- Outputs a list of font sources used in a @font-face declaration. $theme-font-browser-compatibility: true - output woff2, woff, ttf $theme-font-browser-compatibility: false - output woff2 @param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]] @output: string filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf) ---------------------------------------- */ /* ---------------------------------------- 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. ---------------------------------------- */ /* ---------------------------------------- normalize-type-scale() ---------------------------------------- Normalizes a specific face's optical size to a set target ---------------------------------------- */ /* ---------------------------------------- system-type-scale() ---------------------------------------- Get a value from the system type scale ---------------------------------------- */ /* ---------------------------------------- Easing ---------------------------------------- */ /* 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. */ /* ---------------------------------------- advanced-color() ---------------------------------------- Derive a color from a color triplet: [family], [grade], [variant] ---------------------------------------- */ /* ---------------------------------------- is-system-color-token() ---------------------------------------- Return whether a token is a system color token ---------------------------------------- */ /* ---------------------------------------- is-theme-color-token() ---------------------------------------- Return whether a token is a theme color token ---------------------------------------- */ /* ---------------------------------------- color-token-assignment() ---------------------------------------- Get the system token equivalent of any theme color token ---------------------------------------- */ /* ---------------------------------------- decompose() ---------------------------------------- Convert a color token into into a list of form [family], [grade], [variant] Vivid variants return "vivid" as the variant. If neither grade nor variant exists, returns 'null' ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- color-token-grade() ---------------------------------------- Returns the grade of a USWDS color token. Returns: color-grade color-token-grade("accent-warm") > "root" color-token-grade("accent-warm-vivid") > "root" color-token-grade("accent-warm-darker") > "darker" color-token-grade("red-50v") > 50 color-token-variant(("red", 50, "vivid")) > 50 ---------------------------------------- */ /* ---------------------------------------- is-color-token() ---------------------------------------- Returns whether a given string is a USWDS color token. ---------------------------------------- */ /* ---------------------------------------- pow() ---------------------------------------- Raises a unitless number to the power of another unitless number Includes helper functions ---------------------------------------- */ /* ---------------------------------------- Helper functions ---------------------------------------- */ /* factorial() ---------------------------------------- */ /* summation() ---------------------------------------- */ /* exp-maclaurin() ---------------------------------------- */ /* ln() ---------------------------------------- */ /* ---------------------------------------- calculate-grade() ---------------------------------------- Derive the grade equivalent any color, even non-token colors ---------------------------------------- */ /* ---------------------------------------- color-token-type() ---------------------------------------- Returns the type of a color token. Returns: "system" | "theme" ---------------------------------------- */ /* ---------------------------------------- color-token-variant() ---------------------------------------- Returns the variant of color token. Returns: "vivid" | false color-token-variant("accent-warm") > false color-token-variant("accent-warm-vivid") > "vivid" color-token-variant("red-50v") > "vivid" color-token-variant(("red", 50, "vivid")) > "vivid" ---------------------------------------- */ /* ---------------------------------------- magic-number() ---------------------------------------- Returns the magic number of two color grades. Takes numbers or color tokens. magic-number(50, 10) return: 40 magic-number("red-50", "red-10") return: 40 ---------------------------------------- */ /* ---------------------------------------- wcag-magic-number() ---------------------------------------- Returns the magic number of a specific wcag grade: "AA" "AA-Large" "AAA" wcag-magic-number("AA") > 50 ---------------------------------------- */ /* ---------------------------------------- is-accessible-magic-number() ---------------------------------------- Returns whether two grades achieve specified target color contrast Returns: true | false is-accessible-magic-number(10, 50, "AA") > false is-accessible-magic-number(10, 60, "AA") > true ---------------------------------------- */ /* ---------------------------------------- next-token() ---------------------------------------- Returns next "darker" or "lighter" color token of the same token type and variant. Returns: color-token | false next-token("accent-warm", "lighter") > "accent-warm-light" next-token("gray-10", "lighter") > "gray-5" next-token("gray-5", "lighter") > "white" next-token("white", "lighter") > false next-token("red-50v", "darker") > "red-60v" next-token("red-50", "darker") > "red-60" next-token("red-80v", "darker") > "red-90" next-token("red-90", "darker") > "black" next-token("white", "darker") > "gray-5" next-token("black", "lighter") > "gray-90" ---------------------------------------- */ /* ---------------------------------------- get-link-tokens-from-bg() ---------------------------------------- Get accessible link colors for a given background color returns: link-token, hover-token get-link-tokens-from-bg( "black", "red-60", "red-10", "AA") > "red-10", "red-5" get-link-tokens-from-bg( "black", "red-60v", "red-10v", "AA-large") > "red-60v", "red-50v" get-link-tokens-from-bg( "black", "red-5v", "red-60v", "AA") > "red-5v", "white" get-link-tokens-from-bg( "black", "white", "red-60v", "AA") > "white", "white" ---------------------------------------- */ /* ---------------------------------------- test-colors() ---------------------------------------- Check to see if all system colors fall between the proper relative luminance range for their grade. Has a couple quirks, as the luminance() function returns slightly different results than expected. ---------------------------------------- */ /* ---------------------------------------- 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)) ---------------------------------------- */ /* ---------------------------------------- USWDS Properties ---------------------------------------- */ /* ---------------------------------------- get-uswds-value() ---------------------------------------- Finds and outputs a value from the USWDS standard values. Used to build other standard utility functions and mixins. ---------------------------------------- */ /* ---------------------------------------- get-standard-values() ---------------------------------------- Gets a map of USWDS standard values for a property ---------------------------------------- */ /* ---------------------------------------- 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 ---------------------------------------- */ /* ---------------------------------------- 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. ---------------------------------------- */ /* ---------------------------------------- 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 */ /* 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 */ /* ---------------------------------------- USWDS with settings overrides ---------------------------------------- Uncomment the following lines and add a list of changed settings in the form $setting: value, ---------------------------------------- */ @keyframes slidein-left { from { transform: translateX(15rem); } to { transform: translateX(0); } } .usa-nav { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.06rem; line-height: 0.9; } @media all and (max-width: 63.99em) { .usa-nav { position: absolute; right: 0; position: absolute; bottom: 0; top: 0; position: fixed; background: white; border-right: 0; display: none; flex-direction: column; overflow-y: auto; padding: 1rem; width: 15rem; z-index: 500; } .usa-nav.is-visible { animation: slidein-left 0.3s ease-in-out; display: flex; } } @media all and (min-width: 64em) { .usa-nav { float: right; position: relative; } } @media all and (min-width: 64em) { .usa-nav .usa-search { margin-left: 1rem; } } .usa-nav .usa-accordion { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.06rem; line-height: 0.9; } @media all and (max-width: 63.99em) { .usa-nav__primary { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; margin-top: 1.5rem; order: 2; } .usa-nav__primary > li { margin-bottom: 0; max-width: unset; } .usa-nav__primary-item { border-top: 1px solid #dfe1e2; } .usa-nav__primary a:not(.usa-button) { display: block; padding: 0.5rem 1rem; text-decoration: none; } .usa-nav__primary a:not(.usa-button):hover { background-color: #f0f0f0; text-decoration: none; } .usa-nav__primary a:not(.usa-button):not(.usa-current) { color: #565c65; } .usa-nav__primary a:not(.usa-button):not(.usa-current):hover { color: #005ea2; } .usa-nav__primary a:not(.usa-button):not(.usa-current):focus { outline-offset: 0; } .usa-nav__primary .usa-current { position: relative; color: #005ea2; font-weight: 700; } .usa-nav__primary .usa-current::after { background-color: #005ea2; border-radius: 99rem; content: ""; display: block; position: absolute; bottom: 0.25rem; top: 0.25rem; width: 0.25rem; left: 0.25rem; } } @media all and (max-width: 63.99em) and (min-width: 40em) { .usa-nav__primary .usa-current { position: relative; } .usa-nav__primary .usa-current::after { background-color: #005ea2; border-radius: 99rem; content: ""; display: block; position: absolute; bottom: 0.25rem; top: 0.25rem; width: 0.25rem; left: 0; } } @media all and (max-width: 63.99em) { .usa-nav__primary a { padding-bottom: 0.75rem; padding-top: 0.75rem; } } @media all and (min-width: 64em) { .usa-nav__primary { display: flex; } } .usa-nav__primary .usa-nav__primary-item a { text-decoration: none; } .usa-nav__primary > .usa-nav__primary-item { line-height: 1.1; } @media all and (min-width: 64em) { .usa-nav__primary > .usa-nav__primary-item { font-size: 0.93rem; line-height: 0.9; } } @media all and (min-width: 64em) { .usa-nav__primary > .usa-nav__primary-item > a { line-height: 0.9; padding: 1rem; color: #565c65; display: block; font-weight: 700; } .usa-nav__primary > .usa-nav__primary-item > a:hover { color: #005ea2; } } @media all and (min-width: 64em) { .usa-nav__primary a { padding-bottom: 0.5rem; padding-top: 0.5rem; } } .usa-nav__primary button { color: #005ea2; text-decoration: underline; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; font-weight: normal; margin: 0; padding: 0; text-align: left; position: relative; color: #565c65; font-weight: normal; line-height: 1.1; padding: 0.75rem 1rem; text-decoration: none; } .usa-nav__primary button:visited { color: #54278f; } .usa-nav__primary button:hover { color: #1a4480; } .usa-nav__primary button:active { color: #162e51; } .usa-nav__primary button:focus { outline: 0.25rem solid #2491ff; outline-offset: 0; } .usa-nav__primary button:hover, .usa-nav__primary button.usa-button--hover, .usa-nav__primary button:disabled:hover, .usa-nav__primary button[aria-disabled=true]:hover, .usa-nav__primary button:disabled.usa-button--hover, .usa-nav__primary button[aria-disabled=true].usa-button--hover, .usa-nav__primary button:active, .usa-nav__primary button.usa-button--active, .usa-nav__primary button:disabled:active, .usa-nav__primary button[aria-disabled=true]:active, .usa-nav__primary button:disabled.usa-button--active, .usa-nav__primary button[aria-disabled=true].usa-button--active, .usa-nav__primary button:disabled:focus, .usa-nav__primary button[aria-disabled=true]:focus, .usa-nav__primary button:disabled.usa-focus, .usa-nav__primary button[aria-disabled=true].usa-focus, .usa-nav__primary button:disabled, .usa-nav__primary button[aria-disabled=true], .usa-nav__primary button.usa-button--disabled { background-color: transparent; box-shadow: none; text-decoration: underline; } .usa-nav__primary button.usa-button--hover { color: #1a4480; } .usa-nav__primary button.usa-button--active { color: #162e51; } .usa-nav__primary button:disabled, .usa-nav__primary button[aria-disabled=true], .usa-nav__primary button:disabled:hover, .usa-nav__primary button[aria-disabled=true]:hover, .usa-nav__primary button[aria-disabled=true]:focus { color: #757575; } @media (forced-colors: active) { .usa-nav__primary button:disabled, .usa-nav__primary button[aria-disabled=true], .usa-nav__primary button:disabled:hover, .usa-nav__primary button[aria-disabled=true]:hover, .usa-nav__primary button[aria-disabled=true]:focus { color: GrayText; } } @media all and (min-width: 64em) { .usa-nav__primary button { line-height: 0.9; padding: 1rem; font-size: 0.93rem; font-weight: 700; } } @media (forced-colors: active) { .usa-nav__primary button { forced-color-adjust: auto; } } .usa-nav__primary button:hover { color: #005ea2; background-color: #f0f0f0; text-decoration: none; } @media all and (min-width: 64em) { .usa-nav__primary button:hover { background-color: transparent; } } .usa-nav__primary button[aria-expanded=false], .usa-nav__primary button[aria-expanded=false]:hover, .usa-nav__primary button[aria-expanded=true], .usa-nav__primary button[aria-expanded=true]:hover { background-image: none; } @media (forced-colors: active) { .usa-nav__primary button[aria-expanded=false]::before, .usa-nav__primary button[aria-expanded=false]:hover::before, .usa-nav__primary button[aria-expanded=true]::before, .usa-nav__primary button[aria-expanded=true]:hover::before { content: none; } } .usa-nav__primary button[aria-expanded=false] span::after { background-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/add.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.25rem 1.25rem; display: inline-block; height: 1.25rem; width: 1.25rem; content: ""; vertical-align: middle; margin-left: auto; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .usa-nav__primary button[aria-expanded=false] span::after { background: none; background-color: ButtonText; -webkit-mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/add.svg"), linear-gradient(transparent, transparent); mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/add.svg"), linear-gradient(transparent, transparent); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.25rem 1.25rem; mask-size: 1.25rem 1.25rem; } } .usa-nav__primary button[aria-expanded=false] span::after { position: absolute; right: 0; } .usa-nav__primary button[aria-expanded=false] span::after:hover { background-color: buttonText; } @media all and (min-width: 64em) { .usa-nav__primary button[aria-expanded=false] span::after { background-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_more.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1rem 1rem; display: inline-block; height: 1rem; width: 1rem; content: ""; vertical-align: middle; margin-left: auto; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .usa-nav__primary button[aria-expanded=false] span::after { background: none; background-color: ButtonText; -webkit-mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_more.svg"), linear-gradient(transparent, transparent); mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_more.svg"), linear-gradient(transparent, transparent); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1rem 1rem; mask-size: 1rem 1rem; } } .usa-nav__primary button[aria-expanded=false] span::after { right: 0.75rem; } } @media all and (min-width: 64em) { .usa-nav__primary button[aria-expanded=false]:hover span::after { background-color: #1a4480; } } @media (min-width: 64em) and (forced-colors: active) { .usa-nav__primary button[aria-expanded=false]:hover span::after { background-color: ButtonText; } } .usa-nav__primary button[aria-expanded=true] span::after { background-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/remove.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.25rem 1.25rem; display: inline-block; height: 1.25rem; width: 1.25rem; content: ""; vertical-align: middle; margin-left: auto; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .usa-nav__primary button[aria-expanded=true] span::after { background: none; background-color: ButtonText; -webkit-mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/remove.svg"), linear-gradient(transparent, transparent); mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/remove.svg"), linear-gradient(transparent, transparent); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.25rem 1.25rem; mask-size: 1.25rem 1.25rem; } } .usa-nav__primary button[aria-expanded=true] span::after { position: absolute; right: 0; } @media (forced-colors: active) { .usa-nav__primary button[aria-expanded=true] span::after { background-color: ButtonText; } } @media all and (min-width: 64em) { .usa-nav__primary button[aria-expanded=true] { background-image: none; background-color: #162e51; color: white; } } @media all and (min-width: 64em) and (min-width: 64em) { .usa-nav__primary button[aria-expanded=true] span::after { background-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_less.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1rem 1rem; display: inline-block; height: 1rem; width: 1rem; content: ""; vertical-align: middle; margin-left: auto; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .usa-nav__primary button[aria-expanded=true] span::after { background: none; background-color: ButtonText; -webkit-mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_less.svg"), linear-gradient(transparent, transparent); mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/expand_less.svg"), linear-gradient(transparent, transparent); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1rem 1rem; mask-size: 1rem 1rem; } } .usa-nav__primary button[aria-expanded=true] span::after { right: 0.75rem; background-color: white; } } @media (min-width: 64em) and (min-width: 64em) and (forced-colors: active) { .usa-nav__primary button[aria-expanded=true] span::after { background-color: ButtonText; } } @media all and (min-width: 64em) { .usa-nav__primary .usa-accordion__button span { margin-right: 0; padding-right: 1rem; } } .usa-nav__secondary { margin-top: 1rem; } @media all and (min-width: 64em) { .usa-nav__secondary { flex-direction: column; align-items: flex-end; bottom: 4rem; display: flex; font-size: 0.93rem; margin-top: 0.5rem; min-width: calc( 27ch + 3rem ); position: absolute; right: 2rem; } } .usa-nav__secondary .usa-search { margin-top: 1rem; width: 100%; } @media all and (min-width: 64em) { .usa-nav__secondary .usa-search { margin-left: 0; margin-top: 0.5rem; } } .usa-nav__secondary-links { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; line-height: 1.3; margin-top: 1.5rem; } @media all and (min-width: 64em) { .usa-nav__secondary-links { -moz-column-gap: 0.5rem; column-gap: 0.5rem; display: flex; flex-flow: row nowrap; line-height: 0.9; margin-bottom: 0.25rem; margin-top: 0; } } @media all and (min-width: 64em) { .usa-nav__secondary-links .usa-nav__secondary-item { padding-left: 0.25rem; } .usa-nav__secondary-links .usa-nav__secondary-item + .usa-nav__secondary-item { border-left: 1px solid #dfe1e2; padding-left: 0.5rem; } } .usa-nav__secondary-links a { color: #71767a; display: inline-block; font-size: 0.93rem; text-decoration: none; } .usa-nav__secondary-links a:hover { color: #005ea2; text-decoration: underline; } @media all and (max-width: 63.99em) { .usa-nav__submenu { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; margin: 0; } .usa-nav__submenu > li { margin-bottom: 0; max-width: unset; } .usa-nav__submenu-item { border-top: 1px solid #dfe1e2; font-size: 0.93rem; } .usa-nav__submenu .usa-current::after { display: none; } } @media all and (max-width: 63.99em) and (min-width: 40em) { .usa-nav__submenu .usa-current::after { display: none; } } @media all and (max-width: 63.99em) { .usa-nav__submenu a:not(.usa-button) { padding-left: 2rem; } } @media all and (max-width: 63.99em) { .usa-nav__submenu .usa-nav__submenu a:not(.usa-button) { padding-left: 3rem; } } @media all and (max-width: 63.99em) { .usa-nav__submenu .usa-nav__submenu .usa-nav__submenu a:not(.usa-button) { padding-left: 4rem; } } @media all and (min-width: 64em) { .usa-nav__submenu { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; background-color: #162e51; width: 15rem; position: absolute; z-index: 400; } } .usa-nav__submenu[aria-hidden=true] { display: none; } @media all and (min-width: 64em) { .usa-nav__submenu .usa-nav__submenu-item a { color: white; line-height: 1.3; display: block; padding: 0.5rem; } .usa-nav__submenu .usa-nav__submenu-item a:focus { outline-offset: -0.25rem; } .usa-nav__submenu .usa-nav__submenu-item a:hover { color: white; text-decoration: underline; } } .usa-nav__submenu-list { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .usa-nav__submenu-list > li { margin-bottom: 0; max-width: unset; } .usa-nav__submenu-list .usa-nav__submenu-list-item { margin: 0; font-size: 0.93rem; } .usa-nav__submenu-list .usa-nav__submenu-list-item a { line-height: 1.3; } .usa-nav__close { color: #005ea2; text-decoration: underline; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; font-weight: normal; margin: 0; padding: 0; text-align: left; height: 3rem; width: 3rem; background-image: none; color: currentColor; flex: none; float: right; margin: -0.75rem -1rem 1rem auto; text-align: center; } .usa-nav__close:visited { color: #54278f; } .usa-nav__close:hover { color: #1a4480; } .usa-nav__close:active { color: #162e51; } .usa-nav__close:focus { outline: 0.25rem solid #2491ff; outline-offset: 0; } .usa-nav__close:hover, .usa-nav__close.usa-button--hover, .usa-nav__close:disabled:hover, .usa-nav__close[aria-disabled=true]:hover, .usa-nav__close:disabled.usa-button--hover, .usa-nav__close[aria-disabled=true].usa-button--hover, .usa-nav__close:active, .usa-nav__close.usa-button--active, .usa-nav__close:disabled:active, .usa-nav__close[aria-disabled=true]:active, .usa-nav__close:disabled.usa-button--active, .usa-nav__close[aria-disabled=true].usa-button--active, .usa-nav__close:disabled:focus, .usa-nav__close[aria-disabled=true]:focus, .usa-nav__close:disabled.usa-focus, .usa-nav__close[aria-disabled=true].usa-focus, .usa-nav__close:disabled, .usa-nav__close[aria-disabled=true], .usa-nav__close.usa-button--disabled { background-color: transparent; box-shadow: none; text-decoration: underline; } .usa-nav__close.usa-button--hover { color: #1a4480; } .usa-nav__close.usa-button--active { color: #162e51; } .usa-nav__close:disabled, .usa-nav__close[aria-disabled=true], .usa-nav__close:disabled:hover, .usa-nav__close[aria-disabled=true]:hover, .usa-nav__close[aria-disabled=true]:focus { color: #757575; } @media (forced-colors: active) { .usa-nav__close:disabled, .usa-nav__close[aria-disabled=true], .usa-nav__close:disabled:hover, .usa-nav__close[aria-disabled=true]:hover, .usa-nav__close[aria-disabled=true]:focus { color: GrayText; } } @media (forced-colors: active) { .usa-nav__close::before { background-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/close.svg"); background-repeat: no-repeat; background-position: center center; background-size: 1.25rem 1.25rem; display: inline-block; height: 1.25rem; width: 1.25rem; content: ""; vertical-align: middle; margin-right: auto; } @supports ((-webkit-mask: url("")) or (mask: url(""))) { .usa-nav__close::before { background: none; background-color: ButtonText; -webkit-mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/close.svg"), linear-gradient(transparent, transparent); mask-image: url("/themes/custom/agileana_redesign/dist/uswds/img/usa-icons/close.svg"), linear-gradient(transparent, transparent); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.25rem 1.25rem; mask-size: 1.25rem 1.25rem; } } .usa-nav__close::before { background-color: buttonText; } } .usa-nav__close:hover { color: currentColor; text-decoration: none; } @media all and (min-width: 64em) { .usa-nav__close { display: none; } } .usa-nav__close img { width: 1.5rem; } @media (forced-colors: active) { .usa-nav__close img { display: none; } } .usa-nav__close + * { clear: both; } .usa-js-mobile-nav--active { overflow: hidden; } .agileana-header .usa-navbar { justify-content: space-between; border: none; height: 3.25rem; } @media (min-width: 480px) { .agileana-header .usa-navbar { height: 3.3125rem; } } @media all and (min-width: 64em) { .agileana-header .usa-navbar { height: 3.625rem; } } .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button) { font-family: var(--font-roboto-regular); font-size: 19px; line-height: 1.35; letter-spacing: 0.1px; color: var(--primary-blue-medium); } @media all and (max-width: 63.99em) { .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button) { color: var(--primary-white); } } .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).is-active, .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).usa-current { position: relative; } .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).is-active::after, .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).usa-current::after { content: ""; display: block; position: absolute; height: 2px; background-color: var(--primary-yellow); top: auto; left: 1rem; right: 1rem; bottom: 0.95rem; } @media all and (max-width: 63.99em) { .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).is-active::after, .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button).usa-current::after { width: 40px; bottom: 0.5rem; } } .agileana-header .usa-nav__primary > .usa-nav__primary-item > a:not(.usa-button):hover { color: var(--primary-blue-medium); } .agileana-header .usa-nav .usa-logo { display: none; } @media all and (max-width: 63.99em) { .agileana-header .usa-nav { width: 100%; background-color: var(--bluescale-900); } .agileana-header .usa-nav.is-visible { display: block; } .agileana-header .usa-nav .usa-logo { display: inline-block; height: 50px; } .agileana-header .usa-nav__close { margin: 0; padding: 12px; margin-top: -12px; } .agileana-header .usa-nav .block-system-menu-blockmain { flex: 1 0 100%; } } @media all and (max-width: 63.99em) { .usa-nav { top: var(--drupal-displace-offset-top, 0px); } } @media all and (min-width: 64em) { .usa-nav__submenu-list { display: grid; grid-template-columns: repeat(4, auto); grid-column-gap: 2rem; } .usa-header--basic .usa-nav__primary-item:has(.usa-megamenu):last-of-type { position: static; } } .usa-header--extended .usa-nav__primary .usa-megamenu.usa-nav__submenu::before, .usa-header--extended .usa-nav__primary .usa-megamenu.usa-nav__submenu::after { width: calc(50vw - 41.75rem); } /*# sourceMappingURL=usa_main_menu.css.map */