@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); /* Developed by Directors Investment Group * https://www.dig.family.com/ */ /* Generic This is where reset, normalize & box-sizing styles go. */ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } .dnd-section > .row-fluid{ /* Might need a token for this value to adjust the module max width across different brand sites. */ max-width: 100%; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .container-fluid { margin: 0 auto; padding: 0; } .container-fluid .ds-module{ margin: 0; padding: 0; display: flex; justify-content: center; } .container-fluid .ds-module > div{ margin: 0; padding: 32px 0px; max-width: 1280px; } @media screen and (max-width: 1344px) { .container-fluid .ds-module > div{ padding: 32px 64px } } @media screen and (max-width: 768px) { .container-fluid .ds-module > div{ padding: 32px 32px } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Foundation The base foundational elements of the design system. Used to setup type face, colors, spacing and breakpoint tokens. */ :root { /* Updated Typography Sizes - Modified Octave Scale */ /* Primitive tokens will not have the ds prefix. */ --font-size-100: 8px; --font-size-125: 10px; --font-size-150: 12px; --font-size-175: 14px; --font-size-200: 16px; --font-size-225: 18px; --font-size-275: 22px; --font-size-325: 26px; --font-size-350: 28px; --font-size-400: 32px; --font-size-450: 36px; --font-size-500: 40px; --font-size-550: 44px; --font-size-675: 54px; --font-size-850: 68px; } /** * _typography.css * * Configuration and assignment of base typography tokens. * Author: Justin Thorpe * Author URI: https://www.dig.family.com/ * Version: 0.2.0 * / /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Typography - Font Family # Typography - Font Style # Typography - Font Weight # Typography - Font Spacing --------------------------------------------------------------*/ :root{ /*---------- Typography - Font Family ----------*/ --ds-font-family-pt-sans: 'PT Sans', sans-serif; --ds-font-family-open-sans: 'Open Sans', sans-serif; --ds-font-family-cinzel: 'Cinzel', sans-serif; --ds-font-family-crimson: 'Crimson Pro', sans-serif; --ds-font-family-ibm-plex: 'IBM Plex Sans', sans-serif; --ds-font-family-poppins: "Poppins", sans-serif; --ds-font-family-literata: "Literata", sans-serif; --ds-font-family-montserrat: "Montserrat", sans-serif; --ds-font-family-hepta-slab: "Hepta Slab", sans-serif; /*---------- Typography - Font Style ----------*/ --ds-font-style-normal: normal; --ds-font-style-italic: italic; /*---------- Typography - Font Weight ----------*/ --ds-font-weight-100: 100; --ds-font-weight-200: 200; --ds-font-weight-300: 300; --ds-font-weight-400: 400; --ds-font-weight-500: 500; --ds-font-weight-600: 600; --ds-font-weight-700: 700; --ds-font-weight-800: 800; --ds-font-weight-900: 900; /*---------- Typography - Font Sizes ---------- */ --ds-font-size-h100: 23px; --ds-font-size-h200: 29px; --ds-font-size-h300: 36px; --ds-font-size-h400: 44px; --ds-font-size-h500: 55px; --ds-font-size-h600: 69px; --ds-font-size-device100: 20px; --ds-font-size-device200: 25px; --ds-font-size-device300: 30px; --ds-font-size-device400: 35px; --ds-font-size-device500: 40px; --ds-font-size-device600: 45px; --ds-font-size-body100: 15px; --ds-font-size-body200: 18px; --ds-font-size-body300: 23px; --ds-font-size-label100: 12px; --ds-font-size-label200: 15px; --ds-font-size-micro100: 8px; --ds-font-size-micro200: 10px; --ds-font-size-micro300: 12px; /* Updated Typography Tokens */ /* --ds-font-size-display350: var(--font-size-350); --ds-font-size-display375: var(--font-size-375); --ds-font-size-display400: var(--font-size-400); --ds-font-size-display450: var(--font-size-450); --ds-font-size-display500: var(--font-size-500); --ds-font-size-display550: var(--font-size-550); --ds-font-size-display675: var(--font-size-675); --ds-font-size-display850: var(--font-size-850); --ds-font-size-heading-01: var(--font-size-400); --ds-font-size-heading-02: var(--font-size-350); --ds-font-size-heading-03: var(--font-size-325); --ds-font-size-heading-04: var(--font-size-275); --ds-font-size-heading-05: var(--font-size-225); --ds-font-size-heading-06: var(--font-size-200); --ds-font-size-body225: var(--font-size-225); --ds-font-size-body200: var(--font-size-200); --ds-font-size-body175: var(--font-size-175); --ds-font-size-label175: var(--font-size-175); --ds-font-size-label150: var(--font-size-150); --ds-font-size-label125: var(--font-size-125); */ } /** * _color.css * * Configuration and assignment of base color tokens. * Author: Justin Thorpe * Author URI: https://www.dig.family.com/ * Version: 0.2.0 * / /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Color - Brand Colors ## Passare - Midnight - Ocean - Sunrise # Color - System Colors ## Red ## Green ## Blue ## Yellow --------------------------------------------------------------*/ :root{ /*-------------------------------------------------------------- >>> Color - Brand Colors: --------------------------------------------------------------*/ /*---------- FDL ----------*/ /* FDL Blue (Neutral) */ --ds-fdl-blue0: #FFFFFF; --ds-fdl-blue100: #E9EBEF; --ds-fdl-blue200: #D2D8DF; --ds-fdl-blue300: #BCC4CF; --ds-fdl-blue400: #8F9DB0; --ds-fdl-blue500: #627590; --ds-fdl-blue600: #354E70; --ds-fdl-blue700: #1F3A60; --ds-fdl-blue800: #192E4D; --ds-fdl-blue900: #13233A; --ds-fdl-blue1000: #0C1726; /* Jade (Brand) */ --ds-jade100: #E9F7F2; --ds-jade200: #D3EFE5; --ds-jade300: #BCE6D8; --ds-jade400: #90D6BF; --ds-jade500: #64C6A5; --ds-jade600: #37B58B; --ds-jade700: #21AD7E; --ds-jade800: #1A8A65; --ds-jade900: #14684C; --ds-jade1000: #0D4532; /* Current (Default) */ --ds-current100: #E8F2F7; --ds-current200: #D1E5EE; --ds-current300: #BAD9E6; --ds-current400: #8DBFD5; --ds-current500: #5FA5C4; --ds-current600: #318CB3; --ds-current700: #1A7FAB; --ds-current800: #156689; --ds-current900: #104C67; --ds-current1000: #0A3344; /* Cascade (Accent) */ --ds-cascade100: #F7FBFB; --ds-cascade200: #EFF7F7; --ds-cascade300: #E8F3F2; --ds-cascade400: #D8ECEA; --ds-cascade500: #C8E4E2; --ds-cascade600: #B9DCD9; --ds-cascade700: #B1D8D5; --ds-cascade800: #8EADAA; --ds-cascade900: #6A8280; --ds-cascade1000: #475655; /* Granite (Accent) */ --ds-granite100: #F8F8F8; --ds-granite200: #F1F1F1; --ds-granite300: #EAEAE9; --ds-granite400: #DCDCDB; --ds-granite500: #CDCECD; --ds-granite600: #BFC0BE; --ds-granite700: #B8B9B7; --ds-granite800: #939492; --ds-granite900: #6E6F6E; --ds-granite1000: #4A4A49; /* Whitewater (Accent) */ --ds-whitewater100: #FEFEFE; --ds-whitewater200: #FCFCFD; --ds-whitewater300: #FBFBFC; --ds-whitewater400: #F8F8FA; --ds-whitewater500: #F5F5F7; --ds-whitewater600: #F2F2F5; --ds-whitewater700: #F0F1F4; --ds-whitewater800: #C0C1C3; --ds-whitewater900: #909192; --ds-whitewater1000: #606062; /*---------- DIG ----------*/ /* Denim (Neutral) */ --ds-denim0: #FFFFFF; --ds-denim100: #E7E9EB; --ds-denim200: #CFD2D7; --ds-denim300: #B7BCC3; --ds-denim400: #88909B; --ds-denim500: #586373; --ds-denim600: #28364B; --ds-denim700: #102037; --ds-denim800: #0D1A2C; --ds-denim900: #0A1321; --ds-denim1000: #060D16; /* Sunset (Brand) */ --ds-sunset100: #F9F2E9; --ds-sunset200: #F4E6D3; --ds-sunset300: #EED9BD; --ds-sunset400: #E3C091; --ds-sunset500: #D7A765; --ds-sunset600: #CC8E39; --ds-sunset700: #C68123; --ds-sunset800: #9E671C; --ds-sunset900: #774D15; --ds-sunset1000: #4F340E; /* Oak (Default) */ --ds-oak100: #E8EDEB; --ds-oak200: #D0DAD6; --ds-oak300: #B9C8C2; --ds-oak400: #8AA39A; --ds-oak500: #5B7E71; --ds-oak600: #2C5948; --ds-oak700: #154734; --ds-oak800: #11392A; --ds-oak900: #0D2B1F; --ds-oak1000: #081C15; /* Rust (Accent) */ --ds-rust100: #F8EEEC; --ds-rust200: #F1DCD9; --ds-rust300: #EACBC5; --ds-rust400: #DDA89F; --ds-rust500: #CF8579; --ds-rust600: #C16252; --ds-rust700: #BA503F; --ds-rust800: #954032; --ds-rust900: #703026; --ds-rust1000: #4A2019; /* Stone (Accent) */ --ds-stone100: #FCFCFB; --ds-stone200: #F9F8F6; --ds-stone300: #F7F5F2; --ds-stone400: #F1EEE9; --ds-stone500: #EBE7E0; --ds-stone600: #E6E0D7; --ds-stone700: #E3DCD2; --ds-stone800: #B6B0A8; --ds-stone900: #88847E; --ds-stone1000: #5B5854; /* Sagebrush (Accent) */ --ds-sagebrush100: #F5F5F2; --ds-sagebrush200: #EBEBE4; --ds-sagebrush300: #E1E1D7; --ds-sagebrush400: #CECEBC; --ds-sagebrush500: #BABAA1; --ds-sagebrush600: #A6A686; --ds-sagebrush700: #9C9C79; --ds-sagebrush800: #7D7D61; --ds-sagebrush900: #5E5E49; --ds-sagebrush1000: #3E3E30; /*---------- Passare ----------*/ /* Midnight (Neutral) */ --ds-midnight0: #FFFFFF; --ds-midnight100: #F4F5F7; --ds-midnight200: #E8EBEF; --ds-midnight300: #BFC6D2; --ds-midnight400: #96A2B5; --ds-midnight500: #6C7E98; --ds-midnight600: #43597B; --ds-midnight700: #1A355E; --ds-midnight800: #162D50; --ds-midnight900: #122542; --ds-midnight1000: #0E1D34; /* Sunrise (Brand) */ --ds-sunrise100: #FDF0ED; --ds-sunrise200: #F9D8D3; --ds-sunrise300: #F5C1B9; --ds-sunrise400: #F1AA9E; --ds-sunrise500: #EE9384; --ds-sunrise600: #EA7B69; --ds-sunrise700: #E6644F; --ds-sunrise800: #B8503F; --ds-sunrise900: #8A3C2F; --ds-sunrise1000: #5C2820; /* Ocean (Default) */ --ds-ocean100: #ECF1F4; --ds-ocean200: #CEDCE3; --ds-ocean300: #B1C7D2; --ds-ocean400: #94B3C1; --ds-ocean500: #779EB0; --ds-ocean600: #59899F; --ds-ocean700: #3C748E; --ds-ocean800: #305D72; --ds-ocean900: #244655; --ds-ocean1000: #182E39; /*-------------------------------------------------------------- >>> Color - System Colors: --------------------------------------------------------------*/ /*---------- Red ----------*/ --ds-red100: #FAEAE7; --ds-red200: #F3CBC4; --ds-red300: #EBABA0; --ds-red400: #E48C7D; --ds-red500: #DD6D59; --ds-red600: #D54D36; --ds-red700: #CE2E12; --ds-red800: #A5250E; --ds-red900: #7C1C0B; --ds-red1000: #521207; /*---------- Green ---------- */ --ds-green100: #ECF9EB; --ds-green200: #CFEFCE; --ds-green300: #B1E5B0; --ds-green400: #94DC92; --ds-green500: #77D274; --ds-green600: #5AC957; --ds-green700: #3DBF39; --ds-green800: #31992E; --ds-green900: #257322; --ds-green1000: #184C17; /*---------- Blue ----------*/ --ds-blue100: #E6F5FC; --ds-blue200: #BFE7F8; --ds-blue300: #99D8F3; --ds-blue400: #73CAEF; --ds-blue500: #4DBBEB; --ds-blue600: #26ADE6; --ds-blue700: #009EE2; --ds-blue800: #007EB5; --ds-blue900: #005F88; --ds-blue1000: #003F5A; /*---------- Yellow ----------*/ --ds-yellow100: #FEFAE6; --ds-yellow200: #FCF2C0; --ds-yellow300: #FBEB9B; --ds-yellow400: #F9E375; --ds-yellow500: #F7DB4F; --ds-yellow600: #F6D42A; --ds-yellow700: #F4CC04; --ds-yellow800: #C3A303; --ds-yellow900: #927A02; --ds-yellow1000: #625202; } /** * _spacing.css * * Configuration and assignment of base spacing tokens. * Author: Justin Thorpe * Author URI: https://www.dig.family.com/ * Version: 0.2 * / /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Space --------------------------------------------------------------*/ :root{ /*-------------------------------------------------------------- >>> Spacing - Base Measurements --------------------------------------------------------------*/ /* Spacing */ --ds-space-00: 0px; --ds-space-01: 4px; --ds-space-02: 8px; --ds-space-03: 12px; --ds-space-04: 16px; --ds-space-05: 24px; --ds-space-06: 32px; --ds-space-07: 48px; --ds-space-08: 64px; --ds-space-09: 80px; --ds-space-10: 96px; --ds-space-11: 112px; --ds-space-12: 128px; } /** * _breakpoints.css * * Configuration and assignment of breakpoint tokens. * Author: Justin Thorpe * Version: 0.1.0 * / /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Breakpoints --------------------------------------------------------------*/ :root{ /*-------------------------------------------------------------- >>> Breakpoints - Brand Layout: --------------------------------------------------------------*/ --ds-breakpoint100: 375px; --ds-breakpoint200: 480px; --ds-breakpoint300: 640px; --ds-breakpoint400: 768px; --ds-breakpoint500: 1024px; --ds-breakpoint600: 1280px; --ds-breakpoint700: 1440px; --ds-breakpoint800: 1920px; } /* Components Specific pieces of UI that are stylized. Typically used for global partial styling */ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .module-container{ margin: 0 24px; } /* Utilities Helper classes with ability to override anything that comes before it */ /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* Settings Settings file for overwritting theme settings */ /** * Settings.css * * Configuration and assignment of design system tokens. * Author: Justin Thorpe * Author URI: https://www.dig.family.com/ * Version: 0.2.0 * / /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Tokens # Breakpoints # Colors # Spacing # Typography # Form Inputs --------------------------------------------------------------*/ /*-------------------------------------------------------------- >>> Color: --------------------------------------------------------------*/ :root{ /* Brand - Sunset */ --ds-brand100: var(--ds-sunset100); --ds-brand200: var(--ds-sunset200); --ds-brand300: var(--ds-sunset300); --ds-brand400: var(--ds-sunset400); --ds-brand500: var(--ds-sunset500); --ds-brand600: var(--ds-sunset600); --ds-brand700: var(--ds-sunset700); --ds-brand800: var(--ds-sunset800); --ds-brand900: var(--ds-sunset900); --ds-brand1000: var(--ds-sunset1000); /* Neutral - Denim */ --ds-neutral0: var(--ds-denim0); --ds-neutral100: var(--ds-denim100); --ds-neutral200: var(--ds-denim200); --ds-neutral300: var(--ds-denim300); --ds-neutral400: var(--ds-denim400); --ds-neutral500: var(--ds-denim500); --ds-neutral600: var(--ds-denim600); --ds-neutral700: var(--ds-denim700); --ds-neutral800: var(--ds-denim800); --ds-neutral900: var(--ds-denim900); --ds-neutral1000: var(--ds-denim1000); --ds-neutral1100: var(--ds-denim1100); /* Neutral Interactive - Oak */ --ds-neutralInteractive100: var(--ds-oak100); --ds-neutralInteractive200: var(--ds-oak200); --ds-neutralInteractive300: var(--ds-oak300); --ds-neutralInteractive400: var(--ds-oak400); --ds-neutralInteractive500: var(--ds-oak500); --ds-neutralInteractive600: var(--ds-oak600); --ds-neutralInteractive700: var(--ds-oak700); --ds-neutralInteractive800: var(--ds-oak800); --ds-neutralInteractive900: var(--ds-oak900); --ds-neutralInteractive1000: var(--ds-oak1000); /* Icon Color */ --ds-icon-color-brand: var(--ds-brand700); --ds-icon-color-default: var(--ds-neutral0); --ds-icon-color-neutral: var(--ds-neutral700); --ds-icon-color-neutralInteractive: var(--ds-neutralInteractive700); /* Filters */ --ds-neutralFilter: brightness(0) saturate(100%) invert(8%) sepia(56%) saturate(1589%) hue-rotate(192deg) brightness(91%) contrast(93%); /* Modal Opacity */ --ds-modalOpacity: #2c594840; /*-------------------------------------------------------------- >>> Typography: --------------------------------------------------------------*/ --ds-font-family-heading: var(--ds-font-family-hepta-slab); --ds-font-family-body: var(--ds-font-family-montserrat); --ds-font-weight-normal: var(--ds-font-weight-400); --ds-font-weight-bold: var(--ds-font-weight-700); --ds-font-color: var(--ds-neutralInteractive700); /*-------------------------------------------------------------- >>> Buttons: --------------------------------------------------------------*/ --ds-button-font-size: var(--ds-font-size-body200); --ds-button-font-family: var(--ds-font-family-montserrat); --ds-button-font-weight: var(--ds-font-weight-600); /*-------------------------------------------------------------- >>> Form Inputs --------------------------------------------------------------*/ /* Radio and Checkbox Inputs */ --ds-selector-border: 2px solid var(--ds-neutral500); --ds-selector-margin: 0px; --ds-selector-padding: 8px; --ds-selector-transition: color .3s ease-in-out, background-color .3s ease-in-out, box-shadow .3s ease-in-out; --ds-selector-radio-radius: 100%; --ds-selector-checkbox-radius: 7px; --ds-selector-box-shadow: 0 0 0 0 #ffffff00 inset; --ds-selector-box-shadow-checked: 0 0 0 2px var(--ds-neutral0) inset; --ds-selector-background-checked: var(--ds-neutral700); --ds-selector-background-active: var(--ds-neutral200); --ds-selector-width: 26px; --ds-selector-height: 26px; --ds-selector-gap-column: 20px; --ds-selector-gap-row: 16px; /*-------------------------------------------------------------- >>> Assets --------------------------------------------------------------*/ /* Accents */ --ds-accent-tear--primary: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/accents/paper_tear.png); --ds-accent-tear: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/accents/DIG-Paper-Tear.svg); --ds-accent-icon: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/accents/paper-2.svg); /* Textures */ --ds-texture-denim: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/textures/Denim.png); /* Icons */ --ds-icon-location: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/icons/career_location.svg); /*-------------------------------------------------------------- >>> Module Alias Tokens --------------------------------------------------------------*/ /* CTA Simple */ --ds-cta-simple-accent-tear: var(--ds-accent-tear); /* Ribbon Spotlight */ --ds-ribbon-spotlight-accent-tear: var(--ds-accent-tear); } /*-------------------------------------------------------------- >>> Module Alias Imports --------------------------------------------------------------*/ /* =========================================================== Alias Tokens - Single Subject Module - DIG =========================================================== 1. Layout Tokens 2. Spacing Tokens 3. State Tokens */ .ds-single-subject { /* ==== Layout Tokens ==== */ /* All Variants */ --ds-single-subject--modal-icon--position: absolute; --ds-single-subject--modal-icon--top: 16px; --ds-single-subject--modal-icon--right: 0; --ds-single-subject--media-image--width--mobile: 75%; --ds-single-subject--media-image--justify-self--mobile: center; /* Center Copy */ --ds-single-subject--media-image--max-width: 100%; --ds-single-subject--media-image--width: min-content; /* Media - Default */ --ds-single-subject--content--grid-column-end--media-default--mobile: span 12; --ds-single-subject--content--order--media-default--mobile: 2; --ds-single-subject--content--order--media-default--left: 2; --ds-single-subject--content--order--media-default--right: 1; --ds-single-subject--media--grid-column-end--media-default--mobile: span 12; --ds-single-subject--media--order--media-default--mobile: 1; --ds-single-subject--media--order--media-default--left: 1; --ds-single-subject--media--order--media-default--right: 2; --ds-single-subject--media-image--justify-self--media-default--mobile: center; --ds-single-subject--media-image--width--media-default--mobile: 75%; /* Media - Full Width */ --ds-single-subject--module-container--width--media-full: 100%; --ds-single-subject--module-container--max-width--media-full: 1920px; --ds-single-subject--content--justify-content--media-full--mobile: center; --ds-single-subject--content--grid-column-end--media-full--mobile: span 12; --ds-single-subject--content--order--media-full--mobile: 2; --ds-single-subject--content--order--media-full--left: 2; --ds-single-subject--content--order--media-full--right: 1; --ds-single-subject--media--grid-column-end--media-full--mobile: span 12; --ds-single-subject--media--order--media-full--left: 1; --ds-single-subject--media--order--media-full--mobile: 1; --ds-single-subject--media--order--media-full--right: 2; --ds-single-subject--media-image--width--media-full--tablet: 75%; --ds-single-subject--media-image--width--media-full--mobile: 100%; --ds-single-subject--media-image--justify-self--media-full--mobile: center; /* Media - Squared (Styling unique to squared media type) */ --ds-single-subject--module-container--max-width--media-square: 1280px; --ds-single-subject--module-container--col-size--media-square: 1; --ds-single-subject--grid-container--display--media-squared: grid; --ds-single-subject--grid-container--grid-template-columns--media-squared: 1fr; --ds-single-subject--grid-container--grid-template-columns--media-squared--desktop--left: 1fr 1fr; --ds-single-subject--grid-container--grid-template-columns--media-squared--desktop--right: 1fr 1fr; --ds-single-subject--grid-container--grid-template-columns--media-squared--tablet--left: 1fr 1fr; --ds-single-subject--grid-container--grid-template-columns--media-squared--tablet--right: 1fr 1fr; --ds-single-subject--grid-container--justify-items--media-squared: center; --ds-single-subject--content--grid-column-start--media-squared: auto; --ds-single-subject--content--grid-column-end--media-squared: auto; --ds-single-subject--media--grid-column-start--media-squared: auto; --ds-single-subject--media--grid-column-end--media-squared: auto; --ds-single-subject--media--max-width--media-squared: 430px; --ds-single-subject--media--width--media-squared: 100%; --ds-single-subject--media-image--width--media-squared: 100%; /* ==== Spacing Tokens ==== */ /* All Variants */ --ds-single-subject--module-container--padding-top: 80px; --ds-single-subject--module-container--padding-bottom: 80px; --ds-single-subject--modal-grid--margin: 32px; /* Center Copy */ --ds-single-subject--media--margin-bottom: var(--ds-space-07); --ds-single-subject--content--padding: var(--ds-space-00) var(--ds-space-04); --ds-single-subject--content-paragraph--margin-bottom: var(--ds-space-05); --ds-single-subject--button-stack--gap: var(--ds-space-04); /* Media - Default */ --ds-single-subject--grid-container--column-gap--media-default: var(--ds-space-09); --ds-single-subject--grid-container--column-gap--media-default--mobile: var(--ds-space-00); --ds-single-subject--grid-container--row-gap--media-default--mobile: var(--ds-space-07); --ds-single-subject--content-stack--padding--media-default--mobile: var(--ds-space-00) var(--ds-space-04); --ds-single-subject--content-paragraph--margin-bottom--media-default: var(--ds-space-05); --ds-single-subject--button-stack--media-default: var(--ds-space-04); /* Media - Full Width */ --ds-single-subject--module-container--padding--media-full: var(--ds-space-06) var(--ds-space-00); --ds-single-subject--grid-container--column-gap--media-full: var(--ds-space-09); --ds-single-subject--grid-container--column-gap--media-full--mobile: var(--ds-space-00); --ds-single-subject--grid-container--row-gap--media-full: var(--ds-space-07); --ds-single-subject--content-stack--padding--media-full--left: var(--ds-space-09); --ds-single-subject--content-stack--padding--media-full--mobile: var(--ds-space-00); --ds-single-subject--content-stack--padding--media-full--right: var(--ds-space-09); --ds-single-subject--content-paragraph--margin-bottom--media-full: var(--ds-space-05); --ds-single-subject--content--padding--media-full--mobile: var(--ds-space-00) var(--ds-space-07); --ds-single-subject--button-stack--gap--media-full: var(--ds-space-04); /* Media - Squared (Styling unique to squared media type) */ --ds-single-subject--module-container--padding--media-square: 32px 24px; --ds-single-subject--module-container--padding--media-square--tablet: 48px 64px; --ds-single-subject--module-container--padding--media-square--laptop: 48px; --ds-single-subject--module-container--padding--media-square--desktop: 48px 128px; --ds-single-subject--grid-container--column-gap--media-squared: 48px; --ds-single-subject--grid-container--column-gap--media-squared--desktop: 112px; --ds-single-subject--grid-container--row-gap--media-squared: 48px; --ds-single-subject--content-paragraph--margin-bottom--media-squared: var(--ds-space-05); /* ==== State Tokens ==== */ /* All Variants */ --ds-single-subject--clickable-image--cursor--hover: pointer; --ds-single-subject--modal-icon--cursor: pointer; } .ds-mega-menu { --ds-mega-menu--module-container--display--desktop: flex; --ds-mega-menu--module-container--height--desktop: 80px; --ds-mega-menu--module-container--height--mobile: 74px; --ds-mega-menu--module-container--justify-content--desktop: space-between; --ds-mega-menu--module-container--padding--desktop: var(--ds-space-00); --ds-mega-menu--module-container--position--desktop: relative; --ds-mega-menu--module-container--width--desktop: 100%; --ds-mega-menu--module-container--width--mobile: 100%; --ds-mega-menu--module-container--z-index--desktop: 4; --ds-mega-menu--header-wrapper--background-color--desktop: var(--ds-neutral0); --ds-mega-menu--header-wrapper--box-shadow--desktop: unset; --ds-mega-menu--header-wrapper--display--desktop: flex; --ds-mega-menu--header-wrapper--height--desktop: 80px; --ds-mega-menu--header-wrapper--justify-content--desktop: space-between; --ds-mega-menu--header-wrapper--padding--desktop: var(--ds-space-00); --ds-mega-menu--header-wrapper--position--desktop: fixed; --ds-mega-menu--header-wrapper--width--desktop: 100%; --ds-mega-menu--header-wrapper--z-index--desktop: 4; --ds-mega-menu--menu-overlay--background--desktop: linear-gradient(0deg, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.66) 100%) 0% 0% repeat scroll rgba(0, 0, 0, 0); --ds-mega-menu--menu-overlay--height--desktop: 100vh; --ds-mega-menu--menu-overlay--opacity--desktop: 1; --ds-mega-menu--menu-overlay--position--desktop: fixed; --ds-mega-menu--menu-overlay--width--desktop: 100vw; --ds-mega-menu--navigation-primary--background-color--mobile: var(--ds-neutral0); --ds-mega-menu--navigation-primary--box-shadow--mobile: 1px 1px 4px 0px rgba(0, 0, 0, 0.25); --ds-mega-menu--navigation-primary--display--desktop: none; --ds-mega-menu--navigation-primary--height--mobile: 74px; --ds-mega-menu--navigation-primary--justify-content--mobile: space-between; --ds-mega-menu--navigation-primary--padding--mobile: var(--ds-space-04); --ds-mega-menu--navigation-primary--position--mobile: fixed; --ds-mega-menu--navigation-primary--width--mobile: 100%; --ds-mega-menu--navigation-primary--z-index--mobile: 5; --ds-mega-menu--logo--max-width--mobile: 158px; --ds-mega-menu--logo--height--desktop: 80px; --ds-mega-menu--logo--object-fit--desktop: contain; --ds-mega-menu--mobile-menu-toggle--cursor--hover--mobile: pointer; --ds-mega-menu--mobile-menu-toggle--fill--mobile: var(--ds-neutral700); --ds-mega-menu--mobile-menu-toggle--height--mobile: 100%; --ds-mega-menu--mobile-menu-toggle--max-height--mobile: var(--ds-space-06); --ds-mega-menu--mobile-menu-toggle--max-width--mobile: var(--ds-space-06); --ds-mega-menu--mobile-menu-toggle--width--mobile: 100%; --ds-mega-menu--mobile-menu-enter--transform: translateY(-100vh); --ds-mega-menu--mobile-menu-enter--transition--active: all .35s ease-in-out; --ds-mega-menu--mobile-menu-leave--transition: translateY(-100vh); --ds-mega-menu--mobile-menu-leave--transition--active: all .35s ease-in-out; --ds-mega-menu--mega-menu--align-items--desktop: center; --ds-mega-menu--mega-menu--background-color--mobile: var(--ds-neutral0); --ds-mega-menu--mega-menu--box-shadow--desktop: 1px 1px 4px 0 rgba(0, 0, 0, .25); --ds-mega-menu--mega-menu--display--desktop: grid; --ds-mega-menu--mega-menu--grid-template-columns--desktop: 158px 1fr 1fr; --ds-mega-menu--mega-menu--height--desktop: 80px; --ds-mega-menu--mega-menu--height--mobile: 100vh; --ds-mega-menu--mega-menu--overflow--desktop: hidden; --ds-mega-menu--mega-menu--overflow--mobile: scroll; --ds-mega-menu--mega-menu--padding--desktop: var(--ds-space-00) var(--ds-space-04); --ds-mega-menu--mega-menu--padding-top--mobile: 74px; --ds-mega-menu--mega-menu--position--desktop: unset; --ds-mega-menu--mega-menu--position--mobile: fixed; --ds-mega-menu--mega-menu--width--desktop: 100%; --ds-mega-menu--mega-menu--width--mobile: 100%; --ds-mega-menu--mega-menu--z-index--desktop: unset; --ds-mega-menu--mega-menu--z-index--mobile: 4; --ds-mega-menu--panel-navigation--flex-direction--desktop: row; --ds-mega-menu--panel-navigation--gap--desktop: var(--ds-space--00); --ds-mega-menu--panel-navigation--height--desktop: 80px; --ds-mega-menu--panel-navigation--justify-self--desktop: left; --ds-mega-menu--panel-navigation--position--mobile: relative; --ds-mega-menu--panel-navigation--row-gap--mobile: var(--ds-space-00); --ds-mega-menu--panel-navigation--width--desktop: fit-content; --ds-mega-menu--panel-navigation--width--mobile: 100%; --ds-mega-menu--panel-navigation-item--height--desktop: 80px; --ds-mega-menu--panel-navigation-item--scroll-margin--mobile: 74px; --ds-mega-menu--panel-navigation-item--width--mobile: 100%; --ds-mega-menu--panel-navigation-item--z-index--desktop: unset; --ds-mega-menu--panel-navigation-item-name--background-color--active--desktop: var(--ds-neutral100); --ds-mega-menu--panel-navigation-item-name--background-color--hover--desktop: var(--ds-neutral100); --ds-mega-menu--panel-navigation-item-name--background-color--focus--desktop: var(--ds-neutral100); --ds-mega-menu--panel-navigation-item-name--background-color--mobile: var(--ds-neutral0); --ds-mega-menu--panel-navigation-item-name--border-bottom--desktop: none; --ds-mega-menu--panel-navigation-item-name--border-bottom--mobile: 2px solid var(--ds-neutral100); --ds-mega-menu--panel-navigation-item-name--box-sizing--desktop: content-box; --ds-mega-menu--panel-navigation-item-name--cursor--hover--desktop: pointer; --ds-mega-menu--panel-navigation-item-name--height--desktop: 48px; --ds-mega-menu--panel-navigation-item-name--justify-content--mobile: space-between; --ds-mega-menu--panel-navigation-item-name--padding--mobile: var(--ds-space-04); --ds-mega-menu--panel-navigation-item-name--transition--desktop: all .25s ease-in-out; --ds-mega-menu--panel-navigation-item-name--width--desktop: fit-content; --ds-mega-menu--panel-navigation-item-name--width--mobile: 100%; --ds-mega-menu--panel-navigation-item-name--z-index--mobile: 4; --ds-mega-menu--panel-name--font-size--desktop: 16px; --ds-mega-menu--panel-name--font-size--mobile: 16px; /* Closest token 15px, but this might update soon. */ --ds-mega-menu--panel-name--text-decoration--active--desktop: underline; --ds-mega-menu--panel-name--transition--desktop: all .25s ease-in-out; --ds-mega-menu--panel-name--text-wrap: nowrap; --ds-mega-menu--panel-icon--fill--mobile: var(--ds-neutral400); --ds-mega-menu--panel-icon--fill--active--mobile: var(--ds-neutral700); --ds-mega-menu--panel-icon--height--mobile: auto; --ds-mega-menu--panel-icon--transform--active--mobile: rotate(90deg); --ds-mega-menu--panel-icon--transition--mobile: transform .2s ease-in-out; --ds-mega-menu--panel-icon--width--mobile: 40px; --ds-mega-menu--panel-icon-svg--display--desktop: none; --ds-mega-menu--panel-enter--transition--active--desktop: all .35s ease-in-out; --ds-mega-menu--panel-enter--transform--desktop: translateY(-100vh); --ds-mega-menu--panel-enter--opacity--desktop: 0; --ds-mega-menu--panel-leave--transition--active--desktop: all .35s ease-in-out; --ds-mega-menu--panel-leave--transform--desktop: translateY(100vh); --ds-mega-menu--panel-leave--opacity--desktop: 0; --ds-mega-menu--panel-wrapper--background--mobile: var(--ds-neutral0); --ds-mega-menu--panel-wrapper--box-shadow--desktop: 0 3px 6px #00000029; --ds-mega-menu--panel-wrapper--display--desktop: grid; --ds-mega-menu--panel-wrapper--grid-template-columns--desktop: 2fr 1fr 2fr; --ds-mega-menu--panel-wrapper--height--desktop: max-content; --ds-mega-menu--panel-wrapper--left--desktop: 0; --ds-mega-menu--panel-wrapper--max-height--desktop: calc(100% - 80px); --ds-mega-menu--panel-wrapper--overflow-x--desktop: hidden; --ds-mega-menu--panel-wrapper--overflow-y--desktop: auto; --ds-mega-menu--panel-wrapper--padding--desktop: var(--ds-space-06) var(--ds-space-07); --ds-mega-menu--panel-wrapper--padding--mobile: var(--ds-space-06) var(--ds-space-04); --ds-mega-menu--panel-wrapper--position--desktop: fixed; --ds-mega-menu--panel-wrapper--width--desktop: 100%; --ds-mega-menu--panel-wrapper--z-index--desktop: -1; --ds-mega-menu--panel-wrapper--z-index--mobile: 0; --ds-mega-menu--feature-group--display--desktop: flex; --ds-mega-menu--feature-group--flex--desktop: 1 1 auto; --ds-mega-menu--feature-group--flex-flow--desktop: row wrap; --ds-mega-menu--feature-group--gap--desktop: var(--ds-space-05) var(--ds-space-07); --ds-mega-menu--feature-group--gap--mobile: var(--ds-space-04); --ds-mega-menu--feature-link--color--mobile: unset; --ds-mega-menu--feature-link--text-decoration--mobile: none; --ds-mega-menu--feature-link--text-decoration--hover--mobile: underline; --ds-mega-menu--feature-link--text-decoration--focus--mobile: underline; --ds-mega-menu--feature-item--max-width--desktop: 220px; --ds-mega-menu--feature-item--width--desktop: 100%; --ds-mega-menu--feature-heading--font-size--desktop: 16px; --ds-mega-menu--feature-heading--font-size--mobile: 16px; --ds-mega-menu--feature-heading--font-weight--mobile: 600; --ds-mega-menu--feature-description--font-family--desktop: var(--ds-font-family-heading); --ds-mega-menu--feature-description--font-family--mobile: var(--ds-font-family-heading); --ds-mega-menu--feature-description--font-size--desktop: 12px; --ds-mega-menu--feature-description--font-size--mobile: 12px; --ds-mega-menu--link-listing-group--column-gap--mobile: var(--ds-space-04); --ds-mega-menu--link-listing-group--display--desktop: flex; --ds-mega-menu--link-listing-group--flex--desktop: 1 1 auto; --ds-mega-menu--link-listing-group--flex-direction--mobile: row; --ds-mega-menu--link-listing-group--flex-flow--desktop: row wrap; --ds-mega-menu--link-listing-group--flex-wrap--mobile: wrap; --ds-mega-menu--link-listing-group--gap--desktop: var(--ds-space-04); --ds-mega-menu--link-listing-group--justify-content--mobile: flex-start; --ds-mega-menu--link-listing-group--width--mobile: 100%; --ds-mega-menu--link-listing-heading--font-size--desktop: 16px; --ds-mega-menu--link-listing-heading--font-size--mobile: 16px; --ds-mega-menu--link-listing-heading--font-weight--mobile: 600; --ds-mega-menu--link-listing-anchor--color--mobile: unset; --ds-mega-menu--link-listing-anchor--font-family--desktop: var(--ds-font-family-heading); --ds-mega-menu--link-listing-anchor--font-family--mobile: var(--ds-font-family-heading); --ds-mega-menu--link-listing-anchor--font-size--desktop: 14px; --ds-mega-menu--link-listing-anchor--font-size--mobile: 14px; --ds-mega-menu--link-listing-anchor--text-decoration--mobile: none; --ds-mega-menu--link-listing-anchor--text-decoration--hover-focus--mobile: underline; --ds-mega-menu--link-listing--width--mobile: 144px; --ds-mega-menu--link-listing-li--width--desktop: fit-content; --ds-mega-menu--link-listing-item-stack--row-gap--mobile: var(--ds-space-00); --ds-mega-menu--link-listing-unordered-list--row-gap--mobile: var(--ds-space-00); --ds-mega-menu-cta-group--display--desktop: grid; --ds-mega-menu-cta-group--grid-template-columns--desktop: 1fr; --ds-mega-menu-cta-group--width--mobile: 100%; --ds-mega-menu--cta-item--border-radius: 12px; --ds-mega-menu--cta-item--background-color--mobile: var(--ds-neutral100); --ds-mega-menu--cta-item--display--mobile: flex; --ds-mega-menu--cta-item--flex-flow--mobile: column; --ds-mega-menu--cta-item--height--desktop: auto; --ds-mega-menu--cta-item--min-height--desktop: 0px; --ds-mega-menu--cta-item--min-height--mobile: 287px; --ds-mega-menu--cta-item--padding--desktop: var(--ds-space-00); --ds-mega-menu--cta-item--padding--mobile: var(--ds-space-06) var(--ds-space-04); --ds-mega-menu--cta-item--row-gap--mobile: var(--ds-space-04); --ds-mega-menu--cta-wrapper--flex-wrap--desktop: nowrap; --ds-mega-menu--cta-content--padding--desktop: var(--ds-space-06); --ds-mega-menu--cta-heading--font-size--desktop: 24px; --ds-mega-menu--cta-heading--font-size--mobile: 24px; --ds-mega-menu--cta-heading--font-weight--mobile: normal; --ds-mega-menu--cta-link--font-family--desktop: 16px; --ds-mega-menu--cta-link--font-family--mobile: var(--ds-font-family-heading); --ds-mega-menu--cta-link--font-size--desktop: var(--ds-font-family-heading); --ds-mega-menu--cta-link--font-size--mobile: 16px; --ds-mega-menu--navigation-cta--align-self--desktop: flex-end; --ds-mega-menu--navigation-cta--flex-flow--desktop: row nowrap; --ds-mega-menu--navigation-cta--gap--desktop: var(--ds-space-04); --ds-mega-menu--navigation-cta--height--desktop: 80px; --ds-mega-menu--navigation-cta--justify-self--desktop: self-end; --ds-mega-menu--navigation-cta--cta--order--desktop: 2; --ds-mega-menu--navigation-cta--sign-in--order--desktop: 1; --ds-mega-menu--navigation-cta--apps--order--mobile: 2; --ds-mega-menu--navigation-cta--cta--order--mobile: 1; --ds-mega-menu--navigation-cta--sign-in--order--mobile: 3; --ds-mega-menu--app-download-ctas--height--mobile: 40px; --ds-mega-menu--app-download-ctas--width--mobile: auto; } .ds-module:has(.ds-footer) { --ds-footer--module--background-color: var(--ds-neutralInteractive700); } .ds-footer { --ds-footer--module-container--background-color: var(--ds-neutralInteractive700); --ds-footer--module-container--border-top: 1px solid var(--ds-neutral200); --ds-footer--module-container--justify-self--desktop: center; --ds-footer--module-container--margin-top: var(--ds-space-07); --ds-footer--module-container--max-width--desktop: 1280px; --ds-footer--module-container--padding--desktop: var(--ds-space-00) var(--ds-space-07); --ds-footer--module-container--padding--widescreen: var(--ds-space-00); --ds-footer--module-container--width: 100%; --ds-footer--logo-wrapper--align-items: center; --ds-footer--logo-wrapper--align-self--desktop: flex-start; --ds-footer--logo-wrapper--height: 120px; --ds-footer--logo-wrapper--justify-content: center; --ds-footer--logo-wrapper--justify-self--desktop: center; --ds-footer--logo-wrapper--padding: var(--ds-space-00) var(--ds-space-07); --ds-footer--logo-wrapper--padding--desktop: var(--ds-space-00); --ds-footer--footer-content--align-items--desktop: flex-start; --ds-footer--footer-content--display--desktop: grid; --ds-footer--footer-content--grid-template-columns--desktop: 440px 1fr; --ds-footer--footer-content--padding--desktop: var(--ds-space-00); --ds-footer--footer-content--width--desktop: 100%; --ds-footer--footer-cta--justify-self--desktop: flex-end; --ds-footer--footer-cta--max-width--desktop: 754px; --ds-footer--footer-cta--order--desktop: 2; --ds-footer--footer-cta--padding--desktop: var(--ds-space-00); --ds-footer--footer-cta--padding--tablet: var(--ds-space-00) var(--ds-space-07); --ds-footer--single-cta-wrapper--align-items--tablet: flex-start; --ds-footer--single-cta-wrapper--background-color: var(--ds-sunset100); --ds-footer--single-cta-wrapper--border-radius--tablet: 12px; --ds-footer--single-cta-wrapper--border--tablet: 1px var(--ds-neutralInteractive300) solid; --ds-footer--single-cta-wrapper--display--tablet: grid; --ds-footer--single-cta-wrapper--grid-template-columns: 1fr; --ds-footer--single-cta-wrapper--grid-template-columns--tablet: repeat(12, 1fr); --ds-footer--single-cta-wrapper--grid-template-rows: auto; --ds-footer--single-cta-wrapper--overflow--tablet: hidden; --ds-footer--single-cta-wrapper--padding: var(--ds-space-08) var(--ds-space-07) var(--ds-space-00) var(--ds-space-07); --ds-footer--single-cta-wrapper--padding--tablet: var(--ds-space-07) var(--ds-space-00) var(--ds-space-00) var(--ds-space-07); --ds-footer--single-cta-content-wrapper--align-items--tablet: flex-start; --ds-footer--single-cta-content-wrapper--grid-column--tablet: 1 / span 7; --ds-footer--single-cta-content-wrapper--grid-row--tablet: 1 / -1; --ds-footer--single-cta-content-wrapper--max-width--tablet: 400px; --ds-footer--single-cta-content-wrapper--margin-bottom--tablet: var(--ds-space-12); --ds-footer--single-cta-heading--font-weight: 600; --ds-footer--single-cta-heading--text-align--tablet: left; --ds-footer--single-cta-image--align-self--tablet: flex-end; --ds-footer--single-cta-image--grid-column--tablet: 7 / span 6; --ds-footer--single-cta-image--grid-row--tablet: 1 / -1; --ds-footer--single-cta-link--color: var(--ds-brand700); --ds-footer--single-cta-link--font-family: var(--ds-font-family-body); --ds-footer--single-cta-link--font-size: 16px; --ds-footer--multi-cta-wrapper--align-items--tablet: baseline; --ds-footer--multi-cta-wrapper--column-gap--tablet: var(--ds-space-07); --ds-footer--multi-cta-wrapper--flex-flow--tablet: row nowrap; --ds-footer--multi-cta-wrapper--justify-content--tablet: center; --ds-footer--multi-cta-wrapper--padding: var(--ds-space-06) var(--ds-space-08) var(--ds-space-07) var(--ds-space-08); --ds-footer--multi-cta-wrapper--padding--tablet: var(--ds-space-07) var(--ds-space-00) var(--ds-space-09) var(--ds-space-00); --ds-footer--multi-cta-wrapper--padding-top--desktop: var(--ds-space-00); --ds-footer--multi-cta-item--align-items--tablet: flex-start; --ds-footer--multi-cta-item--flex--tablet: 1; --ds-footer--multi-cta-item--max-width: 350px; --ds-footer--multi-cta-image-wrapper--background-color: var(--ds-sunrise100); --ds-footer--multi-cta-image-wrapper--border-radius: 12px; --ds-footer--multi-cta--heading--font-size--desktop: 25px; --ds-footer--multi-cta--heading--padding-bottom: var(--ds-space-02); --ds-footer--multi-cta--heading--text-align--tablet: left; --ds-footer--multi-cta--heading--color: var(--ds-neutral0); --ds-footer--multi-cta--heading--font-weight: 600; --ds-footer--multi-cta--link--color: var(--ds-neutral0); --ds-footer--multi-cta--link--font-family: var(--ds-font-family-body); --ds-footer--multi-cta--link--font-size: 16px; --ds-footer--multi-cta--link--text-align: center; --ds-footer--multi-cta--link--text-align--tablet: left; --ds-footer--form-wrapper--order--desktop: 2; --ds-footer--form-wrapper--padding: var(--ds-space-00) var(--ds-space-07); --ds-footer--form-title--color: var(--ds-neutral0); --ds-footer--form-title--font-family: var(--ds-font-family-body); --ds-footer--form-title--font-size: 25px; --ds-footer--form-title--font-weight: 600; --ds-footer--form-title--text-align: center; --ds-footer--form-title--text-align--tablet: left; --ds-footer--form--align-items: flex-start; --ds-footer--form--column-gap: var(--ds-space-03); --ds-footer--form--display: flex; --ds-footer--form--flex-flow: row wrap; --ds-footer--form--justify-content: center; --ds-footer--form--justify-content--tablet: left; --ds-footer--hs-form-field--flex: 1; --ds-footer--hs-form-field--padding-bottom: var(--ds-space-00); --ds-footer--hs-form-field--max-width--tablet: 400px; --ds-footer--hs-input--line-height: 51px; --ds-footer--hs-input--padding-top: var(--ds-space-00); --ds-footer--hs-input--padding-bottom: var(--ds-space-00); --ds-footer--hs-input--width: 100%; --ds-footer--hs-input-label--color: var(--ds-neutral0); --ds-footer--hs-button--background-color: var(--ds-brand700); --ds-footer--hs-button--border: 2px solid transparent; --ds-footer--hs-button--font-family: var(--ds-font-family-heading); --ds-footer--hs-button--margin-top: 21px; --ds-footer--submitted-message--text-align: center; --ds-footer--submitted-message--text-align--tablet: left; --ds-footer--listing-item-heading--color: var(--ds-neutral0); --ds-footer--listing-item-heading--font-family: var(--ds-font-family-body); --ds-footer--listing-item-heading--font-size: 14px; --ds-footer--listing-item-heading--font-weight: 600; --ds-footer--listing-item-menu-list--gap: var(--ds-space-02); --ds-footer--listing-item-anchor--color: var(--ds-neutral0); --ds-footer--listing-item-anchor--font-family: var(--ds-font-family-body); --ds-footer--listing-item-anchor--font-size: 14px; --ds-footer--listing-item-anchor--text-decoration: none; --ds-footer--listing-item-anchor--text-decoration--hover: underline; --ds-footer--footer-links--align-items: flex-start; --ds-footer--footer-links--align-self: flex-start; --ds-footer--footer-links--column-gap--desktop: var(--ds-space-08); --ds-footer--footer-links--display: grid; --ds-footer--footer-links--grid-template-columns: 1fr 1fr; --ds-footer--footer-links--grid-template-columns--desktop: repeat(auto-fill, 188px); --ds-footer--footer-links--grid-template-columns--tablet: 1fr 1fr 1fr 1fr; --ds-footer--footer-links--order--desktop: 1; --ds-footer--footer-links--padding: var(--ds-space-00) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-footer--footer-links--padding--desktop: var(--ds-space-00) var(--ds-space-00) var(--ds-space-10) var(--ds-space-00); --ds-footer--link-listing--max-width--desktop: 188px; --ds-footer--social-media-wrapper--column-gap--tablet: var(--ds-space-03); --ds-footer--social-media-wrapper--justify-content--tablet: flex-start; --ds-footer--social-media-wrapper--padding--desktop: var(--ds-space-00); --ds-footer--social-media-wrapper--padding--tablet: var(--ds-space-00) var(--ds-space-07) var(--ds-space-00) var(--ds-space-07); --ds-footer--social-media-wrapper--padding-bottom: var(--ds-space-07); --ds-footer--social-media-wrapper--width--tablet: 100%; --ds-footer--legal-resources--color: var(--ds-neutral0); --ds-footer--legal-resources--column-gap: var(--ds-space-02); --ds-footer--legal-resources--flex-flow: row wrap; --ds-footer--legal-resources--justify-content: center; --ds-footer--legal-resources--justify-content--tablet: flex-start; --ds-footer--legal-resources--padding--desktop: var(--ds-space-07) var(--ds-space-00) var(--ds-space-09) var(--ds-space-00); --ds-footer--legal-resources--padding--tablet: var(--ds-space-07) var(--ds-space-07) var(--ds-space-09) var(--ds-space-07); --ds-footer--legal-resources--padding-bottom: var(--ds-space-08); --ds-footer--legal-resources--width--tablet: 100%; --ds-footer--legal-copyright--width--tablet: fit-content; --ds-footer--accessibility-trigger--fill: var(--ds-neutral0); } .ds-module:has(.ds-footer) { display: grid; } .ds-ribbon-partners { /* Parent */ --ds-ribbon-partners--max-width: 1280px; /* Content width token? */ --ds-ribbon-partners--padding: var(--ds-space-06) var(--ds-space-03); --ds-ribbon-partners--padding--desktop: var(--ds-space-08) var(--ds-space-11); --ds-ribbon-partners--width: 100%; --ds-ribbon-partners-scroll--max-width: 100vw; --ds-ribbon-partners-scroll--padding: var(--ds-space-07) var(--ds-space-03); --ds-ribbon-partners-scroll--width: 100vw; --ds-ribbon-partners-scroll--overflow: hidden; /* Wrapper */ --ds-ribbon-partners-scroll--wrapper-overflow: hidden; --ds-ribbon-partners-scroll--wrapper-max-width: 1920px; /* Max content width token? */ --ds-ribbon-partners-scroll--wrapper-width: max-content; --ds-ribbon-partners-scroll--wrapper-justify-self: center; /* Heading */ --ds-ribbon-partners--heading-weight: 700; --ds-ribbon-partners-scroll--heading--padding: var(--ds-space-00) var(--ds-space-06); --ds-ribbon-partners-scroll--heading--width: 100vw; /* Logo Wrapper */ --ds-ribbon-partners--logo-wrapper--position: relative; --ds-ribbon-partners--logo-wrapper--width: 100%; --ds-ribbon-partners--logo-wrapper--column-gap--desktop: var(--ds-space-07); --ds-ribbon-partners--logo-wrapper--row-gap--desktop: var(--ds-space-06); --ds-ribbon-partners-scroll--logo-wrapper--align-self: flex-start; --ds-ribbon-partners-scroll--logo-wrapper--animation-name: logo-deck; --ds-ribbon-partners-scroll--logo-wrapper--animation-duration: 64s; --ds-ribbon-partners-scroll--logo-wrapper--animation-timing-function: linear; --ds-ribbon-partners-scroll--logo-wrapper--animation-delay: 0s; --ds-ribbon-partners-scroll--logo-wrapper--animation-iteration-count: infinite; --ds-ribbon-partners-scroll--logo-wrapper--animation-play-state: running; --ds-ribbon-partners-scroll--logo-wrapper--row-gap: var(--ds-space-05); --ds-ribbon-partners-scroll--logo-wrapper--row-gap--desktop: var(--ds-space-06); --ds-ribbon-partners-scroll--logo-wrapper--width: max-content; /* Logo */ --ds-ribbon-partners--logo--height: auto; --ds-ribbon-partners--logo--height--desktop: 125px; --ds-ribbon-partners--logo--width: 125px; --ds-ribbon-partners--logo--width--desktop: 205px; /* Logo Image */ --ds-ribbon-partners--logo-img--height: auto; --ds-ribbon-partners--logo-img--width: auto; /* Keyframes */ --ds-ribbon-parnters--key-frame--logo-deck--from--transform: 0; --ds-ribbon-parnters--key-frame--logo-deck--to--transform: -50% - 32px; } .ds-testimonial-profile { --ds-testimonial-profile--module-container--align-items: center; --ds-testimonial-profile--module-container--background-image: var(--ds-texture-granite); --ds-testimonial-profile--module-container--display: flex; --ds-testimonial-profile--module-container--flex-flow: column nowrap; --ds-testimonial-profile--module-container--margin: var(--ds-space-00) var(--ds-space-00); --ds-testimonial-profile--module-container--max-width: 100%; --ds-testimonial-profile--module-container--padding--mobile: var(--ds-space-09) var(--ds-space-00) var(--ds-space-09) var(--ds-space-00); --ds-testimonial-profile--module-container--padding--tablet: var(--ds-space-10) var(--ds-space-00); --ds-testimonial-profile--module-container--padding--laptop: var(--ds-space-10) var(--ds-space-00); --ds-testimonial-profile--module-container--padding--desktop: var(--ds-space-10) var(--ds-space-00); --ds-testimonial-profile--module-container--width: 100%; --ds-testimonial-profile--stack-container--position--brand--mobile: relative; --ds-testimonial-profile--stack-container--width--mobile: 100%; --ds-testimonial-profile--stack-container--z-index--brand--mobile: 0; --ds-testimonial-profile--wrapper--align-items: center; --ds-testimonial-profile--wrapper--align-items--mobile: flex-start; --ds-testimonial-profile--wrapper--align-items--tablet: center; --ds-testimonial-profile--wrapper--background-color--brand: var(--ds-sagebrush200); --ds-testimonial-profile--wrapper--column-gap--tablet: var(--ds-space-09); --ds-testimonial-profile--wrapper--column-gap--laptop: var(--ds-space-12); --ds-testimonial-profile--wrapper--column-gap--desktop: var(--ds-space-12); --ds-testimonial-profile--wrapper--flex-flow--desktop: row nowrap; --ds-testimonial-profile--wrapper--flex-flow--tablet: row nowrap; --ds-testimonial-profile--wrapper--flex-flow--media-right--tablet: row-reverse; --ds-testimonial-profile--wrapper--justify-content--mobile: flex-start; --ds-testimonial-profile--wrapper--justify-content--tablet: center; --ds-testimonial-profile--wrapper--justify-content--laptop: center; --ds-testimonial-profile--wrapper--justify-content--desktop: center; --ds-testimonial-profile--wrapper--max-width: 1280px; --ds-testimonial-profile--wrapper--max-width--brand--mobile: 100%; --ds-testimonial-profile--wrapper--padding--mobile: var(--ds-space-00) var(--ds-space-07) var(--ds-space-07) var(--ds-space-07); --ds-testimonial-profile--wrapper--padding--tablet: var(--ds-space-00) var(--ds-space-07); --ds-testimonial-profile--wrapper--padding--laptop: var(--ds-space-00) var(--ds-space-10); --ds-testimonial-profile--wrapper--padding--desktop: var(--ds-space-00) var(--ds-space-12); --ds-testimonial-profile--wrapper--width: 100%; --ds-testimonial-profile--wrapper--width--mobile: 100%; --ds-testimonial-profile--wrapper--width--brand--mobile: 100%; --ds-testimonial-profile--media--justify-content--mobile: left; --ds-testimonial-profile--media--justify-content--tablet: center; --ds-testimonial-profile--media--max-width--mobile: 300px; --ds-testimonial-profile--media--max-width--desktop: 389px; --ds-testimonial-profile--media--min-width: 282px; --ds-testimonial-profile--media--width--mobile: 50%; --ds-testimonial-profile--media--width--tablet: 100%; --ds-testimonial-profile--media--z-index--brand: 2; --ds-testimonial-profile--accent--background--brand--top: var(--ds-accent-tear--primary), linear-gradient(to bottom, #fff0 50%, #fff 50%); --ds-testimonial-profile--accent--background--brand--bottom: var(--ds-accent-tear--primary), linear-gradient(to top, #fff0 50%, #EBEBE4 50%); --ds-testimonial-profile--accent--height--brand: 48px; --ds-testimonial-profile--accent--position--brand: relative; --ds-testimonial-profile--accent--top--brand--top: 48px; --ds-testimonial-profile--accent--top--brand--bottom: 0px; --ds-testimonial-profile--accent--top--brand--bottom--tablet: -48px; --ds-testimonial-profile--accent--transform--brand--top: rotateX(180deg); --ds-testimonial-profile--accent--width--brand: 100%; --ds-testimonial-profile--accent--z-index--brand: 1; --ds-testimonial-profile--content-wrapper--max-width: 500px; --ds-testimonial-profile--content-message--font-size--mobile: 25px; --ds-testimonial-profile--content-message--font-size--tablet: 30px; --ds-testimonial-profile--content-message--font-size--desktop: 40px; --ds-testimonial-profile--content-message--font-weight: 700; --ds-testimonial-profile--content-message--line-height--mobile: normal; --ds-testimonial-profile--content-message--line-height--tablet: normal; --ds-testimonial-profile--content-message--line-height--desktop: normal; --ds-testimonial-profile--content-author--font-size--tablet: 26px; --ds-testimonial-profile--content-author--font-size--mobile: 22px; --ds-testimonial-profile--content-author--font-weight: 400; --ds-testimonial-profile--content-author--line-height--mobile: 28px; --ds-testimonial-profile--content-author--line-height--tablet: 35px; --ds-testimonial-profile--content-author--padding-top: var(--ds-space-05); --ds-testimonial-profile--content-author--padding-top--tablet: var(--ds-space-06); --ds-testimonial-profile--content-description--font-family: var(--ds-font-family-crimson); --ds-testimonial-profile--content-description--font-size--tablet: 26px; --ds-testimonial-profile--content-description--font-size--mobile: 22px; --ds-testimonial-profile--content-description--font-style--tablet: italic; --ds-testimonial-profile--content-description--line-height--mobile: 28px; --ds-testimonial-profile--content-description--line-height--tablet: 35px; --ds-testimonial-profile--content-description--text-decoration--mobile: italic; --ds-testimonial-profile--content-link--font-family: var(--ds-font-family-body); --ds-testimonial-profile--content-link--padding-top: var(--ds-space-05); --ds-testimonial-profile--content-link--padding-top--tablet: var(--ds-space-06); } .ds-testimonial-message { /* --- Updated Tokens --- */ /* Accent */ --ds-testimonial-message--accent-wrapper--background--default--left: none; --ds-testimonial-message--accent-wrapper--background--default--right: none; --ds-testimonial-message--accent-wrapper--background-size--default: cover; --ds-testimonial-message--accent-wrapper--height--default: 100%; --ds-testimonial-message--accent-wrapper--width--default: 9px; --ds-testimonial-message--asset-quote--display--default: none; /* Layout */ --ds-testimonial-message--module-container--max-width--mobile: 100%; --ds-testimonial-message--block-container--display--default--mobile: flex; --ds-testimonial-message--block-container--flex-flow--default--mobile: row nowrap; --ds-testimonial-message--block-container--justify-content--default--mobile: center; --ds-testimonial-message--block-container--max-width--fullscreen--mobile: 100%; --ds-testimonial-message--block-container--max-width--fullscreen--tablet: 100%; --ds-testimonial-message--block-container--width--fullscreen--mobile: 100%; --ds-testimonial-message--block-container--width--fullscreen--tablet: 100%; --ds-testimonial-message--stack-container--padding--mobile: var(--ds-space-07) var(--ds-space-00); --ds-testimonial-message--stack-container--max-width--default--mobile: 1280px; --ds-testimonial-message--stack-container--width--default--mobile: 100%; --ds-testimonial-message--content-wrapper--align-items--default--left: flex-start; --ds-testimonial-message--content-wrapper--align-items--default--right: flex-end; --ds-testimonial-message--content-wrapper--align-items--left--tablet: flex-start; --ds-testimonial-message--content-wrapper--align-items--right--tablet: flex-end; --ds-testimonial-message--content-wrapper--flex-direction--tablet: column; --ds-testimonial-message--content-wrapper--flex-direction--left--tablet: column; --ds-testimonial-message--content-wrapper--flex-direction--right--tablet: column; --ds-testimonial-message--content-container--align-items--mobile: center; --ds-testimonial-message--name-wrapper--align-items--default--left: flex-start; --ds-testimonial-message--name-wrapper--align-items--default--right: flex-end; --ds-testimonial-message--name-wrapper--align-items--mobile: center; --ds-testimonial-message--name-wrapper--align-items--tablet: flex-start; --ds-testimonial-message--details-wrapper--align-items--center--tablet: center; --ds-testimonial-message--details-wrapper--align-items--default--left--mobile: flex-start; --ds-testimonial-message--details-wrapper--align-items--default--right--mobile: flex-end; --ds-testimonial-message--details-wrapper--align-items--tablet: center; --ds-testimonial-message--details-wrapper--flex-direction--mobile: column; --ds-testimonial-message--details-wrapper--flex-direction--tablet: row; --ds-testimonial-message--testimony-link--display--mobile: block; --ds-testimonial-message--testimony-link--display--tablet: none; --ds-testimonial-message--testimony-link--display--bottom--mobile: none; --ds-testimonial-message--testimony-link--font-family: var(--ds-font-family-montserrat); --ds-testimonial-message--testimony-link-mobile--display--mobile: none; --ds-testimonial-message--testimony-link-mobile--display--desktop: none; /* Spacing */ --ds-testimonial-message--block-container--padding--default--desktop: var(--ds-space-09) var(--ds-space-12); --ds-testimonial-message--block-container--padding--default--mobile: var(--ds-space-08) var(--ds-space-05); --ds-testimonial-message--block-container--padding--default--tablet: var(--ds-space-09) var(--ds-space-08); --ds-testimonial-message--block-container--column-gap--default--desktop: var(--ds-space-07); --ds-testimonial-message--block-container--column-gap--default--mobile: var(--ds-space-05); --ds-testimonial-message--testimony-link--padding-top--center: var(--ds-space-02); /* Typography */ --ds-testimonial-message--testimony-name--font-size--default--mobile: 26px; --ds-testimonial-message--testimony-name--font-size--default--tablet: 26px; --ds-testimonial-message--testimony-name--font-size--lr--tablet: 26px; --ds-testimonial-message--testimony-name--font-weight--default--mobile: normal; --ds-testimonial-message--testimony-name--font-weight--lr--tablet: normal; --ds-testimonial-message--testimony-name--line-height--default--mobile: normal; --ds-testimonial-message--testimony-name--line-height--lr--tablet: normal; --ds-testimonial-message--testimony-title--font-family: var(--ds-font-family-crimson); --ds-testimonial-message--testimony-title--font-size--default--mobile: 26px; --ds-testimonial-message--testimony-title--font-size--default--tablet: 26px; --ds-testimonial-message--testimony-title--font-size--lr--tablet: 26px; --ds-testimonial-message--testimony-title--font-style--default: italic; --ds-testimonial-message--testimony-title--font-weight--lr--tablet: normal; --ds-testimonial-message--testimony-title--line-height--default: normal; --ds-testimonial-message--testimony-title--line-height--lr--tablet: normal; --ds-testimonial-message--testimony-title--text-align--default--center: center; --ds-testimonial-message--testimony-title--text-align--default--left: left; --ds-testimonial-message--testimony-title--text-align--default--right: right; --ds-testimonial-message--heading--font-size--default--mobile: 30px; --ds-testimonial-message--heading--font-size--tablet: 40px; --ds-testimonial-message--heading--line-height--default--mobile: normal; --ds-testimonial-message--heading--text-align--default--left: left; --ds-testimonial-message--heading--text-align--default--right: right; --ds-testimonial-message--heading--text-align--right--tablet: right; --ds-testimonial-message--testimony-link--font-weight--default: var(--ds-font-weight-600); /* --- End of Updated Tokens --- */ /* Assets */ --ds-testimonial-message--asset-quote--default: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/FDL%20Child/css/modules/testimonial-message/assets/testimonial-message-quote.svg); --ds-testimonial-message--asset--edge-accent--default: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/DIG%20Child/css/assets/accents/line-accent.svg); --ds-testimonial-message--asset-swoosh--fdl-blue: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/FDL%20Child/css/modules/testimonial-message/assets/testimonial-message-swoosh-fdl-blue.svg); --ds-testimonial-message--asset-swoosh--jade: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/FDL%20Child/css/modules/testimonial-message/assets/testimonial-message-swoosh-jade.svg); --ds-testimonial-message--asset-swoosh--fdl-blue--wide: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/FDL%20Child/css/modules/testimonial-message/assets/testimonial-message-swoosh-fdl-blue-wide.svg); --ds-testimonial-message--asset-swoosh--jade--wide: url(https://44357745.fs1.hubspotusercontent-na2.net/hubfs/44357745/raw_assets/public/Design%20System/FDL%20Child/css/modules/testimonial-message/assets/testimonial-message-swoosh-jade-wide.svg); --ds-testimonial-message--width: 100%; --ds-testimonial-message--padding--brand: var(--ds-space-09) var(--ds-space-12); /* Brand - Default Accent */ --ds-testimonial-message--content-accent--default: var(--ds-testimonial-message--asset-swoosh--fdl-blue); --ds-testimonial-message--content-accent--default--wide: var(--ds-testimonial-message--asset-swoosh--fdl-blue--wide); --ds-testimonial-message--display-accent--default: block; --ds-testimonial-message--width-accent--default: 100%; --ds-testimonial-message--background-accent--default: linear-gradient(to top, var(--ds-fdl-blue700) 52%, #fff 52%); --ds-testimonial-message--position-accent--default: relative; --ds-testimonial-message--bottom-accent--default: -2px; --ds-testimonial-message--index-accent--default: 0; --ds-testimonial-message--background-wrapper--default: var(--ds-fdl-blue700); --ds-testimonial-message--accent-wrapper--display--default: block; --ds-testimonial-message--accent-wrapper--background--default: var(--ds-testimonial-message--asset--edge-accent--default); /* Brand - Energizer Accent */ --ds-testimonial-message--content-accent--energizer: var(--ds-testimonial-message--asset-swoosh--jade); --ds-testimonial-message--content-accent--energizer--wide: var(--ds-testimonial-message--asset-swoosh--jade--wide); --ds-testimonial-message--display-accent--energizer: block; --ds-testimonial-message--width-accent--energizer: 100%; --ds-testimonial-message--background-accent--energizer: linear-gradient(to top, var(--ds-jade700) 52%, #fff 52%); --ds-testimonial-message--position-accent--energizer: relative; --ds-testimonial-message--bottom-accent--energizer: -2px; --ds-testimonial-message--index-accent--energizer: 0; --ds-testimonial-message--background-wrapper--energizer: var(--ds-jade700); /* Brand - Typography */ --ds-testimonial-message-color-typography--brand: var(--ds-neutral0); --ds-testimonial-message--weight-heading--brand: var(--ds-font-weight-700); --ds-testimonial-message--size-heading--brand: var(--ds-font-size-h500); --ds-testimonial-message--line-height-heading--brand: 65px; --ds-testimonial-message--weight-testimony--brand: var(--ds-font-weight-600); --ds-testimonial-message--size-testimony--brand: var(--ds-font-size-body200); --ds-testimonial-message--line-height-testimony--brand: 28px; --ds-testimonial-message-display-quote--brand: none; /* Default */ --ds-testimonial-message--padding--default: var(--ds-space-07) var(--ds-space-12); --ds-testimonial-message--background-wrapper--accent--default: #ffffff00; --ds-testimonial-message--background-wrapper--default--default: #ffffff00; /* Default - Accent Color */ --ds-testimonial-message--color-link--accent--default: var(--ds-jade700); /* Default - Typography */ --ds-testimonial-message--weight-heading--default: var(--ds-font-weight-700); --ds-testimonial-message--size-heading--default: var(--ds-font-size-h400); --ds-testimonial-message--line-height-heading--default: 54px; --ds-testimonial-message--weight-testimony--default: var(--ds-font-weight-600); --ds-testimonial-message--size-testimony--default: var(--ds-font-size-body100); --ds-testimonial-message--line-height-testimony--default: 26px; --ds-testimonial-message--font-style--title: italic; /* Default - Quote */ --ds-testimonial-message-content-quote--default: var(--ds-testimonial-message--asset-quote--default); --ds-testimonial-message-width-quote--default: 57px; --ds-testimonial-message-height-quote--default: auto; --ds-testimonial-message--padding-content-wrapper--default: var(--ds-space-00) var(--ds-space-00) var(--ds-space-04) var(--ds-space-00); /* Base */ --ds-testimonial-message-padding--base: var(--ds-space-07) var(--ds-space-06) var(--ds-space-10) var(--ds-space-06); --ds-testimonial-message-row-gap--base: var(--ds-space-08); --ds-testimonial-message-flex-direction-content-wrapper--base: column; /* Base - Avatar */ --ds-testimonial-message-background-color-avatar--base: var(--ds-cascade700); --ds-testimonial-message-width-avatar--base: 112px; --ds-testimonial-message-border-avatar--base: none; /* Position */ /* Position - Center */ --ds-testimonial-message-align-wrapper--center: center; --ds-testimonial-message-flex-direction-wrapper--center: column; --ds-testimonial-message--padding-top--testimony-name--center: 0px; --ds-testimonial-message--padding-top--testimony-link--center: 0px; /* Center Typography */ --ds-testimonial-message-size-heading--center: 40px; --ds-testimonial-message-weight-heading--center: var(--ds-font-weight-700); --ds-testimonial-message-line-height-heading--center: 50px; --ds-testimonial-message-text-align-heading--center: center; --ds-testimonial-message-size-name--center: 26px; --ds-testimonial-message-weight-name--center: var(--ds-font-weight-400); --ds-testimonial-message-line-height-name--center: 35px; --ds-testimonial-message-size-title--center: 26px; --ds-testimonial-message-style-title--center: italic; --ds-testimonial-message-weight-title--center: var(--ds-font-weight-400); --ds-testimonial-message-line-height-title--center: 35px; /* Center Quote */ --ds-testimonial-message-width-quote--center: 76px; --ds-testimonial-message-height-quote--center: auto; /* Center Avatar */ --ds-testimonial-message-width-avatar--center: 112px; /* Position - Left */ --ds-testimonial-message-align-wrapper--left: flex-start; --ds-testimonial-message-flex-direction-wrapper--left: row; /* Position - Right */ --ds-testimonial-message-align-wrapper--right: center; --ds-testimonial-message-flex-direction-wrapper--right: row-reverse; /* Position L/R Typography */ --ds-testimonial-message-size-heading--lr: var(--ds-font-size-h400); --ds-testimonial-message-weight-heading--lr: var(--ds-font-weight-700); --ds-testimonial-message-line-height-heading--lr: 55px; --ds-testimonial-message-text-align-heading--lr: left; --ds-testimonial-message-size-name-lr: var(--ds-font-size-body200); --ds-testimonial-message-weight-name-lr: var(--ds-font-weight-600); --ds-testimonial-message-line-height-name-lr: 28px; --ds-testimonial-message-size-title-lr: var(--ds-font-size-body200); --ds-testimonial-message-weight-title-lr: var(--ds-font-weight-400); --ds-testimonial-message-line-height-title-lr: 28px; /* Position L/R Avatar */ --ds-testimonial-message-width-avatar--lr: 112px; /* Desktop - Base */ --ds-testimonial-message-padding-link--desktop: var(--ds-space-02) var(--ds-space-00) var(--ds-space-00) var(--ds-space-00); --ds-testimonial-message-padding-wrapper--desktop: var(--ds-space-07) var(--ds-space-00); --ds-testimonial-message-row-gap-wrapper--desktop: var(--ds-space-07); --ds-testimonial-message-column-gap-content-wrapper--desktop: var(--ds-space-10); --ds-testimonial-message-border-avatar--desktop: 3px solid var(--ds-neutral0); --ds-testimonial-message-text-wrap-testimony--desktop: nowrap; } /* =========================================================== Alias Tokens - Multi Subject Module - FDL =========================================================== 1. Layout Tokens 2. Spacing Tokens */ .ds-multi-subject { /* ==== Layout Tokens ==== */ /* All Variants */ --ds-multi-subject--grid-container--grid-template-columns--mobile: 1fr; /* Two Column */ --ds-multi-subject--grid-container--grid-template-columns--two-column--desktop: 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--two-column--tablet: 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--two-column--mobile: 1fr; /* Three Column */ --ds-multi-subject--grid-container--grid-template-columns--three-column--desktop: 1fr 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--three-column--tablet: 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--three-column--mobile: 1fr; --ds-multi-subject--grid-item--grid-column-end--three-column--tablet: span 2; --ds-multi-subject--grid-item--justify-self--three-column--tablet: center; --ds-multi-subject--grid-item--max-width--three-column--tablet: 650px; --ds-multi-subject--grid-item--grid-column-end--three-column--mobile: auto; --ds-multi-subject--grid-item--justify-self--three-column--mobile: unset; --ds-multi-subject--grid-item--max-width--three-column--mobile: unset; /* Four Column */ --ds-multi-subject--grid-container--grid-template-columns--four-column--desktop: 1fr 1fr 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--four-column--tablet: 1fr 1fr; --ds-multi-subject--grid-container--grid-template-columns--four-column--mobile: 1fr; /* ==== Spacing Tokens ==== */ /* All Variants */ --ds-multi-subject--module-container--padding-bottom--desktop: var(--ds-space-07); --ds-multi-subject--module-container--padding-top--desktop: var(--ds-space-07); --ds-multi-subject--content-wrapper--row-gap: var(--ds-space-05); --ds-multi-subject--content-media--padding-bottom: var(--ds-space-02); --ds-multi-subject--content-button--padding-top: var(--ds-space-02); /* Two Column */ --ds-multi-subject--module-container--padding--two-column--desktop: var(--ds-space-09) var(--ds-space-11) var(--ds-space-09) var(--ds-space-11); --ds-multi-subject--module-container--padding--two-column--tablet: var(--ds-space-09) var(--ds-space-10) var(--ds-space-09) var(--ds-space-10); --ds-multi-subject--module-container--padding--two-column--mobile: var(--ds-space-09) var(--ds-space-07) var(--ds-space-09) var(--ds-space-07); --ds-multi-subject--grid-container--column-gap--two-column--desktop: var(--ds-space-11); --ds-multi-subject--grid-container--column-gap--two-column--tablet: var(--ds-space-10); --ds-multi-subject--grid-container--column-gap--two-column--mobile: var(--ds-space-08); --ds-multi-subject--grid-container--row-gap--two-column--desktop: var(--ds-space-11); --ds-multi-subject--grid-container--row-gap--two-column--tablet: var(--ds-space-10); --ds-multi-subject--grid-container--row-gap--two-column--mobile: var(--ds-space-08); /* Three Column */ --ds-multi-subject--module-container--padding--three-column--desktop: var(--ds-space-09) var(--ds-space-10) var(--ds-space-09) var(--ds-space-10); --ds-multi-subject--module-container--padding--three-column--tablet: var(--ds-space-09) var(--ds-space-09) var(--ds-space-09) var(--ds-space-09); --ds-multi-subject--module-container--padding--three-column--mobile: var(--ds-space-09) var(--ds-space-07) var(--ds-space-09) var(--ds-space-07); --ds-multi-subject--grid-container--column-gap--three-column--desktop: var(--ds-space-08); --ds-multi-subject--grid-container--column-gap--three-column--tablet: var(--ds-space-07); --ds-multi-subject--grid-container--column-gap--three-column--mobile: var(--ds-space-07); --ds-multi-subject--grid-container--row-gap--three-column--desktop: var(--ds-space-08); --ds-multi-subject--grid-container--row-gap--three-column--tablet: var(--ds-space-07); --ds-multi-subject--grid-container--row-gap--three-column--mobile: var(--ds-space-07); /* Four Column */ --ds-multi-subject--module-container--padding--four-column--desktop: var(--ds-space-09) var(--ds-space-08) var(--ds-space-09) var(--ds-space-08); --ds-multi-subject--module-container--padding--four-column--tablet: var(--ds-space-09) var(--ds-space-10) var(--ds-space-09) var(--ds-space-10); --ds-multi-subject--module-container--padding--four-column--mobile: var(--ds-space-09) var(--ds-space-07) var(--ds-space-09) var(--ds-space-07); --ds-multi-subject--grid-container--column-gap--four-column--desktop: var(--ds-space-08); --ds-multi-subject--grid-container--column-gap--four-column--tablet: var(--ds-space-09); --ds-multi-subject--grid-container--column-gap--four-column--mobile: var(--ds-space-08); --ds-multi-subject--grid-container--row-gap--four-column--desktop: var(--ds-space-08); --ds-multi-subject--grid-container--row-gap--four-column--tablet: var(--ds-space-08); --ds-multi-subject--grid-container--row-gap--four-column--mobile: var(--ds-space-08); --ds-multi-subject--content-icon--margin-left: -8px; } /* =========================================================== Alias Tokens - Hero Module - DIG =========================================================== 1. Asset Tokens 2. Color Tokens 3. Layout Tokens 4. Overlay Tokens 5. Spacing Tokens 6. Typography Tokens */ .ds-hero { /* ==== Asset Tokens ==== */ /* Variation - All Variants */ --ds-hero--hero-accent--background--mobile: var(--ds-accent-tear--primary), linear-gradient(to bottom, #fff0 50%, #fff 50%); --ds-hero--hero-accent--background-repeat--mobile: repeat-x; --ds-hero--hero-accent--height--mobile: 72px; --ds-hero--hero-accent--margin-top--mobile: -48px; --ds-hero--hero-accent--position--mobile: relative; --ds-hero--hero-accent--width--mobile: 100%; --ds-hero--hero-accent--z-index--mobile: 0; /* ==== Color Tokens ==== */ /* Variation - All Variants */ --ds-hero--module-container--background-color--accent: var(--ds-sagebrush300); --ds-hero--module-container--background-color--default: var(--ds-neutralInteractive700); --ds-hero--module-container--background-color--neutral: var(--ds-neutral0); --ds-hero--hero-heading--color--accent: var(--ds-neutralInteractive700); --ds-hero--hero-heading--color--default: var(--ds-neutral0); --ds-hero--hero-heading--color--neutral: var(--ds-neutralInteractive700); --ds-hero--hero-paragraph--color--accent: var(--ds-neutralInteractive700); --ds-hero--hero-paragraph--color--default: var(--ds-neutral0); --ds-hero--hero-paragraph--color--neutral: var(--ds-neutralInteractive700); /* Variation - Color Block */ --ds-hero--module-container--background-color--color-block--tablet: linear-gradient(to right, var(--ds-current200) 60%, transparent 60%); --ds-hero--content-stack--background-color--color-block--mobile: var(--ds-current200); /* Variation - Media Left */ /* Variation - Media Right */ /* ==== Layout Tokens ==== */ /* Variation - All Variants */ --ds-hero--module-container--max-width: unset; --ds-hero--module-container--width: 100%; --ds-hero--grid-container--grid-template-columns--mobile: 1fr; --ds-hero--grid-container--grid-template-columns--media-left--desktop: 1fr 1fr; --ds-hero--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; --ds-hero--grid-container--grid-template-columns--media-left--tablet: 1fr 1fr; --ds-hero--grid-container--grid-template-columns--media-right--tablet: 1fr 1fr; --ds-hero--content-container--align-items--tablet: center; --ds-hero--content-container--height--tablet: 100%; --ds-hero--content-container--order--tablet: 1; --ds-hero--content-container--order--ordered--mobile: 1; --ds-hero--content-container--order--reversed--mobile: 2; --ds-hero--content-container--order--media-left--tablet: 2; --ds-hero--content-container--order--media-right--tablet: 1; --ds-hero--media-container--align-items--tablet: center; --ds-hero--media-container--height--tablet: 100%; --ds-hero--media-container--justify-self--mobile: center; --ds-hero--media-container--max-width--mobile: 60%; --ds-hero--media-container--max-width--centered--mobile: 100%; --ds-hero--media-container--max-width--tablet: 100%; --ds-hero--media-container--order--tablet: 2; --ds-hero--media-container--order--ordered--mobile: 2; --ds-hero--media-container--order--reversed--mobile: 1; --ds-hero--media-container--order--media-left--tablet: 1; --ds-hero--media-container--order--media-right--tablet: 2; --ds-hero--media-content--height--tablet: 100%; --ds-hero--modal-icon--position: absolute; --ds-hero--modal-icon--right: 0px; --ds-hero--modal-icon--top: var(--ds-space-04); /* Variation - Color Block */ --ds-hero--grid-container--grid-template-columns--color-block--desktop: 1fr 1fr; --ds-hero--grid-container--grid-template-columns--color-block--tablet: 1fr 1fr; --ds-hero--content-container--order--color-block--desktop: 1; --ds-hero--content-container--order--color-block--mobile: 2; --ds-hero--content-container--order--color-block--tablet: 1; --ds-hero--content-container--z-index--color-block--mobile: 1; --ds-hero--content-container--z-index--color-block--tablet: 0; --ds-hero--media-container--order--color-block--desktop: 2; --ds-hero--media-container--order--color-block--mobile: 1; --ds-hero--media-container--order--color-block--tablet: 2; /* Variation - Media Left */ --ds-hero--grid-container--grid-template-columns--media-left--desktop: 1fr 1fr; /* Variation - Media Right */ --ds-hero--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; /* ==== Spacing Tokens ==== */ /* Variation - All Variants */ --ds-hero--module-container--padding: var(--ds-space-06) var(--ds-space-00); --ds-hero--module-container--padding--mobile: var(--ds-space-00); --ds-hero--design-overlay--padding-bottom--accent--mobile: var(--ds-space-00); --ds-hero--overlay-accent--display: block; --ds-hero--grid-container--column-gap--desktop: var(--ds-space-12); --ds-hero--grid-container--column-gap--tablet: var(--ds-space-09); --ds-hero--grid-container--gap--mobile: var(--ds-space-07); --ds-hero--grid-container--row-gap--tablet: var(--ds-space-09); --ds-hero--grid-container--row-gap--desktop: var(--ds-space-09); --ds-hero--content-container--padding--desktop: var(--ds-space-09) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-hero--content-container--padding--tablet: var(--ds-space-10); --ds-hero--content-container--padding--mobile: var(--ds-space-07); --ds-hero--content-container--padding--ordered--mobile: var(--ds-space-08) var(--ds-space-07) var(--ds-space-00) var(--ds-space-07); --ds-hero--content-container--padding--ordered--tablet: var(--ds-space-09) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-hero--content-container--padding--ordered--desktop: var(--ds-space-09) var(--ds-space-12) var(--ds-space-00) var(--ds-space-12); --ds-hero--content-container--padding--reversed--mobile: var(--ds-space-00) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-hero--content-container--padding--reversed--tablet: var(--ds-space-00) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-hero--content-container--padding--reversed--desktop: var(--ds-space-00) var(--ds-space-07) var(--ds-space-10) var(--ds-space-00); --ds-hero--content-container--padding--media-left--tablet: var(--ds-space-07) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-hero--content-container--padding--media-right--tablet: var(--ds-space-07) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-hero--content-container--padding--media-left--desktop: var(--ds-space-00) var(--ds-space-11) var(--ds-space-00) var(--ds-space-00); --ds-hero--content-container--padding--media-right--desktop: var(--ds-space-00) var(--ds-space-00) var(--ds-space-00) var(--ds-space-11); --ds-hero--content-stack--gap: var(--ds-space-05); --ds-hero--content-paragraph--padding-bottom: var(--ds-space-05); --ds-hero--media-container--padding--desktop: var(--ds-space-00) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-hero--media-container--padding--tablet: var(--ds-space-09) var(--ds-space-11); --ds-hero--media-container--padding--mobile: var(--ds-space-08) var(--ds-space-07); --ds-hero--media-container--padding--ordered--mobile: var(--ds-space-00); --ds-hero--media-container--padding--ordered--tablet: var(--ds-space-00); --ds-hero--media-container--padding--ordered--desktop: var(--ds-space-00) var(--ds-space-12) var(--ds-space-00) var(--ds-space-12); --ds-hero--media-container--padding--reversed--mobile: var(--ds-space-00); --ds-hero--media-container--padding---reversed-tablet: var(--ds-space-00); --ds-hero--media-container--padding--reversed--desktop: var(--ds-space-09) var(--ds-space-12) var(--ds-space-00) var(--ds-space-12); --ds-hero--media-container--padding--media-left--tablet: var(--ds-space-00); --ds-hero--media-container--padding--media-right--tablet: var(--ds-space-00); --ds-hero--media-container--padding--media-left--desktop: var(--ds-space-00) var(--ds-space-00) var(--ds-space-00) var(--ds-space-12); --ds-hero--media-container--padding--media-right--desktop: var(--ds-space-00) var(--ds-space-12) var(--ds-space-00) var(--ds-space-00); --ds-hero--modal-grid--margin: var(--ds-space-06); /* Variation - Color Block */ --ds-hero--module-container--padding-top--color-block--desktop: var(--ds-space-11); --ds-hero--module-container--padding-top--color-block--tablet: var(--ds-space-10); --ds-hero--module-container--padding-bottom--color-block--desktop: var(--ds-space-11); --ds-hero--module-container--padding-bottom--color-block--tablet: var(--ds-space-10); --ds-hero--grid-container--column-gap--color-block--desktop: var(--ds-space-09); --ds-hero--grid-container--column-gap--color-block--tablet: var(--ds-space-07); --ds-hero--content-container--margin-top--color-block--mobile: -96px; --ds-hero--content-container--margin-top--color-block--tablet: var(--ds-space-00); --ds-hero--content-container--padding--color-block--desktop: var(--ds-space-00) var(--ds-space-00) var(--ds-space-00) var(--ds-space-11); --ds-hero--content-container--padding--color-block--mobile: var(--ds-space-06) var(--ds-space-04) var(--ds-space-07) var(--ds-space-04); --ds-hero--content-container--padding--color-block--tablet: var(--ds-space-00) var(--ds-space-00) var(--ds-space-00) var(--ds-space-08); --ds-hero--content-stack--padding--color-block--mobile: var(--ds-space-07) var(--ds-space-06) var(--ds-space-08) var(--ds-space-06); --ds-hero--content-stack--padding--color-block--tablet: var(--ds-space-00); --ds-hero--media-container--padding-right--color-block--desktop: var(--ds-space-11); --ds-hero--media-container--padding-right--color-block--tablet: var(--ds-space-08); /* Variation - Media Left */ --ds-hero--grid-container--column-gap--media-left--tablet: var(--ds-space-00); --ds-hero--grid-container--column-gap--media-left--desktop: var(--ds-space-00); --ds-hero--content-container--padding--media-left--laptop: var(--ds-space-09) var(--ds-space-09) var(--ds-space-12) var(--ds-space-09); --ds-hero--content-container--padding--media-left--desktop: var(--ds-space-09) var(--ds-space-12) var(--ds-space-09) var(--ds-space-09); /* Variation - Media Right */ --ds-hero--grid-container--column-gap--media-right--tablet: var(--ds-space-00); --ds-hero--grid-container--column-gap--media-right--desktop: var(--ds-space-00); --ds-hero--content-container--padding--media-right--laptop: var(--ds-space-09) var(--ds-space-09) var(--ds-space-12) var(--ds-space-09); --ds-hero--content-container--padding--media-right--desktop: var(--ds-space-09) var(--ds-space-12) var(--ds-space-09) var(--ds-space-12); /* ==== State ==== */ /* Variation - All Variants */ --ds-hero--media-image--cursor--hover: pointer; --ds-hero--modal-icon--cursor: pointer; /* Variation - Color Block */ /* Variation - Media Left */ /* Variation - Media Right */ /* ==== Typography Tokens ==== */ /* Variation - All Variants */ --ds-hero--content-heading--line-height--mobile: 56px; --ds-hero--content-heading--font-size--mobile: 48px; --ds-hero--content-heading--word-break--mobile: break-word; --ds-hero--content-heading--font-size--tablet: 64px; --ds-hero--content-heading--line-height--tablet: 64px; --ds-hero--content-heading--font-size--desktop: 64px; --ds-hero--content-heading--line-height--desktop: 64px; /* Variation - Color Block */ /* Variation - Media Left */ /* Variation - Media Right */ } .ds-cta-simple { /** Base */ /* Parent */ --ds-cta-simple--max-width: unset; --ds-cta-simple--width: 100%; --ds-cta-simple--padding: var(--ds-space-09) var(--ds-space-07); /* Border Accent Wrapper */ --ds-cta-simple--border-accent-wrapper--display: none; --ds-cta-simple--border-accent-wrapper--height: var(--ds-space-06); --ds-cta-simple--border-accent-wrapper--width: 100%; --ds-cta-simple--border-accent-wrapper--background-color: var(--ds-neutral0); --ds-cta-simple--border-accent-wrapper--position: relative; /* Border Accent */ --ds-cta-simple--border-accent--background-image: var(--ds-cta-simple-accent-tear); --ds-cta-simple--border-accent--position: absolute; --ds-cta-simple--border-accent--height: 41px; --ds-cta-simple--border-accent--width: 100%; --ds-cta-simple--border-accent--offset: -20.5px; /* Content */ --ds-cta-simple--content-cta--min-width: max-content; --ds-cta-simple--stack-content--max-width: 1280px; /* Grid */ --ds-cta-simple--grid--row-gap: var(--ds-space-07); --ds-cta-simple--grid-item--accent--display: none; --ds-cta-simple--grid-item--accent--margin-bottom: 0px; --ds-cta-simple--grid-item--accent--width: 100%; --ds-cta-simple--grid-item--accent--height: auto; /* Text */ --ds-cta-simple--text--row-gap: var(--ds-space-05); /** Default */ /* Parent */ --ds-cta-simple-default--padding: var(--ds-space-08); /* Text */ --ds-cta-simple-default-primary--text--color: var(--ds-oak700); --ds-cta-simple-default-secondary--text--color: var(--ds-oak700); /* Background */ --ds-cta-simple-default-primary--background-color: var(--ds-sagebrush200); --ds-cta-simple-default-secondary--background-color: var(--ds-sunset100); /** Accented */ /* Parent */ --ds-cta-simple-accented--padding: var(--ds-space-00); /* Border Accent Wrapper */ --ds-cta-simple-accented--border-accent-wrapper--display: flex; /* Grid */ --ds-cta-simple-accented--grid--background: var(--ds-texture-denim); --ds-cta-simple-accented--grid--background--primary: var(--ds-sagebrush200); --ds-cta-simple-accented--grid--background--secondary: var(--ds-sunset100); --ds-cta-simple-accented--grid--background-size: cover; --ds-cta-simple-accented--grid--row-gap: var(--ds-space-00); /* Grid Item */ --ds-cta-simple-accented--grid-item--content--padding: var(--ds-space-11) var(--ds-space-07); --ds-cta-simple-accented--grid-item--accent--background: none; --ds-cta-simple-accented--grid-item--accent--aspect-ratio: 0; --ds-cta-simple-accented--grid-item--accent--background-repeat: no-repeat; --ds-cta-simple-accented--grid-item--accent--background-size: cover; /* Text */ --ds-cta-simple-accented--text--color: var(--ds-neutral0); --ds-cta-simple-accented--text--color--invert: var(--ds-oak700); /** Contained */ /* Parent */ --ds-cta-simple-contained--padding: var(--ds-space-08) var(--ds-space-06); --ds-cta-simple-contained--display: grid; --ds-cta-simple-contained--justify-items: center; /* Grid */ --ds-cta-simple-contained--grid--max-width: 1280px; --ds-cta-simple-contained--grid--width: 100%; /* Grid Item */ --ds-cta-simple-contained--grid-item--content--padding: var(--ds-space-08) var(--ds-space-06); --ds-cta-simple-contained--grid-item--text--max-width: 100%; /* Text */ --ds-cta-simple-contained-primary--text--color: var(--ds-oak700); /* Background */ --ds-cta-simple-contained-primary--background-color: var(--ds-sagebrush200); --ds-cta-simple-contained-secondary--background-color: var(--ds-sunset100); /* Image */ --ds-cta-simple-texture: none; --ds-cta-simple-contained--background-position: center; /** Responsive */ /* Desktop */ --ds-cta-simple--stack-content--desktop--flex-direction: row; --ds-cta-simple--stack-content--desktop--column-gap: var(--ds-space-11); --ds-cta-simple--text--desktop--align-items: flex-start; --ds-cta-simple--text--desktop--row-gap: var(--ds-space-05); --ds-cta-simple--text--desktop--text-align: left; --ds-cta-simple-reversed--stack-content--desktop--flex-direction: row-reverse; --ds-cta-simple-default--desktop--padding: var(--ds-space-09); --ds-cta-simple-accented--grid-item--content--desktop--padding: var(--ds-space-12); --ds-cta-simple-accented--grid-item--content--desktop--padding-top: var(--ds-space-12); --ds-cta-simple-contained--desktop--padding: var(--ds-space-06) var(--ds-space-08); --ds-cta-simple-contained--grid-item--content--desktop--padding: var(--ds-space-07) var(--ds-space-11); --ds-cta-simple-contained--text--desktop--max-width: 550px; /* Tablet */ --ds-cta-simple-accented--grid-item--content--tablet--padding: var(--ds-space-11); --ds-cta-simple-accented--grid-item--content--tablet--padding-top: var(--ds-space-11); /** Responsive Illustrations */ /* Ultrawide */ --ds-cta-simple--accent--ultrawide--background: none; --ds-cta-simple--accent--ultrawide--aspect-ratio: 0; /* Widescreen */ --ds-cta-simple--accent--widescreen--background: none; --ds-cta-simple--accent--widescreen--aspect-ratio: 0; /* Desktop */ --ds-cta-simple--accent--desktop--background: none; --ds-cta-simple--accent--desktop--aspect-ratio: 0; /* Tablet */ --ds-cta-simple--accent--tablet--background: none; --ds-cta-simple--accent--tablet--aspect-ratio: 0; } .ds-ribbon-spotlight { /*-------------------- Accents --------------------*/ /* Accents - Card */ --ds-ribbon-spotlight--accents-background-image--card: none; --ds-ribbon-spotlight--accents-background-size--card: 100% 33.333%; --ds-ribbon-spotlight--accents-background-repeat--card: no-repeat; --ds-ribbon-spotlight--accents-background-position--card: bottom; --ds-ribbon-spotlight--accents-box-shadow--card: 0px 3px 6px 0px rgba(0, 0, 0, 0.10); /*-------------------- Alignment --------------------*/ /* Alignment - Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight--alignment-align--ribbon-spotlight-wrapper: 'center'; --ds-ribbon-spotlight--alignment-justify--ribbon-spotlight-wrapper: 'top'; /* Alignment - Section Heading */ --ds-ribbon-spotlight--alignment-text--section-heading: 'center'; /* Alignment - Card Group */ --ds-ribbon-spotlight--alignment-align--card-group: 'center'; --ds-ribbon-spotlight--alignment-justify--card-group: 'center'; --ds-ribbon-spotlight--alignment-align-items--card-group: center; --ds-ribbon-spotlight--alignment-align-items--card-group--laptop: baseline; --ds-ribbon-spotlight--alignment-flex-direction--card-group--laptop: row; /* Alignment - Card Heading */ --ds-ribbon-spotlight--alignment-text--card-heading: 'left'; /* Alignment - Copy */ --ds-ribbon-spotlight--alignment-align--copy: 'center'; --ds-ribbon-spotlight--alignment-justify--copy: 'center'; --ds-ribbon-spotlight--alignment-align-items--copy: flex-start; /* Alignment - Click Through */ --ds-ribbon-spotlight--alignment-align--click-through: 'left'; --ds-ribbon-spotlight--alignment-justify--click-through: 'center'; /* Alignment - Image */ --ds-ribbon-spotlight--alignment-object-position--image-bleed--bottom: top; --ds-ribbon-spotlight--alignment-object-position--image-bleed--right: top left; --ds-ribbon-spotlight--alignment-object-position--image-bleed--bottom-right: top left; /*-------------------- Border --------------------*/ /* Border - Card */ --ds-ribbon-spotlight--border-border-radius: 10px; /*-------------------- Color --------------------*/ /* Color - Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight--color-background--ribbon-spotlight-wrapper--accent: var(--ds-neutral0); --ds-ribbon-spotlight--color-background--ribbon-spotlight-wrapper--default: var(--ds-neutral0); /* Color - Accent Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight-accent--color-background--wrapper: transparent; /* Color - Default Ribbon Spotlight Card Background */ --ds-ribbon-spotlight--color-background--card--default--option-1: var(--ds-oak200); --ds-ribbon-spotlight--color-background--card--default--option-2: var(--ds-sunset200); --ds-ribbon-spotlight--color-background--card--default--option-3: var(--ds-sagebrush200); --ds-ribbon-spotlight--color-background--card--default--option-4: var(--ds-denim100); --ds-ribbon-spotlight--color-background--card--default--option-5: var(--ds-rust100); /* Color - Accent Ribbon Spotlight Card Featured */ --ds-ribbon-spotlight-accent--texture: var(--ds-texture-denim); /* Color - Accent Ribbon Spotlight Card Default */ --ds-ribbon-spotlight-accent--color-background--card--default: var(--ds-neutral0); /* Color - Default Ribbon Spotlight Card Text */ --ds-ribbon-spotlight--color-text--card-heading--default: var(--ds-neutral0); /* Color - Accent Ribbon Spotlight Card Text */ --ds-ribbon-spotlight-accent--color-background--card-copy: transparent; --ds-ribbon-spotlight-accent--color-text--card-heading-featured: var(--ds-neutral0); --ds-ribbon-spotlight-accent--color-text--card-heading: var(--ds-oak700); /* Color - Default Ribbon Spotlight Card Link */ --ds-ribbon-spotlight--color-text--card-link--default: var(--ds-neutral0); /* Color - Accent Ribbon Spotlight Card Link */ --ds-ribbon-spotlight-accent--color-text--card-link: var(--ds-neutralInteractive700); --ds-ribbon-spotlight-accent--color-icon--card-icon: var(--ds-neutralInteractive700); --ds-ribbon-spotlight-accent--color-text--card-link-featured: var(--ds-neutral0); --ds-ribbon-spotlight-accent--color-icon--card-icon-featured: var(--ds-neutral0); /* Color - Default Ribbon Spotlight Copy Background */ --ds-ribbon-spotlight--color-background--copy--default--option-1: var(--ds-oak700); --ds-ribbon-spotlight--color-background--copy--default--option-2: var(--ds-sunset700); --ds-ribbon-spotlight--color-background--copy--default--option-3: var(--ds-sagebrush700); --ds-ribbon-spotlight--color-background--copy--default--option-4: var(--ds-denim700); --ds-ribbon-spotlight--color-background--copy--default--option-5: var(--ds-rust700); /* Color - Default Ribbon Spotlight Card Accent Wrapper */ --ds-ribbon-spotlight--color-background--card-accent-wrapper: var(--ds-neutral0); /* Color - Default Ribbon Spotlight Card Accent */ --ds-ribbon-spotlight--color-background-image--card-accent: var(--ds-ribbon-spotlight-accent-tear); /* Color - Accent Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight--color-background--container--accent--default: var(--ds-sagebrush200); /* Color - Ribbon Spotlight Border Accent Wrapper */ --ds-ribbon-spotlight--color-background--border-accent-wrapper: var(--ds-neutral0); /* Color - Ribbon Spotlight Border Accent */ --ds-ribbon-spotlight--color-background-image--border-accent: var(--ds-ribbon-spotlight-accent-tear); /*-------------------- Spacing --------------------*/ /* Spacing - Ribbon Spotlight */ --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight: var(--ds-space-00); --ds-ribbon-spotlight--spacing-width--ribbon-spotlight: 100%; --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight--mobile: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight--tablet: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight--laptop--three-card: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight--desktop--three-card: var(--ds-space-00); /* Spacing - Accent Ribbon Spotlight */ --ds-ribbon-spotlight-accent--spacing-max-width: none; --ds-ribbon-spotlight-accent--spacing-justify-items: center; /* Spacing - Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight--spacing-spacing--ribbon-spotlight-wrapper: 'none'; --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-row-gap--ribbon-spotlight-wrapper: var(--ds-space-07); --ds-ribbon-spotlight--spacing-width--ribbon-spotlight-wrapper: 100%; --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper--mobile: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper--tablet: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper--laptop--two-card: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper--laptop--three-card: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-padding--ribbon-spotlight-wrapper--desktop--two-card: var(--ds-space-08) var(--ds-space-07); --ds-ribbon-spotlight--spacing-max-width--ribbon-spotlight--wrapper: 1280px; /* Spacing - Accent Ribbon Spotlight Wrapper */ --ds-ribbon-spotlight-accent--spacing-max-width--wrapper: 1280px; --ds-ribbon-spotlight-accent--spacing-padding--wrapper: var(--ds-space-09) var(--ds-space-07); --ds-ribbon-spotlight-accent--spacing-padding--wrapper--tablet: var(--ds-space-09) var(--ds-space-08); --ds-ribbon-spotlight-accent--spacing-padding--wrapper--desktop: var(--ds-space-09) var(--ds-space-09); /* Spacing - Section Heading */ --ds-ribbon-spotlight--spacing-padding--section-heading--tablet: var(--ds-space-00) var(--ds-space-00) var(--ds-space-00) var(--ds-space-00); /* Spacing - Card Group */ --ds-ribbon-spotlight--spacing-spacing--card-group: 'medium'; --ds-ribbon-spotlight--spacing-column-gap--card-group: var(--ds-space-05); --ds-ribbon-spotlight--spacing-row-gap--card-group: var(--ds-space-05); --ds-ribbon-spotlight--spacing-width--card-group: 100%; --ds-ribbon-spotlight--spacing-column-gap--card-group--laptop--three-card: var(--ds-space-05); --ds-ribbon-spotlight--spacing-column-gap--card-group--desktop--three-card: var(--ds-space-05); /* Spacing - Accent Card Group */ --ds-ribbon-spotlight-accent--spacing-align-items--card-group: center; /* Spacing - Card */ --ds-ribbon-spotlight--spacing-height--card: auto; --ds-ribbon-spotlight--spacing-max-height--card: 260px; --ds-ribbon-spotlight--spacing-max-width--card: 277px; --ds-ribbon-spotlight--spacing-row-gap--card: var(--ds-space-00); --ds-ribbon-spotlight--spacing-width--card: 100%; --ds-ribbon-spotlight--spacing-height--card--desktop--two-card: 100%; --ds-ribbon-spotlight--spacing-max-height--card--desktop--two-card: 264px; --ds-ribbon-spotlight--spacing-max-width--card--desktop--two-card: 435px; --ds-ribbon-spotlight--spacing-max-width--card--desktop-featured--two-card: 741px; --ds-ribbon-spotlight--spacing-max-width--card--desktop-featured--three-card: 588px; --ds-ribbon-spotlight--spacing-aspect-ratio--card: 0.7623188406; --ds-ribbon-spotlight--spacing-flex-direction: column-reverse; --ds-ribbon-spotlight--spacing-position--card: relative; /* Spacing - Accent Card */ --ds-ribbon-spotlight-accent--spacing-flex-direction--card: row; --ds-ribbon-spotlight-accent--spacing-align-items--card: flex-start; /* Spacing - Accent Card Featured */ --ds-ribbon-spotlight-accent--spacing-background-repeat--card-featured: repeat; --ds-ribbon-spotlight-accent--spacing-background-size--card-featured: cover; /* Spacing - Image */ --ds-ribbon-spotlight--spacing-height--image: 100%; --ds-ribbon-spotlight--spacing-width--image: 100%; --ds-ribbon-spotlight--spacing-padding--image: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--image-bleed--bottom: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--image-bleed--right: var(--ds-space-00); --ds-ribbon-spotlight--spacing-padding--image-bleed--bottom-right: var(--ds-space-00); --ds-ribbon-spotlight--spacing-overflow--image: hidden; /* Spacing - Accent Image */ --ds-ribbon-spotlight-accent--spacing-z-index--image: 3; /* Spacing - Copy */ --ds-ribbon-spotlight--spacing-spacing--copy: 'none'; --ds-ribbon-spotlight--spacing-padding--copy: var(--ds-space-04) var(--ds-space-05) var(--ds-space-05) var(--ds-space-05); --ds-ribbon-spotlight--spacing-row-gap--copy: var(--ds-space-00); --ds-ribbon-spotlight--spacing-width--copy: 100%; /* Spacing - Click Through */ --ds-ribbon-spotlight--spacing-spacing--click-through: 'none'; --ds-ribbon-spotlight--spacing-column-gap--click-through: var(--ds-space-02); /* Spacing - Card Accent Wrapper */ --ds-ribbon-spotlight--spacing-display--card-accent-wrapper: none; --ds-ribbon-spotlight--spacing-position--card-accent-wrapper: absolute; --ds-ribbon-spotlight--spacing-bottom--card-accent-wrapper: var(--ds-space-00); --ds-ribbon-spotlight--spacing-width--card-accent-wrapper: 100%; --ds-ribbon-spotlight--spacing-height--card-accent-wrapper: 18px; /* Spacing - Accent Card Accent Wrapper */ --ds-ribbon-spotlight-accent--spacing-display--card-accent-wrapper: flex; /* Spacing - Card Accent */ --ds-ribbon-spotlight--spacing-position--card-accent: relative; --ds-ribbon-spotlight--spacing-background-position--card-accent: (--ds-space-00); --ds-ribbon-spotlight--spacing-margin-top--card-accent: -20.5px; --ds-ribbon-spotlight--spacing-width--card-accent: 100%; --ds-ribbon-spotlight--spacing-height--card-accent: 41px; /* Spacing - Border Accent Wrapper */ --ds-ribbon-spotlight--spacing-display--border-accent-wrapper: none; --ds-ribbon-spotlight--spacing-height--border-accent-wrapper: var(--ds-space-06); --ds-ribbon-spotlight--spacing-width--border-accent-wrapper: 100%; --ds-ribbon-spotlight--spacing-position--border-accent-wrapper: relative; --ds-ribbon-spotlight-accented--spacing-display--border-accent-wrapper: flex; /* Spacing - Border Accent */ --ds-ribbon-spotlight--spacing-position--border-accent: absolute; --ds-ribbon-spotlight--spacing-height--border-accent: 41px; --ds-ribbon-spotlight--spacing-width--border-accent: 100%; --ds-ribbon-spotlight--spacing-offset--border-accent: -20.5px; /* Spacing - Accent Border Accent */ --ds-ribbon-spotlight-accent--spacing-display--border-accent: flex; /*-------------------- Typography --------------------*/ /* Typography - Section Heading */ --ds-ribbon-spotlight--typography-size--section-heading--devices: 'device200'; --ds-ribbon-spotlight--typography-size--section-heading--desktop: 'h200'; --ds-ribbon-spotlight--typography-alignment--section-heading: 'center'; --ds-ribbon-spotlight--typography-bold--section-heading: 'true'; --ds-ribbon-spotlight--typography-line-height--section-heading: 36px; --ds-ribbon-spotlight--typography-line-height--section-heading--tablet: 36px; /* Typography - Card Heading */ --ds-ribbon-spotlight--typography-size--card-heading--devices: 'h200'; --ds-ribbon-spotlight--typography-size--card-heading--desktop: 'h200'; --ds-ribbon-spotlight--typography-alignment--card-heading: 'left'; --ds-ribbon-spotlight--typography-bold--card-heading: 'true'; --ds-ribbon-spotlight--typography-font-size--copy-heading: 20px; --ds-ribbon-spotlight--typography-font-size--copy-heading--desktop: 32px; /* Typography - Link */ --ds-ribbon-spotlight--typography-font--link: var(--ds-font-family-body); --ds-ribbon-spotlight--typography-font-weight--link: var(--ds-font-weight-bold); } /* =========================================================== Alias Tokens - Ribbon Preview - DIG =========================================================== 1. Color 2. Layout 3. Spacing */ .ds-ribbon-preview { /* Color */ --ds-ribbon-preview--card--background-color--color-block: var(--ds-neutral0); --ds-ribbon-preview--card--background-color--accent: var(--ds-neutral0); --ds-ribbon-preview--card--background-color--brand: var(--ds-neutral0); --ds-ribbon-preview--card--background-color--accent--three-card--tablet: var(--ds-neutral0); --ds-ribbon-preview--card--background-color--brand--three-card--tablet: var(--ds-neutral0); --ds-ribbon-preview--icon--fill--accent: rgba(21, 71, 52, 0.50); --ds-ribbon-preview--icon--fill--brand: rgba(21, 71, 52, 0.50); --ds-ribbon-preview--icon--fill--default: rgba(21, 71, 52, 0.50); /* Layout */ --ds-ribbon-preview--module-container--max-width: unset; --ds-ribbon-preview--module-container--width: 100%; --ds-ribbon-preview--module-container--display: flex; --ds-ribbon-preview--module-container--justify-content: center; --ds-ribbon-preview--grid-container--max-width: 1280px; --ds-ribbon-preview--grid-container--width: 100%; --ds-ribbon-preview--card-container--grid-template-columns: 1fr; --ds-ribbon-preview--card-stack--align-items: baseline; --ds-ribbon-preview--card-stack--width: 100%; --ds-ribbon-preview--card--max-width: 230px; --ds-ribbon-preview--card--border-radius: var(--ds-space-00); --ds-ribbon-preview--card--width: 100%; --ds-ribbon-preview--icon-container--display: flex; --ds-ribbon-preview--icon-container--flex-flow: column nowrap; --ds-ribbon-preview--icon-container--align-items: center; --ds-ribbon-preview--icon-container--justify-content: center; --ds-ribbon-preview--icon-container--background: var(--ds-accent-icon); --ds-ribbon-preview--icon-container--background-size: contain; --ds-ribbon-preview--icon-container--background-repeat: no-repeat; /* Spacing */ --ds-ribbon-preview--module-container--padding: var(--ds-space-08) var(--ds-space-06); --ds-ribbon-preview--grid-container--row-gap--three-card: var(--ds-space-07); --ds-ribbon-preview--card-stack--gap--three-card: var(--ds-space-07); --ds-ribbon-preview--card-stack--column-gap: var(--ds-space-06); --ds-ribbon-preview--card--padding: var(--ds-space-07) var(--ds-space-00); --ds-ribbon-preview--card--row-gap: var(--ds-space-05); --ds-ribbon-preview--icon-container--padding: var(--ds-space-05); /* Typography */ --ds-ribbon-preview--module-heading--font-weight: var(--ds-font-weight-bold); } /* =========================================================== Alias Tokens - Error 404 Module - DIG =========================================================== 1. Asset Tokens 2. Color Tokens 3. Layout Tokens 4. Overlay Tokens 5. Spacing Tokens 6. Typography Tokens */ .ds-error-404 { /* ==== Color Tokens ==== */ /* Variation - All Variants */ --ds-error-404--module-container--background-color--default: var(--ds-neutral0); --ds-error-404--error-heading--color--default: var(--ds-oak700); --ds-error-404--error-paragraph--color--default: var(--ds-oak700); /* ==== Layout Tokens ==== */ /* Variation - All Variants */ --ds-error-404--module-container--max-width: unset; --ds-error-404--module-container--width: 100%; --ds-error-404--grid-container--grid-template-columns--mobile: 1fr; --ds-error-404--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; --ds-error-404--grid-container--grid-template-columns--media-right--tablet: 1fr 1fr; --ds-error-404--content-container--align-items--tablet: center; --ds-error-404--content-container--height--tablet: 100%; --ds-error-404--content-container--order--tablet: 1; --ds-error-404--content-container--order--mobile: 2; --ds-error-404--content-container--order--media-right--tablet: 1; --ds-error-404--media-container--align-items--tablet: center; --ds-error-404--media-container--height--tablet: 100%; --ds-error-404--media-container--order--tablet: 2; --ds-error-404--media-container--order--media-right--tablet: 2; --ds-error-404--media-container--place-items: center; --ds-error-404--media-content--height--tablet: 100%; --ds-error-404--media-content--width--mobile: auto; --ds-error-404--media-content--width: auto; /* Variation - Media Right */ --ds-error-404--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; /* ==== Spacing Tokens ==== */ /* Variation - All Variants */ --ds-error-404--module-container--padding--mobile: var(--ds-space-00); --ds-error-404--grid-container--column-gap--desktop: var(--ds-space-09); --ds-error-404--grid-container--column-gap--tablet: var(--ds-space-09); --ds-error-404--grid-container--gap--mobile: var(--ds-space-07); --ds-error-404--grid-container--row-gap--tablet: var(--ds-space-07); --ds-error-404--grid-container--row-gap--desktop: var(--ds-space-07); --ds-error-404--content-container--padding--desktop: var(--ds-space-09) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-error-404--content-container--padding--tablet: var(--ds-space-10); --ds-error-404--content-container--padding--mobile: var(--ds-space-07); --ds-error-404--content-container--padding--media-right--tablet: var(--ds-space-07) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-error-404--content-container--padding--media-right--laptop: var(--ds-space-09); --ds-error-404--content-container--padding--media-right--desktop: var(--ds-space-09); --ds-error-404--content-stack--gap: var(--ds-space-05); --ds-error-404--content-paragraph--padding-bottom: var(--ds-space-05); --ds-error-404--media-container--padding--desktop: var(--ds-space-00) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-error-404--media-container--padding--tablet: var(--ds-space-09) var(--ds-space-11); --ds-error-404--media-container--padding--mobile: var(--ds-space-07) var(--ds-space-07) var(--ds-space-00) var(--ds-space-07); --ds-error-404--media-container--padding--media-right--tablet: var(--ds-space-00); --ds-error-404--media-container--padding--media-right--desktop: var(--ds-space-00) var(--ds-space-12) var(--ds-space-00) var(--ds-space-00); /* Variation - Media Right */ --ds-error-404--grid-container--column-gap--media-right--tablet: var(--ds-space-00); --ds-error-404--grid-container--column-gap--media-right--desktop: var(--ds-space-00); /* ==== State ==== */ /* Variation - All Variants */ --ds-error-404--media-image--cursor--hover: pointer; /* ==== Typography Tokens ==== */ /* Variation - All Variants */ --ds-error-404--content-heading--line-height--mobile: 56px; --ds-error-404--content-heading--font-size--mobile: 48px; --ds-error-404--content-heading--word-break--mobile: break-word; --ds-error-404--content-heading--font-size--tablet: 64px; --ds-error-404--content-heading--line-height--tablet: normal; --ds-error-404--content-heading--font-size--desktop: 64px; --ds-error-404--content-heading--line-height--desktop: normal; --ds-error-404--content-paragraph--font-size--tablet: 24px; } /* =========================================================== Alias Tokens - Error 500 Module - DIG =========================================================== 1. Asset Tokens 2. Color Tokens 3. Layout Tokens 4. Overlay Tokens 5. Spacing Tokens 6. Typography Tokens */ .ds-error-500 { /* ==== Color Tokens ==== */ /* Variation - All Variants */ --ds-error-500--module-container--background-color--default: var(--ds-neutral0); --ds-error-500--error-heading--color--default: var(--ds-oak700); --ds-error-500--error-paragraph--color--default: var(--ds-oak700); /* ==== Layout Tokens ==== */ /* Variation - All Variants */ --ds-error-500--module-container--max-width: unset; --ds-error-500--module-container--width: 100%; --ds-error-500--grid-container--grid-template-columns--mobile: 1fr; --ds-error-500--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; --ds-error-500--grid-container--grid-template-columns--media-right--tablet: 1fr 1fr; --ds-error-500--content-container--align-items--tablet: center; --ds-error-500--content-container--height--tablet: 100%; --ds-error-500--content-container--order--tablet: 1; --ds-error-500--content-container--order--mobile: 2; --ds-error-500--content-container--order--media-right--tablet: 1; --ds-error-500--media-container--align-items--tablet: center; --ds-error-500--media-container--height--tablet: 100%; --ds-error-500--media-container--order--tablet: 2; --ds-error-500--media-container--order--media-right--tablet: 2; --ds-error-500--media-container--place-items: center; --ds-error-500--media-content--height--tablet: 100%; --ds-error-500--media-content--width--mobile: auto; --ds-error-500--media-content--width: auto; /* Variation - Media Right */ --ds-error-500--grid-container--grid-template-columns--media-right--desktop: 1fr 1fr; /* ==== Spacing Tokens ==== */ /* Variation - All Variants */ --ds-error-500--module-container--padding--mobile: var(--ds-space-00); --ds-error-500--grid-container--column-gap--desktop: var(--ds-space-09); --ds-error-500--grid-container--column-gap--tablet: var(--ds-space-09); --ds-error-500--grid-container--gap--mobile: var(--ds-space-07); --ds-error-500--grid-container--row-gap--tablet: var(--ds-space-07); --ds-error-500--grid-container--row-gap--desktop: var(--ds-space-07); --ds-error-500--content-container--padding--desktop: var(--ds-space-09) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-error-500--content-container--padding--tablet: var(--ds-space-10); --ds-error-500--content-container--padding--mobile: var(--ds-space-07); --ds-error-500--content-container--padding--media-right--tablet: var(--ds-space-07) var(--ds-space-07) var(--ds-space-10) var(--ds-space-07); --ds-error-500--content-container--padding--media-right--laptop: var(--ds-space-09); --ds-error-500--content-container--padding--media-right--desktop: var(--ds-space-09); --ds-error-500--content-stack--gap: var(--ds-space-05); --ds-error-500--content-paragraph--padding-bottom: var(--ds-space-05); --ds-error-500--media-container--padding--desktop: var(--ds-space-00) var(--ds-space-11) var(--ds-space-00) var(--ds-space-11); --ds-error-500--media-container--padding--tablet: var(--ds-space-09) var(--ds-space-11); --ds-error-500--media-container--padding--mobile: var(--ds-space-07) var(--ds-space-07) var(--ds-space-00) var(--ds-space-07); --ds-error-500--media-container--padding--media-right--tablet: var(--ds-space-00); --ds-error-500--media-container--padding--media-right--desktop: var(--ds-space-00) var(--ds-space-12) var(--ds-space-00) var(--ds-space-00); /* Variation - Media Right */ --ds-error-500--grid-container--column-gap--media-right--tablet: var(--ds-space-00); --ds-error-500--grid-container--column-gap--media-right--desktop: var(--ds-space-00); /* ==== State ==== */ /* Variation - All Variants */ --ds-error-500--media-image--cursor--hover: pointer; /* ==== Typography Tokens ==== */ /* Variation - All Variants */ --ds-error-500--content-heading--line-height--mobile: 56px; --ds-error-500--content-heading--font-size--mobile: 48px; --ds-error-500--content-heading--word-break--mobile: break-word; --ds-error-500--content-heading--font-size--tablet: 64px; --ds-error-500--content-heading--line-height--tablet: normal; --ds-error-500--content-heading--font-size--desktop: 64px; --ds-error-500--content-heading--line-height--desktop: normal; --ds-error-500--content-paragraph--font-size--tablet: 24px; } .ds-career-listing { /* Assets */ --ds-career-listing-icon-location: var(--ds-icon-location); /* Container */ --ds-career-listing--space-padding--container: var(--ds-space-07) var(--ds-space-06) 18px; --ds-career-listing--space-padding--container--tablet: var(--ds-space-08) var(--ds-space-09) 34px; /* Jobs Container */ --ds-career-listing--space-display--jobs-container: flex; --ds-career-listing--space-flex-direction--jobs-container: column; --ds-career-listing--space-gap--jobs-container: var(--ds-space-03); --ds-career-listing--space-gap--jobs-container--tablet: var(--ds-space-02); /* Department Heading */ --ds-career-listing--space-margin--department-heading: var(--ds-space-00) var(--ds-space-00) var(--ds-space04); --ds-career-listing--space-margin-top--department-heading--not-first-child: var(--ds-space-05); --ds-career-listing--color-text--department-heading: var(--ds-oak700); --ds-career-listing--typography-font-family--department-heading: var(--ds-font-family-heading); --ds-career-listing--typography-font-weight--department-heading: var(--ds-font-weight-bold); --ds-career-listing--typography-font-size--department-heading: 20px; --ds-career-listing--typography-line-height--department-heading: 25px; /* Job */ --ds-career-listing--space-padding--job: var(--ds-space-03) var(--ds-space-03); --ds-career-listing--space-padding--job--tablet: var(--ds-space-02) var(--ds-space-03); --ds-career-listing--space-margin--job: var(--ds-space-00); --ds-career-listing--space-position--job: relative; --ds-career-listing--space-display--job: flex; --ds-career-listing--space-flex-direction--job: column-reverse; --ds-career-listing--space-flex-direction--job--tablet: row-reverse; --ds-career-listing--space-justify-content--job: space-between; --ds-career-listing--space-align-items--job: flex-start; --ds-career-listing--space-width--job: 100%; --ds-career-listing--space-border-radius--job: var(--ds-space-02); --ds-career-listing--space-gap--job: var(--ds-space-02); --ds-career-listing--space-box-shadow--job: 0px 2px 4px rgba(0, 0, 0, 0.1); --ds-career-listing--space-box-shadow--job--hover: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Job Title */ --ds-career-listing--space-display--job-title: none; /* Job Info */ --ds-career-listing--space-display--job-info: flex; --ds-career-listing--space-padding--job-info: var(--ds-space-00); --ds-career-listing--space-margin--job-info: flex; --ds-career-listing--space-z-index--job-info: 0; --ds-career-listing--color-text--job-info: var(--ds-oak700); --ds-career-listing--typography-font-family--job-info: var(--ds-font-family-body); --ds-career-listing--typography-font-size--job-info: 14px; --ds-career-listing--typography-text-wrap--job-info: nowrap; /* Job Location Label */ --ds-career-listing--space-display--job-location: none; /* Job Info Icon - Before */ --ds-career-listing--content--job-info-icon: ''; --ds-career-listing--space-display--job-info-icon: inline-block; --ds-career-listing--space-vertical-align--job-info-icon: center; --ds-career-listing--space-height--job-info-icon: 20px; --ds-career-listing--space-width--job-info-icon: 20px; --ds-career-listing--space-margin-right--job-info-icon: var(--ds-space-01); /* Job Link Container */ --ds-career-listing--space-height--job-link-container: auto; --ds-career-listing--space-width--job-link-container: auto; --ds-career-listing--space-padding--job-link-container: var(--ds-space-00); --ds-career-listing--space-z-index--job-link-container: 2; /* Job Link */ --ds-career-listing--space-display--job-link: flex; --ds-career-listing--space-padding--job-link: var(--ds-space-00); --ds-career-listing--space-margin--job-link: var(--ds-space-00); --ds-career-listing--color-text--job-link: var(--ds-sunset700); --ds-career-listing--typography-font-family--job-link: var(--ds-font-family-body); --ds-career-listing--typography-font-weight--job-link: var(--ds-font-weight-normal); --ds-career-listing--typography-font-size--job-link: 16px; --ds-career-listing--typography-line-height--job-link: 20px; --ds-career-listing--typography-text-decoration--job-link: underline; /* Job Link - Hover */ --ds-career-listing--color-text--job-link--hover: var(--ds-sunset600); --ds-career-listing--typography-text-decoration--job-link--hover: none; /* Job Link - Active */ --ds-career-listing--color-text--job-link--active: var(--ds-sunset800); --ds-career-listing--typography-text-decoration--job-link--active: none; /* Job Link - Visited */ --ds-career-listing--color-text--job-link--visited: var(--ds-sunset800); /* Job Background Link */ --ds-career-listing--space-position--job-background-link: absolute; --ds-career-listing--space-width--job-background-link: 100%; --ds-career-listing--space-height--job-background-link: 100%; --ds-career-listing--space-top--job-background-link: 0px; --ds-career-listing--space-left--job-background-link: 0px; --ds-career-listing--space-z-index--job-background-link: 1; } .ds-staff-listing { --ds-staff-listing--module-container--max-width: 1280px; --ds-staff-listing--module-container--padding: var(--ds-space-07) var(--ds-space-04); --ds-staff-listing--module-container--row-gap: var(--ds-space-06); --ds-staff-listing--module-container--width: 100%; --ds-staff-listing--heading--font-weight: 700; --ds-staff-listing--input-container--align-items: flex-start; --ds-staff-listing--input-container--justify-content--desktop: flex-end; --ds-staff-listing--input-container--padding-bottom: var(--ds-space-04); --ds-staff-listing--input-container--padding-bottom--tablet: var(--ds-space--00); --ds-staff-listing--search-filter--margin: var(--ds-space-00); --ds-staff-listing--search-filter--max-width: 215px; --ds-staff-listing--search-filter--padding-top: var(--ds-space-00); --ds-staff-listing--filter-input--line-height: 38px; --ds-staff-listing--filter-input--padding: var(--ds-space-00) var(--ds-space-04) var(--ds-space-00) var(--ds-space-00); --ds-staff-listing--filter-input--width: 100%; --ds-staff-listing--input-field--margin: var(--ds-space-00); --ds-staff-listing--error-icon--display: none; --ds-staff-listing--staff-listing--align-items: flex-start; --ds-staff-listing--staff-listing--column-gap: var(--ds-space-05); --ds-staff-listing--staff-listing--grid-template-columns: repeat(auto-fill, 277px); --ds-staff-listing--staff-listing--justify-content: center; --ds-staff-listing--staff-listing--padding: var(--ds-space-00) var(--ds-space-06); --ds-staff-listing--staff-listing--row-gap: var(--ds-space-07); --ds-staff-listing--staff-listing--row-gap--tablet: var(--ds-space-06); --ds-staff-listing--staff-card--align-items: flex-start; --ds-staff-listing--staff-card--border-radius: 0px; --ds-staff-listing--staff-card--row-gap: var(--ds-space-00); --ds-staff-listing--staff-image--padding-bottom: var(--ds-space-02); --ds-staff-listing--staff-name--font-weight: 600; --ds-staff-listing--staff-title--padding-bottom: var(--ds-space-02); --ds-staff-listing--staff-link--border-radius: 4px; --ds-staff-listing--staff-link--transition: all .3s ease-in-out; --ds-staff-listing--staff-link--background-color--hover: var(--ds-neutralInteractive100); --ds-staff-listing--icon-link--align-items: center; --ds-staff-listing--icon-link--display: flex; --ds-staff-listing--icon-link--height: 32px; --ds-staff-listing--icon-link--justify-content: center; --ds-staff-listing--icon-link--width: 32px; } /* Normalize Normalizes the html elements with the design system tokens */ html{ font-size: var(--ds-font-size-body200); } * { box-sizing: border-box; } body{ font-family: var(--ds-font-family-body); font-style: var(--ds-font-style-normal); font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-body200); line-height: normal; letter-spacing: normal; color: var(--ds-font-color); margin: var(--ds-inline-large); overflow-x: hidden; } p{ font-family: var(--ds-font-family-body); font-style: var(--ds-font-style-normal); font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-body200); line-height: normal; letter-spacing: normal; color: var(--ds-font-color); margin: 0; } .label{ font-family: var(--ds-font-family-body); font-style: var(--ds-font-style-normal); font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-label100); line-height: normal; letter-spacing: normal; } .micro{ font-family: var(--ds-font-family-body); font-style: var(--ds-font-style-normal); font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-micro200); line-height: normal; letter-spacing: normal; } a { color: var(--ds-font-color); } a:visited { color: var(--ds-neutral600); } a:hover { color: var(--ds-neutral600); } a:active { color: var(--ds-neutral800); } h1, h2, h3, h4, h5, h6{ font-family: var(--ds-font-family-heading); font-style: var(--ds-font-style-normal); letter-spacing: normal; line-height: normal; color: var(--ds-font-color); margin: 0; padding: 0; } h1 { font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-h600); } h2 { font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-h500); } h3 { font-weight: var(--ds-font-weight-normal); } h4 { font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-h300); } h5 { font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-h200); } h6 { font-weight: var(--ds-font-weight-normal); font-size: var(--ds-font-size-h100); } @media screen and (max-width: 768px){ h1 { font-size: var(--ds-font-size-device600); } h2 { font-size: var(--ds-font-size-device500); } h3 { font-size: var(--ds-font-size-device400); } h4 { font-size: var(--ds-font-size-device300); } h5 { font-size: var(--ds-font-size-device200); } h6 { font-size: var(--ds-font-size-device100); } } .hs-form, .hsfc-Form{ padding: 32px 0px; } .hs-form-field{ padding-bottom: 12px; } input.hs-input, textarea.hs-input, select.hs-input{ border: 1px solid var(--ds-neutral300); border-radius: 7px; color: var(--ds-neutral400); font-family: var(--ds-font-family-body); font-size: var(--ds-font-size-body); padding: var(--ds-space-04) var(--ds-space-07) var(--ds-space-04) var(--ds-space-04); text-overflow: ellipsis; white-space: nowrap; width: calc(100% - var(--ds-space-04) - var(--ds-space-07)); transition: border .3s ease-in-out; } div.input select.hs-input{ width: 100%; } input.hs-input:hover, textarea.hs-input:hover, select.hs-input:hover{ border-color: var(--ds-neutral700); } input.hs-input:focus, textarea.hs-input:focus, select.hs-input:focus{ border-color: var(--ds-neutral700); box-shadow: 0px 6px 8px rgba(0,0,0,.1); outline: none; } .hs-form-field > label { font-family: var(--ds-font-family-heading); font-size: var(--ds-font-size-body100); color: #54565b; z-index: 1; } .hsfc-Form { --hsf-field-label__font-family: var(--ds-font-family-heading); --hsf-field-label__font-size: var(--ds-font-size-body100); --hsf-field-label__color: var(--ds-neutral500); --hsf-field-label-requiredindicator__color: var(--ds-red700); --hsf-field-input__background-color: var(--ds-neutral0); --hsf-field-input__border-color: var(--ds-neutral300); --hsf-field-input__border-radius: 4px; --hsf-field-input__border-style: solid; --hsf-field-input__color: var(--ds-neutral400); --hsf-field-input__font-family: var(--ds-font-family-heading); --hsf-field-input__font-size: var(--ds-font-size-body100); --hsf-field-input__line-height: 51px; --hsf-field-checkbox__padding: var(--ds-space-02); --hsf-field-input__padding: var(--ds-space-00) var(--ds-space-04); --hsf-field-textarea__font-family: var(--ds-font-family-heading); --hsf-field-textarea__font-size: var(--ds-font-size-body100); --hsf-field-textarea__color: var(--ds-neutral400); --hsf-field-textarea__border-color: var(--ds-neutral300); --hsf-field-textarea__border-radius: 4px; --hsf-field-textarea__border-style: solid; --hsf-erroralert__color: var(--ds-red700); --hsf-erroralert__font-family: var(--ds-font-family-heading); --hsf-erroralert__font-size: var(--ds-font-size-body100); } .hsfc-TextInput { line-height: var(--hsf-field-input__line-height); transition: border .3s ease-in-out, box-shadow .3s ease-in-out !important; } .hsfc-TextareaInput { align-content: center; height: 51px; transition: border .3s ease-in-out, box-shadow .3s ease-in-out !important; } .hsfc-TextareaInput:hover { border-color: var(--ds-neutral700) !important; box-shadow: none !important; } .hsfc-TextareaInput:focus, .hsfc-TextareaInput:focus-within { border-color: var(--ds-neutral700) !important; box-shadow: 0px 6px 8px rgba(0, 0, 0, .1) !important; outline: none; } input.hsfc-TextInput:hover { border-color: var(--ds-neutral700) !important; box-shadow: none !important; } input.hsfc-TextInput:focus, input.hsfc-TextInput:focus-within { border-color: var(--ds-neutral700) !important; box-shadow: 0px 6px 8px rgba(0, 0, 0, .1) !important; outline: none; } input.hsfc-TextInput:has(+ .hsfc-ErrorAlert):hover, input.hsfc-TextInput:has(+ .hsfc-ErrorAlert):focus, input.hsfc-TextInput:has(+ .hsfc-ErrorAlert):focus-within{ border-color: var(--ds-red700) !important; } .hsfc-FieldLabel:has(+ input + .hsfc-ErrorAlert){ color: var(--ds-red700) !important; } .hsfc-Button { background: var(--ds-brand700) 0 0 no-repeat padding-box !important; color: var(--ds-neutral0) !important; font-size: var(--ds-font-size-body) !important; font-family: var(--ds-font-family-heading) !important; font-weight: 600 !important; border-radius: 7px !important; border: none !important; cursor: pointer !important; line-height: 51px !important; padding: 0px 16px !important; transition: all .15s linear !important; } .hsfc-Button:hover, .hsfc-Button:focus { outline: none !important; background-color: var(--ds-brand600) !important; } ul.inputs-list{ list-style: none; padding: 0; } .hs-form-field > label > span.hs-form-required{ color: #ce2e12; } li.hs-form-checkbox > label, .hs-form-bolleancheckbox > label, label.hs-form-radio-display, .hs-form-booleancheckbox-display{ display: flex; flex-flow: row nowrap; align-items: center; column-gap: 8px; width: fit-content; cursor: pointer; } li.hs-form-checkbox > label > input, .hs-form-booleancheckbox > label > input, label.hs-form-radio-display > input.hs-input{ width: 22px; height: 22px; } input.hs-button{ background: var(--ds-brand700) 0 0 no-repeat padding-box; color: var(--ds-neutral0); font-size: var(--ds-font-size-heading); border-radius: 7px; border: none; cursor: pointer; line-height: 51px; padding: 0px 16px; transition: all .15s linear; } input.hs-button:hover, input.-hs-button:focus{ outline: none; background-color: var(--ds-brand600); } div.hs-form-field:has(input.error) label, ul.hs-error-msgs > li > label{ color: #ce2e12; } div.hs-form-field > div.input > input.error{ border-color: #ce2e12;` } ul.hs-error-msgs{ list-style: none; padding: 4px 16px; margin: 0px; transition: all .3s ease-in-out; } ul.hs-error-msgs > li > label.hs-error-msg{ color: #ce2e12; font-family: var(--ds-font-family-body); font-size: var(--ds-font-size-label200); } div.submitted-message{ font-family: var(--ds-font-family-body); font-size: var(--ds-font-size-body200); color: var(--ds-font-color); padding: 32px 0; }