@import url('https://fonts.cdnfonts.com/css/pp-neue-montreal'); @font-face { font-family: 'Graphik'; src: url('../fonts/Graphik-Extralight.otf') format('opentype'); font-weight: 200; font: normal; } @font-face { font-family: 'Graphik'; src: url('../fonts/Graphik-Light.otf') format('opentype'); font-weight: 300; font: normal; } @font-face { font-family: 'Graphik'; src: url('../fonts/Graphik-Regular.otf') format('opentype'); font-weight: 400; font: normal; } @font-face { font-family: 'Graphik'; src: url('../fonts/Graphik-Medium.otf') format('opentype'); font-weight: 500; font: normal; } @font-face { font-family: 'Graphik'; src: url('../fonts/Graphik-Bold.otf') format('opentype'); font-weight: 700; font: normal; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } @media (min-width: 768px) { .menu-button { display: none !important; } } /* Medias */ @media (min-width: 768px) { .menu-button { display: none !important; } } body { background-color: white; font-family: "Graphik", sans-serif; font-weight: 300; color: #101010; } .btn-primary, .btn-primary:visited { /*background-color: #101010 !important;*/ /*border-color: #101010 !important;*/ /*border-radius: 0;*/ border-radius: var(--radius-xs-mode-1, 4px); border: 2px solid var(--gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12)) !important; background: var(--component-colors-components-buttons-primary-button-primary-bg, #333) !important; box-shadow: 0 0 0 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--colors-effects-shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)); } .btn-primary:hover, .btn-primary:active { color: #101010 !important; border-color: #101010 !important; background-color: white !important; border-radius: 0; } .btn-outline-primary, .btn-outline-primary:visited { color: #101010 !important; border-color: #101010 !important; background-color: white !important; border-radius: 0; } .btn-outline-primary:hover, .btn-outline-primary:active { background-color: #101010 !important; border-color: #101010 !important; border-radius: 0; } .cc-btn { background-color: #101010; color: white !important; } a, a:hover { color: #101010; } input:focus { border-color: #101010 !important; } input { border-radius: 0 !important; } /* First page */ body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center + div.card-deck.mb-3.text-center > div:nth-child(1):has(> div.card-body > h1 > span.oi.oi-key), body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center + div.card-deck.mb-3.text-center > div:nth-child(2), body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center + div.card-deck.mb-3.text-center + div.card-deck.mb-3.text-center > div:nth-child(1) { display: none; } body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center > h1 { font-size: 0; } body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center > p { font-size: 4em; font-weight: 700; margin-top: 1em; } body > div.container > div.welcome-block.px-3.py-3.pt-md-5.pb-md-4.mx-auto.text-center { max-width: 100%; } /* Profile */ body > div.container > div.row > div.col-lg-2 > img.img-thumbnail { display: none; } /* Variables */ :root { /* Colors */ --color-background: #ffffff; --color-background-inactive: #101010; --color-background-bg-primary: #FFFFFF; --color-background-bg-tertiary: #F2F5E7; --color-text-primary-900: #121212; --color-text-tertiary-600: #535862; --color-border-primary: #D6D8CF; --color-border-primary-focus: #535862; --color-border-shadow-xs: #0A0D12 5%; --color-text-error-primary-600: #D92D20; --color-buttons-primary-bg: #414651; --color-buttons-primary-border: rgba(255, 255, 255, 0.12); --color-buttons-primary-bg-hover: #FFFFFF; --color-buttons-primary-border-hover: #414651; --color-buttons-outline-primary-bg: var(--color-background-bg-primary); --color-buttons-outline-primary-border: var(--color-border-primary); --color-buttons-outline-primary-bg-hover: var(--color-border-primary); --color-buttons-outline-primary-border-hover: rgba(255, 255, 255, 0.12); --color-button-tertiary-fg: #414651; --color-effects-shadows-xs: #0A0D12 5%; --color-effects-shadows-skeumorphic-inner: #0A0D12 5%; --color-effects-shadows-skeumorphic-inner-border: #0A0D12 18%; /* General */ --width-min: 376px; --width-max: 100%; --width-xs: 360px; --width-sm: 480px; --width-lg: 640px; --height-max: 960px; --container-width-max: var(--width-max); --container-padding-desktop: 32px; --container-padding-left: var(--container-padding-desktop); --container-padding-right: var(--container-padding-desktop); --line-height-display-md: 44px; --line-height-display-sm: 38px; --line-height-text-sm: 20px; --line-height-text-md: 24px; --radius-sm: 4px; --radius-md: 8px; --radius-full: 9999px; --border-size-sm: 1px; --spacing-xxs: 2px; --spacing-xs: 4px; --spacing-sm: 6px; --spacing-md: 8px; --spacing-lg: 12px; --spacing-xl: 16px; --spacing-2xl: 20px; --spacing-3xl: 24px; --spacing-4xl: 32px; --spacing-6xl: 48px; --spacing-7xl: 64px; --spacing-8xl: 80px; --spacing-9xl: 96px; /* Icons */ --icon-size-sm: 14px; --icon-size-md: 24px; --icon-size-lg: 64px; --icon-featured-size-md: 28px; --icon-arrow-url: url('/images/arrow.svg'); --icon-arrow-left-url: url('/images/arrow-left.svg'); --icon-email-url: url('/images/email.svg'); --icon-check-url: url('/images/check.svg'); --icon-key-url: url('/images/key.svg'); --icon-lock-url: url('/images/lock.svg'); --icon-error-url: url('/images/error.svg'); --icon-google-url: url('/images/google.svg'); /* Fonts */ --font-family: 'PP Neue Montreal', sans-serif; --font-family-title: var(--font-family); --font-size-display-sm: 14px; --font-size-display-md: 36px; --font-size-display-lg: 48px; --font-size-text-sm: 14px; --font-size-text-md: 16px; --font-size-header-sm: 30px; /* Text */ --text-normal-font-family: var(--font-family); --text-normal-font-weight: 500; --text-normal-font-size: var(--font-size-display-sm); --text-normal-line-height: var(--line-height-text-sm); /* Page */ --aid-page-frame-left-width: fill; --aid-page-frame-left-heigth: 960px; --aid-page-frame-left-width-min: var(--width-sm); --aid-page-frame-left-width-max: var(--width-lg); --aid-page-frame-right-width: fill; --aid-page-frame-right-heigth: 960px; --aid-page-frame-right-width-min: 0px; --aid-page-frame-right-width-max: 100%; --aid-content-frame-content-min-width: var(--width-xs); --aid-content-frame-content-max-width: var(--width-xs); /* Headers */ --aid-page-header-h1-font-family: var(--font-family-title); --aid-page-header-h1-font-weight: 500; --aid-page-header-h1-font-size: var(--font-size-display-lg); --aid-page-header-h1-line-height: var(--line-height-display-md); --aid-page-header-h1-color: var(--color-text-primary_900); --aid-page-header-h4-font-family: var(--font-family-title); --aid-page-header-h4-font-weight: 400; --aid-page-header-h4-font-size: var(--font-size-text-md); --aid-page-header-h4-line-height: var(--line-height-text-md); --aid-page-header-h4-color: var(--color-text-tertiary_600); /* Links */ --aid-link-focus-radius: var(--radius-sm, 4px); /*Form controls*/ --aid-control-group-gap: var(--spacing-2xl); --aid-control-width: 100%; --aid-control-height: 44px; --aid-control-border: var(--border-size-sm) solid var(--color-border-primary); --aid-control-border-shadow: 0 1px 2px 0 var(--color-border-shadow-xs); --aid-control-radius: var(--radius-md, 8px); --aid-control-gap: var(--spacing-md, 8px);; --aid-control-label-gap: var(--spacing-xxs); --aid-control-button-max-width: var(--width-xs); --aid-checkbox-box-radius: var(--radius-sm, 4px); } /* Variables */ :root { --colors-base-white: #FFFFFFFF; --colors-base-black: #000000FF; --colors-gray-25: #F8FAF3FF; --colors-gray-blue-25: #FCFCFDFF; --colors-gray-cool-25: #FCFCFDFF; --colors-gray-modern-25: #FCFCFDFF; --colors-gray-neutral-25: #FCFCFDFF; --colors-gray-50: #F7F6F3FF; --colors-gray-neutral-50: #F9FAFBFF; --colors-gray-100: #EFEDE6FF; --colors-gray-200: #DEDCD5FF; --colors-gray-300: #CCCCCCFF; --colors-gray-400: #AAAAAAFF; --colors-gray-500: #7F7F7FFF; --colors-gray-600: #737373FF; --colors-gray-700: #333333FF; --colors-gray-800: #222222FF; --colors-gray-900: #121212FF; --colors-gray-950: #0B0B0BFF; --colors-brand-25: #FCFAFFFF; --colors-brand-50: #F9F5FFFF; --colors-brand-100: #F4EBFFFF; --colors-brand-200: #E9D7FEFF; --colors-brand-300: #D6BBFBFF; --colors-brand-400: #B692F6FF; --colors-brand-500: #9E77EDFF; --colors-brand-600: #DAFB02FF; --colors-brand-700: #C4E200FF; --colors-brand-800: #53389EFF; --colors-brand-900: #42307DFF; --colors-brand-950: #2C1C5FFF; --colors-error-25: #FFFBFAFF; --colors-error-50: #FEF3F2FF; --colors-error-100: #FEE4E2FF; --colors-error-200: #FECDCAFF; --colors-error-300: #FDA29BFF; --colors-error-400: #F97066FF; --colors-error-500: #F04438FF; --colors-error-600: #D92D20FF; --colors-error-700: #B42318FF; --colors-error-800: #912018FF; --colors-error-900: #7A271AFF; --colors-error-950: #55160CFF; --colors-warning-25: #FFFCF5FF; --colors-warning-50: #FFFAEBFF; --colors-warning-100: #FEF0C7FF; --colors-warning-200: #FEDF89FF; --colors-warning-300: #FEC84BFF; --colors-warning-400: #FDB022FF; --colors-warning-500: #F79009FF; --colors-warning-600: #DC6803FF; --colors-warning-700: #B54708FF; --colors-warning-800: #93370DFF; --colors-warning-900: #7A2E0EFF; --colors-warning-950: #4E1D09FF; --colors-success-25: #F6FEF9FF; --colors-green-25: #F6FEF9FF; --colors-success-50: #ECFDF3FF; --colors-success-100: #DCFAE6FF; --colors-success-200: #ABEFC6FF; --colors-success-300: #75E0A7FF; --colors-success-400: #47CD89FF; --colors-success-500: #17B26AFF; --colors-success-600: #079455FF; --colors-success-700: #067647FF; --colors-success-800: #085D3AFF; --colors-success-900: #074D31FF; --colors-success-950: #053321FF; --colors-gray-blue-50: #F8F9FCFF; --colors-gray-blue-100: #EAECF5FF; --colors-gray-blue-200: #D5D9EBFF; --colors-gray-blue-300: #B3B8DBFF; --colors-gray-blue-400: #717BBCFF; --colors-gray-blue-500: #4E5BA6FF; --colors-gray-blue-600: #3E4784FF; --colors-gray-blue-700: #363F72FF; --colors-gray-blue-800: #293056FF; --colors-gray-blue-900: #101323FF; --colors-gray-blue-950: #0D0F1CFF; --colors-gray-cool-50: #F9F9FBFF; --colors-gray-cool-100: #EFF1F5FF; --colors-gray-cool-200: #DCDFEAFF; --colors-gray-cool-300: #B9C0D4FF; --colors-gray-cool-400: #7D89B0FF; --colors-gray-cool-500: #5D6B98FF; --colors-gray-cool-600: #4A5578FF; --colors-gray-cool-700: #404968FF; --colors-gray-cool-800: #30374FFF; --colors-gray-cool-900: #111322FF; --colors-gray-modern-50: #F8FAFCFF; --colors-gray-modern-100: #EEF2F6FF; --colors-gray-modern-200: #E3E8EFFF; --colors-gray-modern-300: #CDD5DFFF; --colors-gray-modern-400: #9AA4B2FF; --colors-gray-modern-500: #697586FF; --colors-gray-modern-600: #4B5565FF; --colors-gray-modern-700: #364152FF; --colors-gray-modern-800: #202939FF; --colors-gray-modern-900: #121926FF; --colors-gray-neutral-100: #F3F4F6FF; --colors-gray-neutral-200: #E5E7EBFF; --colors-gray-neutral-300: #D2D6DBFF; --colors-gray-neutral-400: #9DA4AEFF; --colors-gray-neutral-500: #6C737FFF; --colors-gray-neutral-600: #4D5761FF; --colors-gray-neutral-700: #384250FF; --colors-gray-neutral-800: #1F2A37FF; --colors-gray-neutral-900: #111927FF; --colors-gray-iron-25: #FCFCFCFF; --colors-gray-true-25: #FCFCFCFF; --colors-gray-iron-50: #FAFAFAFF; --colors-gray-true-50: #F7F7F7FF; --colors-gray-iron-100: #F4F4F5FF; --colors-gray-iron-200: #E4E4E7FF; --colors-gray-iron-300: #D1D1D6FF; --colors-gray-iron-400: #A0A0ABFF; --colors-gray-iron-500: #70707BFF; --colors-gray-iron-600: #51525CFF; --colors-gray-iron-700: #3F3F46FF; --colors-gray-iron-800: #26272BFF; --colors-gray-iron-900: #1A1A1EFF; --colors-gray-true-100: #F5F5F5FF; --colors-gray-true-200: #E5E5E5FF; --colors-gray-true-300: #D6D6D6FF; --colors-gray-true-400: #A3A3A3FF; --colors-gray-true-500: #737373FF; --colors-gray-true-600: #525252FF; --colors-gray-true-700: #424242FF; --colors-gray-warm-25: #FDFDFCFF; --colors-gray-warm-50: #FAFAF9FF; --colors-gray-warm-100: #F5F5F4FF; --colors-gray-warm-200: #E7E5E4FF; --colors-gray-warm-300: #D7D3D0FF; --colors-gray-warm-400: #A9A29DFF; --colors-gray-warm-500: #79716BFF; --colors-gray-warm-600: #57534EFF; --colors-gray-warm-700: #44403CFF; --colors-gray-warm-800: #292524FF; --colors-gray-warm-900: #1C1917FF; --colors-gray-warm-950: #171412FF; --colors-moss-25: #FAFDF7FF; --colors-moss-50: #F5FBEEFF; --colors-moss-100: #E6F4D7FF; --colors-moss-200: #CEEAB0FF; --colors-moss-300: #ACDC79FF; --colors-moss-400: #86CB3CFF; --colors-moss-500: #669F2AFF; --colors-moss-600: #4F7A21FF; --colors-moss-700: #3F621AFF; --colors-moss-800: #335015FF; --colors-moss-900: #2B4212FF; --colors-green-light-25: #FAFEF5FF; --colors-green-light-50: #F3FEE7FF; --colors-green-light-100: #E3FBCCFF; --colors-green-light-200: #D0F8ABFF; --colors-green-light-300: #A6EF67FF; --colors-green-light-400: #85E13AFF; --colors-green-light-500: #66C61CFF; --colors-green-light-600: #4CA30DFF; --colors-green-light-700: #3B7C0FFF; --colors-green-light-800: #326212FF; --colors-green-light-900: #2B5314FF; --colors-green-50: #EDFCF2FF; --colors-green-100: #D3F8DFFF; --colors-green-200: #AAF0C4FF; --colors-green-300: #73E2A3FF; --colors-green-400: #3CCB7FFF; --colors-green-500: #16B364FF; --colors-green-600: #099250FF; --colors-green-700: #087443FF; --colors-green-800: #095C37FF; --colors-green-900: #084C2EFF; --colors-teal-50: #F0FDF9FF; --colors-teal-100: #CCFBEFFF; --colors-teal-200: #99F6E0FF; --colors-teal-300: #5FE9D0FF; --colors-teal-400: #2ED3B7FF; --colors-teal-500: #15B79EFF; --colors-teal-600: #0E9384FF; --colors-teal-700: #107569FF; --colors-teal-800: #125D56FF; --colors-teal-900: #134E48FF; --colors-cyan-50: #ECFDFFFF; --colors-cyan-100: #CFF9FEFF; --colors-cyan-200: #A5F0FCFF; --colors-cyan-300: #67E3F9FF; --colors-cyan-400: #22CCEEFF; --colors-cyan-500: #06AED4FF; --colors-cyan-600: #088AB2FF; --colors-cyan-700: #0E7090FF; --colors-cyan-800: #155B75FF; --colors-cyan-900: #164C63FF; --colors-cyan-950: #0D2D3AFF; --colors-blue-light-25: #F5FBFFFF; --colors-blue-light-50: #F0F9FFFF; --colors-blue-light-100: #E0F2FEFF; --colors-blue-light-200: #B9E6FEFF; --colors-blue-light-300: #7CD4FDFF; --colors-blue-light-400: #36BFFAFF; --colors-blue-light-500: #0BA5ECFF; --colors-blue-light-600: #0086C9FF; --colors-blue-light-700: #026AA2FF; --colors-blue-light-800: #065986FF; --colors-blue-light-900: #0B4A6FFF; --colors-blue-light-950: #062C41FF; --colors-blue-25: #F5FAFFFF; --colors-blue-50: #EFF8FFFF; --colors-blue-100: #D1E9FFFF; --colors-blue-200: #B2DDFFFF; --colors-blue-300: #84CAFFFF; --colors-blue-400: #53B1FDFF; --colors-blue-500: #2E90FAFF; --colors-blue-600: #1570EFFF; --colors-blue-700: #175CD3FF; --colors-blue-800: #1849A9FF; --colors-blue-900: #194185FF; --colors-blue-950: #102A56FF; --colors-blue-dark-25: #F5F8FFFF; --colors-indigo-25: #F5F8FFFF; --colors-blue-dark-50: #EFF4FFFF; --colors-blue-dark-100: #D1E0FFFF; --colors-blue-dark-200: #B2CCFFFF; --colors-blue-dark-300: #84ADFFFF; --colors-blue-dark-400: #528BFFFF; --colors-blue-dark-500: #2970FFFF; --colors-blue-dark-600: #155EEFFF; --colors-blue-dark-700: #004EEBFF; --colors-blue-dark-800: #0040C1FF; --colors-blue-dark-900: #00359EFF; --colors-indigo-50: #EEF4FFFF; --colors-indigo-100: #E0EAFFFF; --colors-indigo-200: #C7D7FEFF; --colors-indigo-300: #A4BCFDFF; --colors-indigo-400: #8098F9FF; --colors-indigo-500: #6172F3FF; --colors-indigo-600: #444CE7FF; --colors-indigo-700: #3538CDFF; --colors-indigo-800: #2D31A6FF; --colors-indigo-900: #2D3282FF; --colors-indigo-950: #1F235BFF; --colors-violet-25: #FBFAFFFF; --colors-violet-50: #F5F3FFFF; --colors-violet-100: #ECE9FEFF; --colors-violet-200: #DDD6FEFF; --colors-violet-300: #C3B5FDFF; --colors-violet-400: #A48AFBFF; --colors-violet-500: #875BF7FF; --colors-violet-600: #7839EEFF; --colors-violet-700: #6927DAFF; --colors-violet-800: #5720B7FF; --colors-violet-900: #491C96FF; --colors-purple-25: #FAFAFFFF; --colors-purple-50: #F4F3FFFF; --colors-purple-100: #EBE9FEFF; --colors-purple-200: #D9D6FEFF; --colors-purple-300: #BDB4FEFF; --colors-purple-400: #9B8AFBFF; --colors-purple-500: #7A5AF8FF; --colors-purple-600: #6938EFFF; --colors-purple-700: #5925DCFF; --colors-purple-800: #4A1FB8FF; --colors-purple-900: #3E1C96FF; --colors-purple-950: #27115FFF; --colors-fuchsia-25: #FEFAFFFF; --colors-fuchsia-50: #FDF4FFFF; --colors-fuchsia-100: #FBE8FFFF; --colors-fuchsia-200: #F6D0FEFF; --colors-fuchsia-300: #EEAAFDFF; --colors-fuchsia-400: #E478FAFF; --colors-fuchsia-500: #D444F1FF; --colors-fuchsia-600: #BA24D5FF; --colors-fuchsia-700: #9F1AB1FF; --colors-fuchsia-800: #821890FF; --colors-fuchsia-900: #6F1877FF; --colors-pink-25: #FEF6FBFF; --colors-pink-50: #FDF2FAFF; --colors-pink-100: #FCE7F6FF; --colors-pink-200: #FCCEEEFF; --colors-pink-300: #FAA7E0FF; --colors-pink-400: #F670C7FF; --colors-pink-500: #EE46BCFF; --colors-pink-600: #DD2590FF; --colors-pink-700: #C11574FF; --colors-pink-800: #9E165FFF; --colors-pink-900: #851651FF; --colors-pink-950: #4E0D30FF; --colors-rosé-25: #FFF5F6FF; --colors-rosé-50: #FFF1F3FF; --colors-rosé-100: #FFE4E8FF; --colors-rosé-200: #FECDD6FF; --colors-rosé-300: #FEA3B4FF; --colors-rosé-400: #FD6F8EFF; --colors-rosé-500: #F63D68FF; --colors-rosé-600: #E31B54FF; --colors-rosé-700: #C01048FF; --colors-rosé-800: #A11043FF; --colors-rosé-900: #89123EFF; --colors-rosé-950: #510B24FF; --colors-orange-dark-25: #FFF9F5FF; --colors-orange-dark-50: #FFF4EDFF; --colors-orange-dark-100: #FFE6D5FF; --colors-orange-dark-200: #FFD6AEFF; --colors-orange-dark-300: #FF9C66FF; --colors-orange-dark-400: #FF692EFF; --colors-orange-dark-500: #FF4405FF; --colors-orange-dark-600: #E62E05FF; --colors-orange-dark-700: #BC1B06FF; --colors-orange-dark-800: #97180CFF; --colors-orange-dark-900: #771A0DFF; --colors-orange-dark-950: #57130AFF; --colors-orange-25: #FEFAF5FF; --colors-orange-50: #FEF6EEFF; --colors-orange-100: #FDEAD7FF; --colors-orange-200: #F9DBAFFF; --colors-orange-300: #F7B27AFF; --colors-orange-400: #F38744FF; --colors-orange-500: #EF6820FF; --colors-orange-600: #E04F16FF; --colors-orange-700: #B93815FF; --colors-orange-800: #932F19FF; --colors-orange-900: #772917FF; --colors-orange-950: #511C10FF; --colors-yellow-25: #FEFDF0FF; --colors-yellow-50: #FEFBE8FF; --colors-yellow-100: #FEF7C3FF; --colors-yellow-400: #FAC515FF; --colors-yellow-500: #EAAA08FF; --colors-yellow-600: #CA8504FF; --colors-yellow-700: #A15C07FF; --colors-yellow-800: #854A0EFF; --colors-yellow-900: #713B12FF; --colors-gray-cool-950: #0E101BFF; --colors-gray-modern-950: #0D121CFF; --colors-gray-neutral-950: #0D121CFF; --colors-gray-iron-950: #131316FF; --colors-gray-true-800: #292929FF; --colors-gray-true-900: #141414FF; --colors-gray-true-950: #0F0F0FFF; --colors-moss-950: #1A280BFF; --colors-green-light-950: #15290AFF; --colors-green-950: #052E1CFF; --colors-teal-25: #F6FEFCFF; --colors-teal-950: #0A2926FF; --colors-cyan-25: #F5FEFFFF; --colors-blue-dark-950: #002266FF; --colors-violet-950: #2E125EFF; --colors-fuchsia-950: #47104CFF; --colors-yellow-950: #542C0DFF; --colors-yellow-200: #FEEE95FF; --colors-yellow-300: #FDE272FF; --spacing-0: 0px; --spacing-0․5: 2px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; --spacing-32: 128px; --spacing-40: 160px; --spacing-48: 192px; --spacing-56: 224px; --spacing-64: 256px; --spacing-96: 384px; --spacing-80: 320px; --spacing-120: 480px; --spacing-160: 640px; --spacing-192: 768px; --spacing-256: 1024px; --spacing-320: 1280px; --spacing-360: 1440px; --spacing-400: 1600px; --spacing-480: 1920px; --spacing-1․5: 6px; --colors-base-transparent: #FFFFFF00; --component-colors-components-avatars-avatar-contrast-border: #00000014; --component-colors-components-avatars-avatar-contrast-border-dark-mode: #FFFFFF1F; --component-colors-alpha-alpha-white-90: #FFFFFFE6; --component-colors-alpha-alpha-white-90-dark-mode: #0C0E12E6; --component-colors-alpha-alpha-white-80: #FFFFFFCC; --component-colors-alpha-alpha-white-80-dark-mode: #0C0E12CC; --component-colors-alpha-alpha-white-70: #FFFFFFB3; --component-colors-alpha-alpha-white-70-dark-mode: #0C0E12B3; --component-colors-alpha-alpha-white-60: #FFFFFF99; --component-colors-alpha-alpha-white-60-dark-mode: #0C0E1299; --component-colors-alpha-alpha-white-50: #FFFFFF80; --component-colors-alpha-alpha-white-50-dark-mode: #0C0E1280; --component-colors-alpha-alpha-white-40: #FFFFFF66; --component-colors-alpha-alpha-white-40-dark-mode: #0C0E1266; --component-colors-alpha-alpha-white-30: #FFFFFF4D; --component-colors-alpha-alpha-white-30-dark-mode: #0C0E124D; --component-colors-alpha-alpha-white-20: #FFFFFF33; --component-colors-alpha-alpha-white-20-dark-mode: #0C0E1233; --component-colors-alpha-alpha-white-10: #FFFFFF1A; --component-colors-alpha-alpha-white-10-dark-mode: #0C0E121A; --component-colors-alpha-alpha-black-10: #0000001A; --component-colors-alpha-alpha-black-10-dark-mode: #FFFFFF1A; --component-colors-alpha-alpha-black-20: #00000033; --component-colors-alpha-alpha-black-20-dark-mode: #FFFFFF33; --component-colors-alpha-alpha-black-30: #0000004D; --component-colors-alpha-alpha-black-30-dark-mode: #FFFFFF4D; --component-colors-alpha-alpha-black-40: #00000066; --component-colors-alpha-alpha-black-40-dark-mode: #FFFFFF66; --component-colors-alpha-alpha-black-50: #00000080; --component-colors-alpha-alpha-black-50-dark-mode: #FFFFFF80; --component-colors-alpha-alpha-black-60: #00000099; --component-colors-alpha-alpha-black-60-dark-mode: #FFFFFF99; --component-colors-alpha-alpha-black-70: #000000B3; --component-colors-alpha-alpha-black-70-dark-mode: #FFFFFFB3; --component-colors-alpha-alpha-black-80: #000000CC; --component-colors-alpha-alpha-black-80-dark-mode: #FFFFFFCC; --component-colors-alpha-alpha-black-90: #000000E6; --component-colors-alpha-alpha-black-90-dark-mode: #FFFFFFE6; --component-colors-alpha-alpha-black-100: #000000FF; --component-colors-alpha-alpha-black-100-dark-mode: #FFFFFFFF; --component-colors-alpha-alpha-white-100: #FFFFFFFF; --component-colors-components-app-store-badges-app-store-badge-border: #A6A6A6FF; --component-colors-components-footers-footer-badge-border-dark-mode: #FFFFFF4D; --component-colors-components-footers-footer-badge-bg-dark-mode: #FFFFFF1A; --component-colors-components-icons-social-icons-social-icon-fg-x: #242E36FF; --component-colors-components-icons-social-icons-social-icon-fg-tumblr: #001935FF; --component-colors-components-icons-social-icons-social-icon-fg-instagram: #000100FF; --radius-none: 0px; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-4xl: 24px; --radius-full: 9999px; --radius-lg: 10px; --radius-3xl: 20px; --spacing-140: 560px; --spacing-180: 720px; --colors-gray-dark-mode-alpha-25: #FFFFFFFA; --colors-gray-dark-mode-alpha-50: #FFFFFFF5; --colors-gray-dark-mode-alpha-100: #FFFFFFF0; --colors-gray-dark-mode-alpha-200: #FFFFFFEB; --colors-gray-dark-mode-alpha-300: #FFFFFFCC; --colors-gray-dark-mode-alpha-400: #FFFFFF8F; --colors-gray-dark-mode-alpha-500: #FFFFFF80; --colors-gray-dark-mode-alpha-600: #FFFFFF59; --colors-gray-dark-mode-alpha-700: #FFFFFF29; --colors-gray-dark-mode-alpha-800: #FFFFFF14; --colors-gray-dark-mode-alpha-900: #FFFFFF0A; --colors-gray-dark-mode-alpha-950: #FFFFFF00; --colors-gray-dark-mode-25: #FAFAFAFF; --colors-gray-dark-mode-50: #F7F7F7FF; --colors-gray-dark-mode-100: #F0F0F1FF; --colors-gray-dark-mode-200: #ECECEDFF; --colors-gray-dark-mode-300: #CECFD2FF; --colors-gray-dark-mode-400: #94979CFF; --colors-gray-dark-mode-500: #85888EFF; --colors-gray-dark-mode-600: #61656CFF; --colors-gray-dark-mode-700: #373A41FF; --colors-gray-dark-mode-800: #22262FFF; --colors-gray-dark-mode-900: #13161BFF; --colors-gray-dark-mode-950: #0C0E12FF; --colors-effects-shadows-shadow-xs: #0A0D120D; --colors-effects-shadows-shadow-sm_02: #0A0D121A; --colors-effects-shadows-shadow-lg_01: #0A0D1214; --colors-effects-shadows-shadow-lg_02: #0A0D1208; --colors-effects-shadows-shadow-sm_01: #0A0D121A; --colors-effects-shadows-shadow-3xl_01: #0A0D1224; --colors-effects-shadows-shadow-2xl_01: #0A0D122E; --component-colors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF; --component-colors-components-avatars-avatar-styles-bg-neutral-dark-mode: #E0E0E0FF; --colors-effects-shadows-shadow-md_01: #0A0D121A; --colors-effects-shadows-shadow-md_02: #0A0D120F; --colors-effects-shadows-shadow-xl_01: #0A0D1214; --colors-effects-shadows-shadow-xl_02: #0A0D1208; --colors-effects-portfolio-mockups-shadow-main-centre-md: #0A0D1224; --colors-effects-portfolio-mockups-shadow-main-centre-lg: #0A0D122E; --colors-effects-portfolio-mockups-shadow-overlay-lg: #0A0D121F; --colors-effects-portfolio-mockups-shadow-grid-md: #0A0D1214; --colors-effects-shadows-shadow-skeumorphic-inner: #0A0D120D; --colors-effects-shadows-shadow-skeumorphic-inner-dark-mode: #0C0E120D; --colors-effects-shadows-shadow-skeumorphic-inner-border: #0A0D122E; --colors-effects-shadows-shadow-skeumorphic-inner-border-dark-mode: #0C0E122E; --font-size-text-xs-value: 12px; --font-size-text-sm-value: 14px; --font-size-text-md-value: 16px; --font-size-text-lg-value: 18px; --font-size-text-xl-value: 20px; --font-size-display-xs-value: 24px; --font-size-display-sm-value: 30px; --font-size-display-md-value: 36px; --font-size-display-lg-value: 48px; --font-size-display-xl-value: 60px; --font-size-display-2xl-value: 72px; --line-height-text-xs-value: 18px; --line-height-text-sm-value: 20px; --line-height-text-md-value: 24px; --line-height-text-lg-value: 28px; --line-height-text-xl-value: 30px; --line-height-display-xs-value: 32px; --line-height-display-sm-value: 38px; --line-height-display-md-value: 44px; --line-height-display-lg-value: 60px; --line-height-display-xl-value: 72px; --line-height-display-2xl-value: 90px; --colors-effects-shadows-shadow-lg_03: #0A0D120A; --colors-effects-shadows-shadow-xl_03: #0A0D120A; --colors-effects-shadows-shadow-2xl_02: #0A0D120A; --colors-effects-shadows-shadow-3xl_02: #0A0D120A; /* Aliases */ --colors-text-text-primary: var(--colors-gray-900); --colors-text-text-primary-dark-mode: var(--colors-gray-dark-mode-50); --colors-text-text-tertiary-(600): var(--colors-gray-500); --colors-text-text-tertiary-(600)-dark-mode: var(--colors-gray-dark-mode-400); --colors-border-border-secondary: var(--colors-gray-300); --colors-border-border-secondary-dark-mode: var(--colors-gray-dark-mode-800); --colors-text-text-error-primary-(600): var(--colors-error-600); --colors-text-text-error-primary-(600)-dark-mode: var(--colors-error-400); --colors-border-border-error_subtle: var(--colors-error-300); --colors-border-border-error_subtle-dark-mode: var(--colors-error-400); --colors-background-bg-primary: var(--colors-base-white); --colors-background-bg-primary-dark-mode: var(--colors-gray-dark-mode-950); --colors-background-bg-tertiary: var(--colors-gray-200); --colors-background-bg-tertiary-dark-mode: var(--colors-gray-dark-mode-800); --colors-foreground-fg-secondary-(700): var(--colors-gray-700); --colors-foreground-fg-secondary-(700)-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-brand-primary: var(--colors-brand-50); --colors-background-bg-brand-primary-dark-mode: var(--colors-brand-500); --colors-background-bg-error-secondary: var(--colors-error-100); --colors-background-bg-error-secondary-dark-mode: var(--colors-error-600); --colors-background-bg-warning-primary: var(--colors-warning-50); --colors-background-bg-warning-primary-dark-mode: var(--colors-warning-500); --colors-background-bg-warning-secondary: var(--colors-warning-100); --colors-background-bg-warning-secondary-dark-mode: var(--colors-warning-600); --colors-background-bg-success-primary: var(--colors-success-50); --colors-background-bg-success-primary-dark-mode: var(--colors-success-500); --colors-background-bg-success-secondary: var(--colors-success-100); --colors-background-bg-success-secondary-dark-mode: var(--colors-success-600); --colors-foreground-fg-warning-primary: var(--colors-warning-600); --colors-foreground-fg-warning-primary-dark-mode: var(--colors-warning-500); --colors-foreground-fg-success-primary: var(--colors-success-600); --colors-foreground-fg-success-primary-dark-mode: var(--colors-success-500); --colors-border-border-primary: var(--colors-gray-900); --colors-border-border-primary-dark-mode: var(--colors-gray-dark-mode-700); --colors-text-text-warning-primary-(600): var(--colors-warning-600); --colors-text-text-warning-primary-(600)-dark-mode: var(--colors-warning-400); --colors-text-text-success-primary-(600): var(--colors-success-600); --colors-text-text-success-primary-(600)-dark-mode: var(--colors-success-400); --colors-foreground-fg-white: var(--colors-base-white); --colors-foreground-fg-white-dark-mode: var(--colors-base-white); --colors-text-text-white: var(--colors-base-white); --colors-text-text-white-dark-mode: var(--colors-base-white); --colors-background-bg-brand-solid: var(--colors-brand-600); --colors-background-bg-brand-solid-dark-mode: var(--colors-brand-600); --colors-background-bg-secondary-solid: var(--colors-gray-600); --colors-background-bg-secondary-solid-dark-mode: var(--colors-gray-dark-mode-600); --colors-background-bg-error-solid: var(--colors-error-600); --colors-background-bg-error-solid-dark-mode: var(--colors-error-600); --colors-background-bg-warning-solid: var(--colors-warning-600); --colors-background-bg-warning-solid-dark-mode: var(--colors-warning-600); --colors-background-bg-success-solid: var(--colors-success-600); --colors-background-bg-success-solid-dark-mode: var(--colors-success-600); --colors-foreground-fg-success-secondary: var(--colors-success-500); --colors-foreground-fg-success-secondary-dark-mode: var(--colors-success-400); --colors-text-text-secondary: var(--colors-gray-600); --colors-text-text-secondary-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-secondary_hover: var(--colors-gray-200); --colors-background-bg-secondary_hover-dark-mode: var(--colors-gray-dark-mode-800); --colors-foreground-fg-secondary_hover: var(--colors-gray-800); --colors-foreground-fg-secondary_hover-dark-mode: var(--colors-gray-dark-mode-200); --colors-background-bg-primary_hover: var(--colors-gray-50); --colors-background-bg-primary_hover-dark-mode: var(--colors-gray-dark-mode-800); --colors-background-bg-disabled: var(--colors-gray-100); --colors-background-bg-disabled-dark-mode: var(--colors-gray-dark-mode-800); --colors-foreground-fg-primary-(900): var(--colors-gray-900); --colors-foreground-fg-primary-(900)-dark-mode: var(--colors-base-white); --colors-foreground-fg-disabled: var(--colors-gray-400); --colors-foreground-fg-disabled-dark-mode: var(--colors-gray-dark-mode-500); --colors-text-text-disabled: var(--colors-gray-500); --colors-text-text-disabled-dark-mode: var(--colors-gray-dark-mode-500); --colors-text-text-secondary_hover: var(--colors-gray-700); --colors-text-text-secondary_hover-dark-mode: var(--colors-gray-dark-mode-200); --colors-text-text-tertiary_hover: var(--colors-gray-600); --colors-text-text-tertiary_hover-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-active: var(--colors-gray-50); --colors-background-bg-active-dark-mode: var(--colors-gray-dark-mode-800); --colors-background-bg-brand-solid_hover: var(--colors-brand-700); --colors-background-bg-brand-solid_hover-dark-mode: var(--colors-brand-500); --colors-border-border-primary_alt: var(--colors-base-white); --colors-border-border-primary_alt-dark-mode: var(--colors-brand-400); --colors-border-border-disabled: var(--colors-gray-300); --colors-border-border-disabled-dark-mode: var(--colors-gray-dark-mode-700); --colors-border-border-error: var(--colors-error-500); --colors-border-border-error-dark-mode: var(--colors-error-400); --colors-background-bg-error-primary: var(--colors-error-50); --colors-background-bg-error-primary-dark-mode: var(--colors-error-500); --colors-foreground-fg-quaternary-(500): var(--colors-gray-500); --colors-foreground-fg-quaternary-(500)-dark-mode: var(--colors-gray-dark-mode-400); --colors-foreground-fg-quaternary_hover: var(--colors-gray-600); --colors-foreground-fg-quaternary_hover-dark-mode: var(--colors-gray-dark-mode-300); --colors-foreground-fg-brand-secondary-(500): var(--colors-brand-500); --colors-foreground-fg-brand-secondary-(500)-dark-mode: var(--colors-brand-500); --colors-background-bg-brand-secondary: var(--colors-brand-100); --colors-background-bg-brand-secondary-dark-mode: var(--colors-brand-600); --colors-foreground-fg-brand-primary-600: var(--colors-brand-600); --colors-foreground-fg-brand-primary-600-dark-mode: var(--colors-brand-500); --colors-foreground-fg-quinary-(400): var(--colors-gray-400); --colors-foreground-fg-quinary-(400)-dark-mode: var(--colors-gray-dark-mode-500); --colors-foreground-fg-quinary_hover: var(--colors-gray-500); --colors-foreground-fg-quinary_hover-dark-mode: var(--colors-gray-dark-mode-400); --colors-foreground-fg-error-primary: var(--colors-error-600); --colors-foreground-fg-error-primary-dark-mode: var(--colors-error-500); --colors-background-bg-secondary: var(--colors-gray-100); --colors-background-bg-secondary-dark-mode: var(--colors-gray-dark-mode-900); --colors-background-bg-disabled_subtle: var(--colors-gray-50); --colors-background-bg-disabled_subtle-dark-mode: var(--colors-gray-dark-mode-900); --colors-text-text-brand-secondary-(700): var(--colors-brand-700); --colors-text-text-brand-secondary-(700)-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-utility-blue-utility-blue-600: var(--colors-blue-600); --component-colors-utility-blue-utility-blue-600-dark-mode: var(--colors-blue-400); --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-300); --component-colors-components-tooltips-tooltip-supporting-text-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-quaternary: var(--colors-gray-300); --colors-background-bg-quaternary-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-buttons-primary-button-primary-bg: var(--colors-gray-700); --component-colors-components-buttons-primary-button-primary-bg-dark-mode: var(--colors-brand-600); --component-colors-components-buttons-primary-button-primary-bg_hover: var(--colors-gray-dark-mode-900); --component-colors-components-buttons-primary-button-primary-bg_hover-dark-mode: var(--colors-brand-700); --component-colors-components-buttons-secondary-button-secondary-bg: var(--colors-gray-50); --component-colors-components-buttons-secondary-button-secondary-bg-dark-mode: var(--colors-base-white); --component-colors-components-buttons-secondary-button-secondary-bg_hover: var(--colors-gray-200); --component-colors-components-buttons-secondary-button-secondary-bg_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-buttons-secondary-color-button-secondary-color-bg: var(--colors-gray-700); --component-colors-components-buttons-secondary-color-button-secondary-color-bg-dark-mode: var(--colors-gray-dark-mode-900); --component-colors-components-buttons-secondary-color-button-secondary-color-bg_hover: var(--colors-gray-900); --component-colors-components-buttons-secondary-color-button-secondary-color-bg_hover-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-buttons-primary-button-primary-fg: var(--colors-base-white); --component-colors-components-buttons-primary-button-primary-fg-dark-mode: var(--colors-base-black); --component-colors-components-buttons-secondary-color-button-secondary-color-border_hover: var(--colors-gray-900); --component-colors-components-buttons-secondary-color-button-secondary-color-border_hover-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-buttons-secondary-color-button-secondary-color-border: var(--colors-gray-700); --component-colors-components-buttons-secondary-color-button-secondary-color-border-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-buttons-secondary-button-secondary-fg: var(--colors-gray-700); --component-colors-components-buttons-secondary-button-secondary-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-buttons-secondary-button-secondary-fg_hover: var(--colors-gray-900); --component-colors-components-buttons-secondary-button-secondary-fg_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-buttons-secondary-color-button-secondary-color-fg: var(--colors-base-white); --component-colors-components-buttons-secondary-color-button-secondary-color-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-buttons-secondary-color-button-secondary-color-fg_hover: var(--colors-gray-50); --component-colors-components-buttons-secondary-color-button-secondary-color-fg_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-buttons-secondary-button-secondary-border: var(--colors-gray-50); --component-colors-components-buttons-secondary-button-secondary-border-dark-mode: var(--colors-base-white); --component-colors-components-buttons-secondary-button-secondary-border_hover: var(--colors-gray-200); --component-colors-components-buttons-secondary-button-secondary-border_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-buttons-primary-button-primary-fg_hover: var(--colors-gray-50); --component-colors-components-buttons-primary-button-primary-fg_hover-dark-mode: var(--colors-base-black); --colors-foreground-fg-disabled_subtle: var(--colors-gray-300); --colors-foreground-fg-disabled_subtle-dark-mode: var(--colors-gray-dark-mode-600); --component-colors-utility-brand-utility-brand-600: var(--colors-brand-600); --component-colors-utility-brand-utility-brand-600-dark-mode: var(--colors-brand-400); --component-colors-utility-gray-utility-gray-700: var(--colors-gray-700); --component-colors-utility-gray-utility-gray-700-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-utility-error-utility-error-600: var(--colors-error-600); --component-colors-utility-error-utility-error-600-dark-mode: var(--colors-error-400); --component-colors-utility-warning-utility-warning-600: var(--colors-warning-600); --component-colors-utility-warning-utility-warning-600-dark-mode: var(--colors-warning-400); --component-colors-utility-success-utility-success-600: var(--colors-success-600); --component-colors-utility-success-utility-success-600-dark-mode: var(--colors-success-400); --component-colors-utility-orange-utility-orange-600: var(--colors-orange-600); --component-colors-utility-orange-utility-orange-600-dark-mode: var(--colors-orange-400); --component-colors-utility-blue-dark-utility-blue-dark-600: var(--colors-blue-dark-600); --component-colors-utility-blue-dark-utility-blue-dark-600-dark-mode: var(--colors-blue-dark-400); --component-colors-utility-indigo-utility-indigo-600: var(--colors-indigo-600); --component-colors-utility-indigo-utility-indigo-600-dark-mode: var(--colors-indigo-400); --component-colors-utility-fuchsia-utility-fuchsia-600: var(--colors-fuchsia-600); --component-colors-utility-fuchsia-utility-fuchsia-600-dark-mode: var(--colors-fuchsia-400); --component-colors-utility-pink-utility-pink-600: var(--colors-pink-600); --component-colors-utility-pink-utility-pink-600-dark-mode: var(--colors-pink-400); --component-colors-utility-purple-utility-purple-600: var(--colors-purple-600); --component-colors-utility-purple-utility-purple-600-dark-mode: var(--colors-purple-400); --component-colors-utility-orange-dark-utility-orange-dark-600: var(--colors-orange-dark-600); --component-colors-utility-orange-dark-utility-orange-dark-600-dark-mode: var(--colors-orange-dark-400); --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-600); --component-colors-utility-blue-light-utility-blue-light-600-dark-mode: var(--colors-blue-light-400); --component-colors-utility-gray-utility-gray-600: var(--colors-gray-600); --component-colors-utility-gray-utility-gray-600-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-utility-brand-utility-brand-700: var(--colors-brand-700); --component-colors-utility-brand-utility-brand-700-dark-mode: var(--colors-brand-300); --component-colors-utility-error-utility-error-700: var(--colors-error-700); --component-colors-utility-error-utility-error-700-dark-mode: var(--colors-error-300); --component-colors-utility-warning-utility-warning-700: var(--colors-warning-700); --component-colors-utility-warning-utility-warning-700-dark-mode: var(--colors-warning-300); --component-colors-utility-success-utility-success-700: var(--colors-success-700); --component-colors-utility-success-utility-success-700-dark-mode: var(--colors-success-300); --component-colors-utility-blue-dark-utility-blue-dark-700: var(--colors-blue-dark-700); --component-colors-utility-blue-dark-utility-blue-dark-700-dark-mode: var(--colors-blue-dark-300); --component-colors-utility-indigo-utility-indigo-700: var(--colors-indigo-700); --component-colors-utility-indigo-utility-indigo-700-dark-mode: var(--colors-indigo-300); --component-colors-utility-purple-utility-purple-700: var(--colors-purple-700); --component-colors-utility-purple-utility-purple-700-dark-mode: var(--colors-purple-300); --component-colors-utility-fuchsia-utility-fuchsia-700: var(--colors-fuchsia-700); --component-colors-utility-fuchsia-utility-fuchsia-700-dark-mode: var(--colors-fuchsia-300); --component-colors-utility-pink-utility-pink-700: var(--colors-pink-700); --component-colors-utility-pink-utility-pink-700-dark-mode: var(--colors-pink-300); --component-colors-utility-orange-dark-utility-orange-dark-700: var(--colors-orange-dark-700); --component-colors-utility-orange-dark-utility-orange-dark-700-dark-mode: var(--colors-orange-dark-300); --component-colors-utility-orange-utility-orange-700: var(--colors-orange-700); --component-colors-utility-orange-utility-orange-700-dark-mode: var(--colors-orange-300); --component-colors-utility-blue-utility-blue-700: var(--colors-blue-700); --component-colors-utility-blue-utility-blue-700-dark-mode: var(--colors-blue-300); --component-colors-utility-blue-light-utility-blue-light-700: var(--colors-blue-light-700); --component-colors-utility-blue-light-utility-blue-light-700-dark-mode: var(--colors-blue-light-300); --component-colors-utility-gray-blue-utility-gray-blue-600: var(--colors-gray-blue-600); --component-colors-utility-gray-blue-utility-gray-blue-600-dark-mode: var(--colors-gray-blue-400); --component-colors-utility-gray-blue-utility-gray-blue-700: var(--colors-gray-blue-700); --component-colors-utility-gray-blue-utility-gray-blue-700-dark-mode: var(--colors-gray-blue-300); --component-colors-utility-gray-utility-gray-500: var(--colors-gray-500); --component-colors-utility-gray-utility-gray-500-dark-mode: var(--colors-gray-dark-mode-500); --component-colors-utility-brand-utility-brand-500: var(--colors-brand-500); --component-colors-utility-brand-utility-brand-500-dark-mode: var(--colors-brand-500); --component-colors-utility-error-utility-error-500: var(--colors-error-500); --component-colors-utility-error-utility-error-500-dark-mode: var(--colors-error-500); --component-colors-utility-warning-utility-warning-500: var(--colors-warning-500); --component-colors-utility-warning-utility-warning-500-dark-mode: var(--colors-warning-500); --component-colors-utility-success-utility-success-500: var(--colors-success-500); --component-colors-utility-success-utility-success-500-dark-mode: var(--colors-success-500); --component-colors-utility-gray-blue-utility-gray-blue-500: var(--colors-gray-blue-500); --component-colors-utility-gray-blue-utility-gray-blue-500-dark-mode: var(--colors-gray-blue-500); --component-colors-utility-blue-light-utility-blue-light-500: var(--colors-blue-light-500); --component-colors-utility-blue-light-utility-blue-light-500-dark-mode: var(--colors-blue-light-500); --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500); --component-colors-utility-blue-utility-blue-500-dark-mode: var(--colors-blue-500); --component-colors-utility-blue-dark-utility-blue-dark-500: var(--colors-blue-dark-500); --component-colors-utility-blue-dark-utility-blue-dark-500-dark-mode: var(--colors-blue-dark-500); --component-colors-utility-indigo-utility-indigo-500: var(--colors-indigo-500); --component-colors-utility-indigo-utility-indigo-500-dark-mode: var(--colors-indigo-500); --component-colors-utility-purple-utility-purple-500: var(--colors-purple-500); --component-colors-utility-purple-utility-purple-500-dark-mode: var(--colors-purple-500); --component-colors-utility-fuchsia-utility-fuchsia-500: var(--colors-fuchsia-500); --component-colors-utility-fuchsia-utility-fuchsia-500-dark-mode: var(--colors-fuchsia-500); --component-colors-utility-pink-utility-pink-500: var(--colors-pink-500); --component-colors-utility-pink-utility-pink-500-dark-mode: var(--colors-pink-500); --component-colors-utility-orange-dark-utility-orange-dark-500: var(--colors-orange-dark-500); --component-colors-utility-orange-dark-utility-orange-dark-500-dark-mode: var(--colors-orange-dark-500); --component-colors-utility-orange-utility-orange-500: var(--colors-orange-500); --component-colors-utility-orange-utility-orange-500-dark-mode: var(--colors-orange-500); --component-colors-utility-gray-utility-gray-200: var(--colors-gray-200); --component-colors-utility-gray-utility-gray-200-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-utility-brand-utility-brand-200: var(--colors-brand-200); --component-colors-utility-brand-utility-brand-200-dark-mode: var(--colors-brand-800); --component-colors-utility-error-utility-error-200: var(--colors-error-200); --component-colors-utility-error-utility-error-200-dark-mode: var(--colors-error-800); --component-colors-utility-warning-utility-warning-200: var(--colors-warning-200); --component-colors-utility-warning-utility-warning-200-dark-mode: var(--colors-warning-800); --component-colors-utility-success-utility-success-200: var(--colors-success-200); --component-colors-utility-success-utility-success-200-dark-mode: var(--colors-success-800); --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-200); --component-colors-utility-gray-blue-utility-gray-blue-200-dark-mode: var(--colors-gray-blue-800); --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-200); --component-colors-utility-blue-light-utility-blue-light-200-dark-mode: var(--colors-blue-light-800); --component-colors-utility-blue-utility-blue-200: var(--colors-blue-200); --component-colors-utility-blue-utility-blue-200-dark-mode: var(--colors-blue-800); --component-colors-utility-blue-dark-utility-blue-dark-200: var(--colors-blue-dark-200); --component-colors-utility-blue-dark-utility-blue-dark-200-dark-mode: var(--colors-blue-dark-800); --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-200); --component-colors-utility-indigo-utility-indigo-200-dark-mode: var(--colors-indigo-800); --component-colors-utility-purple-utility-purple-200: var(--colors-purple-200); --component-colors-utility-purple-utility-purple-200-dark-mode: var(--colors-purple-800); --component-colors-utility-fuchsia-utility-fuchsia-200: var(--colors-fuchsia-200); --component-colors-utility-fuchsia-utility-fuchsia-200-dark-mode: var(--colors-fuchsia-800); --component-colors-utility-pink-utility-pink-200: var(--colors-pink-200); --component-colors-utility-pink-utility-pink-200-dark-mode: var(--colors-pink-800); --component-colors-utility-orange-dark-utility-orange-dark-200: var(--colors-orange-dark-200); --component-colors-utility-orange-dark-utility-orange-dark-200-dark-mode: var(--colors-orange-dark-800); --component-colors-utility-orange-utility-orange-200: var(--colors-orange-200); --component-colors-utility-orange-utility-orange-200-dark-mode: var(--colors-orange-800); --component-colors-utility-gray-utility-gray-50: var(--colors-gray-50); --component-colors-utility-gray-utility-gray-50-dark-mode: var(--colors-gray-dark-mode-900); --component-colors-utility-brand-utility-brand-50: var(--colors-brand-50); --component-colors-utility-brand-utility-brand-50-dark-mode: var(--colors-brand-950); --component-colors-utility-error-utility-error-50: var(--colors-error-50); --component-colors-utility-error-utility-error-50-dark-mode: var(--colors-error-950); --component-colors-utility-warning-utility-warning-50: var(--colors-warning-50); --component-colors-utility-warning-utility-warning-50-dark-mode: var(--colors-warning-950); --component-colors-utility-success-utility-success-50: var(--colors-success-50); --component-colors-utility-success-utility-success-50-dark-mode: var(--colors-success-950); --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-50); --component-colors-utility-gray-blue-utility-gray-blue-50-dark-mode: var(--colors-gray-blue-950); --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-50); --component-colors-utility-blue-light-utility-blue-light-50-dark-mode: var(--colors-blue-light-950); --component-colors-utility-blue-utility-blue-50: var(--colors-blue-50); --component-colors-utility-blue-utility-blue-50-dark-mode: var(--colors-blue-950); --component-colors-utility-blue-dark-utility-blue-dark-50: var(--colors-blue-dark-50); --component-colors-utility-blue-dark-utility-blue-dark-50-dark-mode: var(--colors-blue-dark-950); --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-50); --component-colors-utility-indigo-utility-indigo-50-dark-mode: var(--colors-indigo-950); --component-colors-utility-purple-utility-purple-50: var(--colors-purple-50); --component-colors-utility-purple-utility-purple-50-dark-mode: var(--colors-purple-950); --component-colors-utility-fuchsia-utility-fuchsia-50: var(--colors-fuchsia-50); --component-colors-utility-fuchsia-utility-fuchsia-50-dark-mode: var(--colors-fuchsia-950); --component-colors-utility-pink-utility-pink-50: var(--colors-pink-50); --component-colors-utility-pink-utility-pink-50-dark-mode: var(--colors-pink-950); --component-colors-utility-orange-dark-utility-orange-dark-50: var(--colors-orange-dark-50); --component-colors-utility-orange-dark-utility-orange-dark-50-dark-mode: var(--colors-orange-dark-950); --component-colors-utility-orange-utility-orange-50: var(--colors-orange-50); --component-colors-utility-orange-utility-orange-50-dark-mode: var(--colors-orange-950); --component-colors-utility-gray-utility-gray-100: var(--colors-gray-100); --component-colors-utility-gray-utility-gray-100-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-utility-brand-utility-brand-100: var(--colors-brand-100); --component-colors-utility-brand-utility-brand-100-dark-mode: var(--colors-brand-900); --component-colors-utility-error-utility-error-100: var(--colors-error-100); --component-colors-utility-error-utility-error-100-dark-mode: var(--colors-error-900); --component-colors-utility-warning-utility-warning-100: var(--colors-warning-100); --component-colors-utility-warning-utility-warning-100-dark-mode: var(--colors-warning-900); --component-colors-utility-success-utility-success-100: var(--colors-success-100); --component-colors-utility-success-utility-success-100-dark-mode: var(--colors-success-900); --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-100); --component-colors-utility-gray-blue-utility-gray-blue-100-dark-mode: var(--colors-gray-blue-900); --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-100); --component-colors-utility-blue-light-utility-blue-light-100-dark-mode: var(--colors-blue-light-900); --component-colors-utility-blue-utility-blue-100: var(--colors-blue-100); --component-colors-utility-blue-utility-blue-100-dark-mode: var(--colors-blue-900); --component-colors-utility-blue-dark-utility-blue-dark-100: var(--colors-blue-dark-100); --component-colors-utility-blue-dark-utility-blue-dark-100-dark-mode: var(--colors-blue-dark-900); --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-100); --component-colors-utility-indigo-utility-indigo-100-dark-mode: var(--colors-indigo-900); --component-colors-utility-purple-utility-purple-100: var(--colors-purple-100); --component-colors-utility-purple-utility-purple-100-dark-mode: var(--colors-purple-900); --component-colors-utility-fuchsia-utility-fuchsia-100: var(--colors-fuchsia-100); --component-colors-utility-fuchsia-utility-fuchsia-100-dark-mode: var(--colors-fuchsia-900); --component-colors-utility-pink-utility-pink-100: var(--colors-pink-100); --component-colors-utility-pink-utility-pink-100-dark-mode: var(--colors-pink-900); --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-100); --component-colors-utility-orange-dark-utility-orange-dark-100-dark-mode: var(--colors-orange-dark-900); --component-colors-utility-orange-utility-orange-100: var(--colors-orange-100); --component-colors-utility-orange-utility-orange-100-dark-mode: var(--colors-orange-900); --component-colors-utility-gray-utility-gray-400: var(--colors-gray-400); --component-colors-utility-gray-utility-gray-400-dark-mode: var(--colors-gray-dark-mode-600); --component-colors-utility-brand-utility-brand-400: var(--colors-brand-400); --component-colors-utility-brand-utility-brand-400-dark-mode: var(--colors-brand-600); --component-colors-utility-error-utility-error-400: var(--colors-error-400); --component-colors-utility-error-utility-error-400-dark-mode: var(--colors-error-600); --component-colors-utility-warning-utility-warning-400: var(--colors-warning-400); --component-colors-utility-warning-utility-warning-400-dark-mode: var(--colors-warning-600); --component-colors-utility-success-utility-success-400: var(--colors-success-400); --component-colors-utility-success-utility-success-400-dark-mode: var(--colors-success-600); --component-colors-utility-gray-blue-utility-gray-blue-400: var(--colors-gray-blue-400); --component-colors-utility-gray-blue-utility-gray-blue-400-dark-mode: var(--colors-gray-blue-600); --component-colors-utility-blue-light-utility-blue-light-400: var(--colors-blue-light-400); --component-colors-utility-blue-light-utility-blue-light-400-dark-mode: var(--colors-blue-light-600); --component-colors-utility-blue-utility-blue-400: var(--colors-blue-400); --component-colors-utility-blue-utility-blue-400-dark-mode: var(--colors-blue-600); --component-colors-utility-blue-dark-utility-blue-dark-400: var(--colors-blue-dark-400); --component-colors-utility-blue-dark-utility-blue-dark-400-dark-mode: var(--colors-blue-dark-600); --component-colors-utility-indigo-utility-indigo-400: var(--colors-indigo-400); --component-colors-utility-indigo-utility-indigo-400-dark-mode: var(--colors-indigo-600); --component-colors-utility-purple-utility-purple-400: var(--colors-purple-400); --component-colors-utility-purple-utility-purple-400-dark-mode: var(--colors-purple-600); --component-colors-utility-fuchsia-utility-fuchsia-400: var(--colors-fuchsia-400); --component-colors-utility-fuchsia-utility-fuchsia-400-dark-mode: var(--colors-fuchsia-600); --component-colors-utility-pink-utility-pink-400: var(--colors-pink-400); --component-colors-utility-pink-utility-pink-400-dark-mode: var(--colors-pink-600); --component-colors-utility-orange-dark-utility-orange-dark-400: var(--colors-orange-dark-400); --component-colors-utility-orange-dark-utility-orange-dark-400-dark-mode: var(--colors-orange-dark-600); --component-colors-utility-orange-utility-orange-400: var(--colors-orange-400); --component-colors-utility-orange-utility-orange-400-dark-mode: var(--colors-orange-600); --colors-foreground-fg-warning-secondary: var(--colors-warning-500); --colors-foreground-fg-warning-secondary-dark-mode: var(--colors-warning-400); --colors-foreground-fg-error-secondary: var(--colors-error-500); --colors-foreground-fg-error-secondary-dark-mode: var(--colors-error-400); --colors-border-border-disabled_subtle: var(--colors-gray-200); --colors-border-border-disabled_subtle-dark-mode: var(--colors-gray-dark-mode-800); --colors-text-text-placeholder: var(--colors-gray-500); --colors-text-text-placeholder-dark-mode: var(--colors-gray-dark-mode-500); --colors-text-text-placeholder_subtle: var(--colors-gray-300); --colors-text-text-placeholder_subtle-dark-mode: var(--colors-gray-dark-mode-700); --colors-text-text-brand-tertiary-(600): var(--colors-brand-600); --colors-text-text-brand-tertiary-(600)-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-buttons-primary-error-button-primary-error-fg: var(--colors-base-white); --component-colors-components-buttons-primary-error-button-primary-error-fg-dark-mode: var(--colors-base-white); --component-colors-components-buttons-primary-error-button-primary-error-fg_hover: var(--colors-base-white); --component-colors-components-buttons-primary-error-button-primary-error-fg_hover-dark-mode: var(--colors-base-white); --component-colors-components-buttons-primary-error-button-primary-error-bg: var(--colors-error-600); --component-colors-components-buttons-primary-error-button-primary-error-bg-dark-mode: var(--colors-error-600); --component-colors-components-buttons-primary-error-button-primary-error-bg_hover: var(--colors-error-700); --component-colors-components-buttons-primary-error-button-primary-error-bg_hover-dark-mode: var(--colors-error-700); --component-colors-components-buttons-secondary-error-button-secondary-error-fg: var(--colors-error-700); --component-colors-components-buttons-secondary-error-button-secondary-error-fg-dark-mode: var(--colors-error-200); --component-colors-components-buttons-secondary-error-button-secondary-error-fg_hover: var(--colors-error-800); --component-colors-components-buttons-secondary-error-button-secondary-error-fg_hover-dark-mode: var(--colors-error-100); --component-colors-components-buttons-secondary-error-button-secondary-error-bg: var(--colors-base-white); --component-colors-components-buttons-secondary-error-button-secondary-error-bg-dark-mode: var(--colors-error-950); --component-colors-components-buttons-secondary-error-button-secondary-error-bg_hover: var(--colors-error-50); --component-colors-components-buttons-secondary-error-button-secondary-error-bg_hover-dark-mode: var(--colors-error-900); --component-colors-components-buttons-secondary-error-button-secondary-error-border: var(--colors-error-300); --component-colors-components-buttons-secondary-error-button-secondary-error-border-dark-mode: var(--colors-error-800); --component-colors-components-buttons-secondary-error-button-secondary-error-border_hover: var(--colors-error-300); --component-colors-components-buttons-secondary-error-button-secondary-error-border_hover-dark-mode: var(--colors-error-700); --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg: var(--colors-gray-400); --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active: var(--colors-gray-500); --component-colors-components-wysiwyg-editor-wysiwyg-editor-icon-fg_active-dark-mode: var(--colors-base-white); --component-colors-components-avatars-avatar-profile-photo-border: var(--colors-base-white); --component-colors-components-avatars-avatar-profile-photo-border-dark-mode: var(--colors-gray-dark-mode-950); --component-colors-components-avatars-avatar-bg: var(--colors-gray-100); --component-colors-components-avatars-avatar-bg-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-breadcrumbs-breadcrumb-fg: var(--colors-gray-600); --component-colors-components-breadcrumbs-breadcrumb-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-breadcrumbs-breadcrumb-fg_hover: var(--colors-gray-700); --component-colors-components-breadcrumbs-breadcrumb-fg_hover-dark-mode: var(--colors-base-white); --component-colors-components-breadcrumbs-breadcrumb-bg_hover: var(--colors-gray-50); --component-colors-components-breadcrumbs-breadcrumb-bg_hover-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-breadcrumbs-breadcrumb-brand-bg_hover: var(--colors-brand-50); --component-colors-components-breadcrumbs-breadcrumb-brand-bg_hover-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-breadcrumbs-breadcrumb-brand-fg_hover: var(--colors-brand-700); --component-colors-components-breadcrumbs-breadcrumb-brand-fg_hover-dark-mode: var(--colors-base-white); --component-colors-components-breadcrumbs-breadcrumb-icon-fg: var(--colors-gray-500); --component-colors-components-breadcrumbs-breadcrumb-icon-fg-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-breadcrumbs-breadcrumb-icon-fg_hover: var(--colors-gray-700); --component-colors-components-breadcrumbs-breadcrumb-icon-fg_hover-dark-mode: var(--colors-base-white); --component-colors-components-breadcrumbs-breadcrumb-brand-icon-fg_hover: var(--colors-brand-700); --component-colors-components-breadcrumbs-breadcrumb-brand-icon-fg_hover-dark-mode: var(--colors-base-white); --colors-foreground-fg-senary-(300): var(--colors-gray-300); --colors-foreground-fg-senary-(300)-dark-mode: var(--colors-gray-dark-mode-600); --colors-background-bg-primary_alt: var(--colors-gray-900); --colors-background-bg-primary_alt-dark-mode: var(--colors-background-bg-secondary-dark-mode); --colors-foreground-fg-tertiary-(600): var(--colors-gray-600); --colors-foreground-fg-tertiary-(600)-dark-mode: var(--colors-gray-dark-mode-400); --colors-foreground-fg-tertiary_hover: var(--colors-gray-700); --colors-foreground-fg-tertiary_hover-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-buttons-tertiary-button-tertiary-fg: var(--colors-gray-700); --component-colors-components-buttons-tertiary-button-tertiary-fg-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-buttons-tertiary-button-tertiary-fg_hover: var(--colors-gray-900); --component-colors-components-buttons-tertiary-button-tertiary-fg_hover-dark-mode: var(--colors-gray-dark-mode-200); --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg: var(--colors-base-white); --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg_hover: var(--colors-gray-50); --component-colors-components-buttons-tertiary-color-button-tertiary-color-fg_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-buttons-tertiary-button-tertiary-bg_hover: var(--colors-gray-200); --component-colors-components-buttons-tertiary-button-tertiary-bg_hover-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-buttons-tertiary-color-button-tertiary-color-bg_hover: var(--colors-gray-900); --component-colors-components-buttons-tertiary-color-button-tertiary-color-bg_hover-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg: var(--colors-error-700); --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg-dark-mode: var(--colors-error-300); --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg_hover: var(--colors-error-800); --component-colors-components-buttons-tertiary-error-button-tertiary-error-fg_hover-dark-mode: var(--colors-error-200); --component-colors-components-buttons-tertiary-error-button-tertiary-error-bg_hover: var(--colors-error-50); --component-colors-components-buttons-tertiary-error-button-tertiary-error-bg_hover-dark-mode: var(--colors-error-900); --colors-background-bg-brand-primary_alt: var(--colors-brand-50); --colors-background-bg-brand-primary_alt-dark-mode: var(--colors-background-bg-secondary-dark-mode); --colors-foreground-fg-brand-primary_alt: var(--colors-brand-600); --colors-foreground-fg-brand-primary_alt-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-secondary_alt: var(--colors-gray-800); --colors-background-bg-secondary_alt-dark-mode: var(--colors-background-bg-primary-dark-mode); --colors-text-text-quaternary-(500): var(--colors-gray-400); --colors-text-text-quaternary-(500)-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-icons-featured-icons-modern-featured-icon-modern-border: var(--colors-gray-200); --component-colors-components-icons-featured-icons-modern-featured-icon-modern-border-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-brand: var(--colors-brand-600); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-brand-dark-mode: var(--colors-brand-200); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-gray: var(--colors-gray-500); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-gray-dark-mode: var(--colors-gray-dark-mode-200); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-error: var(--colors-error-600); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-error-dark-mode: var(--colors-error-200); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-warning: var(--colors-warning-600); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-warning-dark-mode: var(--colors-warning-200); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-success: var(--colors-success-600); --component-colors-components-icons-featured-icons-light-featured-icon-light-fg-success-dark-mode: var(--colors-success-200); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand: var(--colors-base-white); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-brand-dark-mode: var(--colors-brand-200); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-gray: var(--colors-base-white); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-gray-dark-mode: var(--colors-gray-dark-mode-200); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-error: var(--colors-base-white); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-error-dark-mode: var(--colors-error-200); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-warning: var(--colors-base-white); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-warning-dark-mode: var(--colors-warning-200); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-success: var(--colors-base-white); --component-colors-components-icons-featured-icons-dark-featured-icon-dark-fg-success-dark-mode: var(--colors-success-200); --component-colors-components-application-navigation-nav-item-icon-fg: var(--colors-gray-500); --component-colors-components-application-navigation-nav-item-icon-fg-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-application-navigation-nav-item-icon-fg_active: var(--colors-gray-500); --component-colors-components-application-navigation-nav-item-icon-fg_active-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-application-navigation-nav-item-button-icon-fg: var(--colors-gray-500); --component-colors-components-application-navigation-nav-item-button-icon-fg-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-application-navigation-nav-item-button-icon-fg_active: var(--colors-gray-700); --component-colors-components-application-navigation-nav-item-button-icon-fg_active-dark-mode: var(--colors-gray-dark-mode-300); --colors-background-bg-overlay: var(--colors-gray-950); --colors-background-bg-overlay-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-utility-brand-utility-brand-50_alt: var(--colors-brand-50); --component-colors-utility-brand-utility-brand-50_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-50-dark-mode); --component-colors-utility-brand-utility-brand-100_alt: var(--colors-brand-100); --component-colors-utility-brand-utility-brand-100_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-100-dark-mode); --component-colors-utility-brand-utility-brand-200_alt: var(--colors-brand-200); --component-colors-utility-brand-utility-brand-200_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-200-dark-mode); --component-colors-utility-brand-utility-brand-400_alt: var(--colors-brand-400); --component-colors-utility-brand-utility-brand-400_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-400-dark-mode); --component-colors-utility-brand-utility-brand-500_alt: var(--colors-brand-500); --component-colors-utility-brand-utility-brand-500_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-500-dark-mode); --component-colors-utility-brand-utility-brand-600_alt: var(--colors-brand-600); --component-colors-utility-brand-utility-brand-600_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-600-dark-mode); --component-colors-utility-brand-utility-brand-700_alt: var(--colors-brand-700); --component-colors-utility-brand-utility-brand-700_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-700-dark-mode); --component-colors-components-sliders-slider-handle-border: var(--colors-brand-600); --component-colors-components-sliders-slider-handle-border-dark-mode: var(--colors-background-bg-primary-dark-mode); --component-colors-components-sliders-slider-handle-bg: var(--colors-base-white); --component-colors-components-sliders-slider-handle-bg-dark-mode: var(--colors-foreground-fg-brand-primary-600-dark-mode); --component-colors-utility-brand-utility-brand-300: var(--colors-brand-300); --component-colors-utility-brand-utility-brand-300-dark-mode: var(--colors-brand-700); --colors-background-bg-secondary_subtle: var(--colors-gray-25); --colors-background-bg-secondary_subtle-dark-mode: var(--colors-gray-dark-mode-900); --component-colors-utility-gray-utility-gray-300: var(--colors-gray-300); --component-colors-utility-gray-utility-gray-300-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-alpha-alpha-white-100-dark-mode: var(--colors-gray-dark-mode-950); --component-colors-utility-brand-utility-brand-900: var(--colors-brand-900); --component-colors-utility-brand-utility-brand-900-dark-mode: var(--colors-brand-100); --component-colors-utility-gray-utility-gray-900: var(--colors-gray-900); --component-colors-utility-gray-utility-gray-900-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-header-sections-header-abstract-50-bg: var(--colors-brand-50); --component-colors-components-header-sections-header-abstract-50-bg-dark-mode: var(--colors-gray-dark-mode-900); --component-colors-components-header-sections-header-abstract-100-bg: var(--colors-brand-100); --component-colors-components-header-sections-header-abstract-100-bg-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-header-sections-header-abstract-200-bg: var(--colors-brand-200); --component-colors-components-header-sections-header-abstract-200-bg-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-header-sections-header-abstract-300-bg: var(--colors-brand-300); --component-colors-components-header-sections-header-abstract-300-bg-dark-mode: var(--colors-gray-dark-mode-600); --component-colors-utility-brand-utility-brand-800: var(--colors-brand-800); --component-colors-utility-brand-utility-brand-800-dark-mode: var(--colors-brand-200); --component-colors-utility-gray-utility-gray-800: var(--colors-gray-800); --component-colors-utility-gray-utility-gray-800-dark-mode: var(--colors-gray-dark-mode-200); --colors-border-border-tertiary: var(--colors-gray-100); --colors-border-border-tertiary-dark-mode: var(--colors-gray-dark-mode-800); --component-colors-components-mockups-screen-mockup-border: var(--colors-gray-900); --component-colors-components-mockups-screen-mockup-border-dark-mode: var(--colors-gray-dark-mode-700); --colors-text-text-brand-primary-(900): var(--colors-brand-900); --colors-text-text-brand-primary-(900)-dark-mode: var(--colors-gray-dark-mode-50); --colors-background-bg-brand-section: var(--colors-brand-800); --colors-background-bg-brand-section-dark-mode: var(--colors-background-bg-secondary-dark-mode); --colors-text-text-primary_alt: var(--colors-base-white); --colors-text-text-primary_alt-dark-mode: var(--colors-gray-dark-mode-50); --colors-text-text-secondary_alt: var(--colors-gray-400); --colors-text-text-secondary_alt-dark-mode: var(--colors-gray-dark-mode-300); --colors-text-text-tertiary_alt: var(--colors-gray-500); --colors-text-text-tertiary_alt-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-icons-icons-icon-fg-brand: var(--colors-brand-600); --component-colors-components-icons-icons-icon-fg-brand-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-icons-icons-icon-fg-brand_on-brand: var(--colors-brand-200); --component-colors-components-icons-icons-icon-fg-brand_on-brand-dark-mode: var(--colors-gray-dark-mode-400); --colors-background-bg-brand-section_subtle: var(--colors-brand-700); --colors-background-bg-brand-section_subtle-dark-mode: var(--colors-background-bg-primary-dark-mode); --component-colors-components-footers-footer-button-fg: var(--colors-brand-200); --component-colors-components-footers-footer-button-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-footers-footer-button-fg_hover: var(--colors-base-white); --component-colors-components-footers-footer-button-fg_hover-dark-mode: var(--colors-gray-dark-mode-100); --component-colors-components-app-store-badges-app-store-badge-border-dark-mode: var(--colors-base-white); --colors-text-text-quaternary_alt: var(--colors-gray-600); --colors-text-text-quaternary_alt-dark-mode: var(--colors-gray-dark-mode-400); --component-colors-components-footers-footer-badge-fg: var(--colors-success-700); --component-colors-components-footers-footer-badge-fg-dark-mode: var(--colors-base-white); --component-colors-components-footers-footer-badge-border: var(--colors-success-200); --component-colors-components-footers-footer-badge-bg: var(--colors-success-50); --component-colors-components-icons-social-icons-social-icon-fg-x-dark-mode: var(--colors-base-white); --component-colors-components-icons-social-icons-social-icon-fg-apple: var(--colors-base-black); --component-colors-components-icons-social-icons-social-icon-fg-apple-dark-mode: var(--colors-base-white); --component-colors-components-icons-social-icons-social-icon-fg-github: var(--colors-base-black); --component-colors-components-icons-social-icons-social-icon-fg-github-dark-mode: var(--colors-base-white); --component-colors-components-icons-social-icons-social-icon-fg-angellist: var(--colors-base-black); --component-colors-components-icons-social-icons-social-icon-fg-angellist-dark-mode: var(--colors-base-white); --component-colors-components-icons-social-icons-social-icon-fg-tumblr-dark-mode: var(--colors-base-white); --component-colors-components-icons-social-icons-social-icon-fg-instagram-dark-mode: var(--colors-base-white); --colors-text-text-brand-tertiary_alt: var(--colors-brand-600); --colors-text-text-brand-tertiary_alt-dark-mode: var(--colors-gray-dark-mode-50); --colors-background-bg-primary-solid: var(--colors-gray-900); --colors-background-bg-primary-solid-dark-mode: var(--colors-background-bg-secondary-dark-mode); --container-max-width-desktop-value: var(--spacing-320); --container-padding-desktop-value: var(--spacing-8); --container-padding-mobile-value: var(--spacing-4); --component-colors-components-thumbnail-thumbnail-badge-brand-fg: var(--colors-brand-700); --component-colors-components-thumbnail-thumbnail-badge-brand-fg-dark-mode: var(--colors-gray-dark-mode-300); --component-colors-components-thumbnail-thumbnail-badge-success-fg: var(--colors-success-700); --component-colors-components-thumbnail-thumbnail-badge-success-fg-dark-mode: var(--colors-gray-dark-mode-300); --width-xxs: var(--spacing-80); --width-sm: var(--spacing-120); --width-lg: var(--spacing-160); --width-xl: var(--spacing-192); --width-2xl: var(--spacing-256); --width-3xl: var(--spacing-320); --width-4xl: var(--spacing-360); --width-5xl: var(--spacing-400); --width-6xl: var(--spacing-480); --spacing-none: var(--spacing-0); --spacing-xxs: var(--spacing-0․5); --spacing-xs: var(--spacing-1); --spacing-md: var(--spacing-2); --spacing-lg: var(--spacing-3); --spacing-xl: var(--spacing-4); --spacing-2xl: var(--spacing-5); --spacing-3xl: var(--spacing-6); --spacing-4xl: var(--spacing-8); --spacing-6xl: var(--spacing-12); --spacing-7xl: var(--spacing-16); --spacing-8xl: var(--spacing-20); --spacing-9xl: var(--spacing-24); --spacing-10xl: var(--spacing-32); --spacing-11xl: var(--spacing-40); --component-colors-components-toggles-toggle-button-fg_disabled: var(--colors-gray-50); --component-colors-components-toggles-toggle-button-fg_disabled-dark-mode: var(--colors-gray-dark-mode-600); --width-md: var(--spacing-140); --paragraph-max-width: var(--spacing-180); --spacing-sm: var(--spacing-1․5); --width-xs: var(--spacing-96); --spacing-5xl: var(--spacing-10); --component-colors-utility-brand-utility-brand-300_alt: var(--colors-brand-300); --component-colors-utility-brand-utility-brand-300_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-300-dark-mode); --component-colors-utility-brand-utility-brand-800_alt: var(--colors-brand-800); --component-colors-utility-brand-utility-brand-800_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-800-dark-mode); --component-colors-utility-brand-utility-brand-900_alt: var(--colors-brand-900); --component-colors-utility-brand-utility-brand-900_alt-dark-mode: var(--component-colors-utility-gray-utility-gray-900-dark-mode); --component-colors-utility-error-utility-error-300: var(--colors-error-300); --component-colors-utility-error-utility-error-300-dark-mode: var(--colors-error-700); --component-colors-utility-warning-utility-warning-300: var(--colors-warning-300); --component-colors-utility-warning-utility-warning-300-dark-mode: var(--colors-warning-700); --component-colors-utility-success-utility-success-300: var(--colors-success-300); --component-colors-utility-success-utility-success-300-dark-mode: var(--colors-success-700); --component-colors-utility-gray-blue-utility-gray-blue-300: var(--colors-gray-blue-300); --component-colors-utility-gray-blue-utility-gray-blue-300-dark-mode: var(--colors-gray-blue-700); --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-300); --component-colors-utility-blue-light-utility-blue-light-300-dark-mode: var(--colors-blue-light-700); --component-colors-utility-blue-utility-blue-300: var(--colors-blue-300); --component-colors-utility-blue-utility-blue-300-dark-mode: var(--colors-blue-700); --component-colors-utility-blue-dark-utility-blue-dark-300: var(--colors-blue-dark-300); --component-colors-utility-blue-dark-utility-blue-dark-300-dark-mode: var(--colors-blue-dark-700); --component-colors-utility-indigo-utility-indigo-300: var(--colors-indigo-300); --component-colors-utility-indigo-utility-indigo-300-dark-mode: var(--colors-indigo-700); --component-colors-utility-purple-utility-purple-300: var(--colors-purple-300); --component-colors-utility-purple-utility-purple-300-dark-mode: var(--colors-purple-700); --component-colors-utility-fuchsia-utility-fuchsia-300: var(--colors-fuchsia-300); --component-colors-utility-fuchsia-utility-fuchsia-300-dark-mode: var(--colors-fuchsia-700); --component-colors-utility-pink-utility-pink-300: var(--colors-pink-300); --component-colors-utility-pink-utility-pink-300-dark-mode: var(--colors-pink-700); --component-colors-utility-orange-dark-utility-orange-dark-300: var(--colors-orange-dark-300); --component-colors-utility-orange-dark-utility-orange-dark-300-dark-mode: var(--colors-orange-dark-700); --component-colors-utility-orange-utility-orange-300: var(--colors-orange-300); --component-colors-utility-orange-utility-orange-300-dark-mode: var(--colors-orange-700); --colors-effects-shadows-shadow-xs-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-sm_02-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-lg_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-lg_02-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-sm_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-3xl_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-2xl_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-md_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-md_02-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl_01-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl_02-dark-mode: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-main-centre-md-dark-mode: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-main-centre-lg-dark-mode: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-overlay-lg-dark-mode: var(--colors-base-transparent); --colors-effects-portfolio-mockups-shadow-grid-md-dark-mode: var(--colors-base-transparent); --colors-effects-focus-rings-focus-ring: var(--colors-gray-700); --colors-effects-focus-rings-focus-ring-dark-mode: var(--colors-brand-500); --colors-effects-focus-rings-focus-ring-error: var(--colors-error-500); --colors-effects-focus-rings-focus-ring-error-dark-mode: var(--colors-error-500); --colors-border-border-secondary_alt: var(--colors-gray-700); --colors-border-border-secondary_alt-dark-mode: var(--colors-gray-dark-mode-700); --component-colors-components-toggles-toggle-border: var(--colors-gray-300); --component-colors-components-toggles-toggle-border-dark-mode: var(--colors-base-transparent); --component-colors-components-toggles-toggle-slim-border_pressed: var(--colors-background-bg-brand-solid-dark-mode); --component-colors-components-toggles-toggle-slim-border_pressed-dark-mode: var(--colors-base-transparent); --component-colors-components-toggles-toggle-slim-border_pressed-hover: var(--colors-background-bg-brand-solid_hover-dark-mode); --component-colors-components-toggles-toggle-slim-border_pressed-hover-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-lg_03-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-xl_03-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-2xl_02-dark-mode: var(--colors-base-transparent); --colors-effects-shadows-shadow-3xl_02-dark-mode: var(--colors-base-transparent); --component-colors-utility-green-utility-green-50: var(--colors-green-50); --component-colors-utility-green-utility-green-50-dark-mode: var(--colors-green-950); --component-colors-utility-green-utility-green-100: var(--colors-green-100); --component-colors-utility-green-utility-green-100-dark-mode: var(--colors-green-900); --component-colors-utility-green-utility-green-200: var(--colors-green-200); --component-colors-utility-green-utility-green-200-dark-mode: var(--colors-green-800); --component-colors-utility-green-utility-green-300: var(--colors-green-300); --component-colors-utility-green-utility-green-300-dark-mode: var(--colors-green-700); --component-colors-utility-green-utility-green-400: var(--colors-green-400); --component-colors-utility-green-utility-green-400-dark-mode: var(--colors-green-600); --component-colors-utility-green-utility-green-500: var(--colors-green-500); --component-colors-utility-green-utility-green-500-dark-mode: var(--colors-green-500); --component-colors-utility-green-utility-green-600: var(--colors-green-600); --component-colors-utility-green-utility-green-600-dark-mode: var(--colors-green-400); --component-colors-utility-green-utility-green-700: var(--colors-green-700); --component-colors-utility-green-utility-green-700-dark-mode: var(--colors-green-300); --component-colors-utility-yellow-utility-yellow-50: var(--colors-yellow-50); --component-colors-utility-yellow-utility-yellow-50-dark-mode: var(--colors-yellow-950); --component-colors-utility-yellow-utility-yellow-100: var(--colors-yellow-100); --component-colors-utility-yellow-utility-yellow-100-dark-mode: var(--colors-yellow-900); --component-colors-utility-yellow-utility-yellow-200: var(--colors-yellow-200); --component-colors-utility-yellow-utility-yellow-200-dark-mode: var(--colors-yellow-800); --component-colors-utility-yellow-utility-yellow-300: var(--colors-yellow-300); --component-colors-utility-yellow-utility-yellow-300-dark-mode: var(--colors-yellow-700); --component-colors-utility-yellow-utility-yellow-400: var(--colors-yellow-400); --component-colors-utility-yellow-utility-yellow-400-dark-mode: var(--colors-yellow-600); --component-colors-utility-yellow-utility-yellow-500: var(--colors-yellow-500); --component-colors-utility-yellow-utility-yellow-500-dark-mode: var(--colors-yellow-500); --component-colors-utility-yellow-utility-yellow-600: var(--colors-yellow-600); --component-colors-utility-yellow-utility-yellow-600-dark-mode: var(--colors-yellow-400); --component-colors-utility-yellow-utility-yellow-700: var(--colors-yellow-700); --component-colors-utility-yellow-utility-yellow-700-dark-mode: var(--colors-yellow-300); --gradient-skeuemorphic-gradient-border: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%); } /* Icons */ .icon-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); } .icon-md { width: var(--icon-size-md); height: var(--icon-size-md); } .icon-featured { width: var(--icon-featured-size-md); height: var(--icon-featured-size-md); } .icon-svg { vertical-align: top; display: inline-block; content: none; &.colored { background-color: currentColor; } } .icon-Google { width: 25px; height: 24px; content: var(--icon-google-url); } .icon-arrow { -webkit-mask: var(--icon-arrow-url) no-repeat center / contain; mask: var(--icon-arrow-url) no-repeat center / contain; } .icon-arrow-left { -webkit-mask: var(--icon-arrow-left-url) no-repeat center / contain; mask: var(--icon-arrow-left-url) no-repeat center / contain; } .icon-email { content: var(--icon-email-url); } .icon-check { width: 56px; height: 56px; content: var(--icon-check-url); } .icon-key { width: 56px; height: 56px; content: var(--icon-key-url); } .icon-lock { width: 57px; height: 56px; content: var(--icon-lock-url); } .icon-error { width: 57px; height: 56px; content: var(--icon-error-url); } /* General */ .visible { visibility: visible !important; } .hidden { visibility: hidden !important; display: none !important; } /* Page */ body{ background-color: var(--colors-background-bg-primary); font-family: var(--text-normal-font-family), sans-serif; font-weight: var(--text-normal-font-weight); font-size: var(--text-normal-font-size); line-height: var(--text-normal-line-height); color: var(--colors-text-text-secondary) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; &:has(.view-container) { background-color: var(--color-background-inactive); .menu { display: none !important; padding: 0 !important; margin: 0; } .menu-logo { display: none; } .container { max-width: var(--container-width-max); margin-left: 0; padding: 0 !important; footer { display: none !important; } } } iframe { border: none; } &:has(.view-container.register-confirmation), &:has(.view-container.confirmation-email), &:has(.view-container.logged-out), &:has(.view-container.forgot-password), &:has(.view-container.forgot-password-confirmation), &:has(.view-container.reset-password), &:has(.view-container.error-page), &:has(.view-container.reset-password-confirmation) { .view-container { height: fit-content; min-height: fit-content; .content-header { gap: var(--spacing-3xl, 24px) !important; .feature-icon { display: flex; width: 56px; height: 56px; padding: 14px; justify-content: center; align-items: center; border-radius: var(--radius-full, 9999px); background: var(--color-background-bg-tertiary, #F2F5E7); &:has(.icon-error) { background-color: transparent; } } .header-content { h1 { width: 100%; text-align: center; font-size: var(--font-size-header-sm, 30px) !important; font: normal !important; font-weight: 500 !important; line-height: var(--line-height-display-sm, 38px) !important; } h4 { width: 100%; text-align: center; max-width: 500px; } } } .frame-header { display: none !important; } .page-frame-left { max-width: var(--container-width-max); padding: var(--spacing-9xl, 96px) 0 var(--spacing-6xl, 48px) 0; flex-direction: column; align-items: center; gap: var(--spacing-4xl, 32px); justify-content: start; width: 100%; min-height: 100vh; } .page-frame-right { display: none !important; } } } } .view-container { display: flex; align-items: stretch; width: 100%; min-width: var(--width-min); min-height: 100vh; background: var(--color-background-bg-primary, #FFF); .alert-danger { display: flex; flex-direction: column; gap: var(--spacing-xs, 4px); margin: 0; padding: var(--spacing-lg); width: 100%; max-width: var(--aid-content-frame-content-max-width); color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; dl, ol, ul { margin-top: 0; margin-bottom: 0; padding-left: 1rem; } } .validation-summary-errors { background: none; margin-bottom: 0; margin-top: 0; border: none; padding: 0; } /* Page frame */ .page-frame-left { display: flex; width: 40%; min-width: var(--width-min); flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; height: auto; min-height: 100vh; .frame-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg, 12px); align-self: stretch; min-height: 40px; .logo{ position: absolute; left: 32px; top: 32px; width: 73px; height: 20px; } } .frame-container { display: flex; padding: 0 var(--container-padding-desktop, 32px); flex-direction: column; align-items: center; align-self: stretch; .content { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-4xl, 32px); align-self: stretch; padding: 50px 0; .content-header{ display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg, 12px); align-self: stretch; .header-content{ min-width: var(--aid-content-frame-content-min-width); max-width: var(--aid-content-frame-content-max-width); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg, 12px); /*align-self: stretch;*/ h1 { color: var(--colors-text-text-primary, #121212); font-family: var(--font-family), serif; font-size: var(--font-size-display-lg, 48px); font: normal; font-weight: 500; line-height: var(--line-height-display-md, 44px); /* 91.667% */ padding: 0; margin: 0; } h4 { color: var(--colors-text-text-secondary, #737373); font-family: var(--font-family), serif; font-size: var(--font-size-text-md, 16px); font: normal; font-weight: 400; line-height: var(--line-height-text-md, 24px); /* 150% */ padding: 0; margin: 0; } } } .content-frame{ display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3xl, 24px); align-self: stretch; .content-content{ max-width: var(--aid-content-frame-content-max-width); min-width: var(--aid-content-frame-content-min-width); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-lg, 12px); } } } } } .page-frame-right { display: flex; padding: var(--spacing-9xl, 21.4375rem) var(--spacing-7xl, 0) 21.44475rem var(--spacing-8xl, 6.25rem); flex-direction: column; justify-content: start; gap: var(--spacing-8xl, 0); background: var(--color-background-inactive); align-items: flex-start; flex: 1 1 auto; width: 60%; position: relative; height: auto; min-height: 0; align-self: stretch; overflow: hidden; padding-left: 6%; .quote-container { display: flex; width: 41rem; flex-direction: column; align-items: flex-start; gap: var(--spacing-3xl, 1.5rem); min-height: 8.5rem; } .image-container { /*width: 102.75rem;*/ /*height: 62.24275rem;*/ /*width: 1250px;*/ /*height: 631px;*/ position: absolute; /*top: 16rem;*/ width: 110%; align-content: center; height: 100%; margin-top: -96px; .background-image { /*width: 102.7145rem;*/ /*height: 62.24344rem;*/ /*height: 631px;*/ /*aspect-ratio: 1041/631;*/ /*flex-shrink: 0;*/ /*background: linear-gradient(270deg, #101010 27.31%, rgba(16, 16, 16, 0.50) 54.54%, rgba(16, 16, 16, 0.00) 72.69%),*/ /* url('/images/laptop_flatten.png') transparent 0px -0.011px / 100% 100.002% no-repeat;*/ /* Try 1 */ /*margin-left: auto;*/ /*height: 65%;*/ /*background-image: linear-gradient(270deg, rgb(16, 16, 16) 10%, rgba(16, 16, 16, 0.5) 30%, rgba(16, 16, 16, 0) 60%),*/ /* url("/images/laptop_flatten.png");*/ /*background-color: transparent;*/ /*background-repeat: no-repeat;*/ /*background-size: contain;*/ /*background-position: right;*/ /* Try 2 */ margin-left: auto; width: 100%; height: 100%; background-image: linear-gradient(270deg, rgb(16, 16, 16) 10%, rgba(16, 16, 16, 0.5) 30%, rgba(16, 16, 16, 0) 60%), url("/images/laptop_flatten.png"); background-position: right center; background-repeat: no-repeat; background-size: contain; } .rectangle { display: none; width: 108.22288rem; height: 62.24275rem; flex-shrink: 0; background: linear-gradient(90deg, var(--color-background-inactive) 27.31%, rgba(16, 16, 16, 0.50) 54.54%, rgba(16, 16, 16, 0.00) 72.69%); } } } } .steps { gap: inherit; display: inherit; flex-direction: inherit; align-items: inherit; align-self: inherit; max-width: var(--aid-content-frame-content-max-width);; } /* Buttons */ .btn { width: 100%; max-width: var(--aid-control-button-max-width); display: flex; padding: 10px var(--spacing-xl, 16px); justify-content: center; align-items: center; gap: var(--spacing-lg, 12px); align-self: stretch; border-radius: var(--aid-control-radius) !important; border-width: 2px !important; border: solid !important; box-shadow: 0 0 0 1px var(--color-effects-shadows-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--color-effects-shadows-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--color-effects-shadows-xs, rgba(10, 13, 18, 0.05)) !important; &:focus, &:focus-visible { outline: 1px solid var(--color-border-primary-focus, #535862) !important; border-radius: var(--aid-control-radius) !important; } &:hover, &:active{ border-radius: var(--aid-control-radius) !important; border-width: 2px !important; border: solid !important; border-color: var(--color-buttons-outline-primary-border-hover) !important; background-color: var(--color-buttons-outline-primary-bg-hover) !important; } } .btn-primary, .btn-primary:visited { color: var(--component-colors-components-buttons-primary-button-primary-fg, #FFF) !important; border-radius: var(--radius-xs-mode-1, 4px) !important; border: 2px solid var(--gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12)) !important; background: var(--component-colors-components-buttons-primary-button-primary-bg, #333) !important; box-shadow: 0 0 0 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--colors-effects-shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)) !important; &:focus, &:focus-visible { color: var(--component-colors-components-buttons-primary-button-primary-fg, #FFF) !important; border-radius: var(--radius-xs, 4px) !important; border: 2px solid var(--gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12)) !important; background: var(--component-colors-components-buttons-primary-button-primary-bg, #333) !important; box-shadow: 0 0 0 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--colors-effects-shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)), 0 0 0 2px var(--colors-background-bg-primary, #FFF), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring, #333) !important; } &:hover, &:active{ color: var(--component-colors-components-buttons-primary-button-primary-fg_hover, #F7F6F3) !important; border-radius: var(--radius-xs, 4px) !important; border: 2px solid var(--gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12)) !important; background: var(--component-colors-components-buttons-primary-button-primary-bg_hover, #13161B) !important; } } .btn-outline-primary, .btn-outline-primary:visited, .btn-social-Google, .btn-social-Google:visited { color: var(--colors-text-text-secondary, #737373) !important; border-radius: var(--radius-xs, 4px) !important; border: 1px solid var(--colors-border-border-secondary, #CCC) !important; background: var(--colors-background-bg-primary, #FFF) !important; box-shadow: 0 0 0 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--colors-effects-shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)) !important; &:focus, &:focus-visible { color: var(--colors-text-text-secondary, #737373) !important; border-radius: var(--radius-xs, 4px) !important; border: 1px solid var(--colors-border-border-secondary, #CCC) !important; background: var(--colors-background-bg-primary, #FFF) !important; box-shadow: 0 0 0 1px var(--colors-effects-shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0 -2px 0 0 var(--colors-effects-shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)), 0 0 0 2px var(--colors-background-bg-primary, #FFF), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring, #333) !important; } &:hover, &:active{ color: var(--colors-text-text-secondary_hover, #333) !important; border-radius: var(--radius-xs, 4px) !important; border: 1px solid var(--color-buttons-outline-primary-border-hover) !important; background: var(--colors-background-bg-primary_hover, #F7F6F3) !important; } } a, .link { align-items: center; display: inline-flex; gap: var(--spacing-xs, 4px); font-size: var(--font-size-text-sm, 14px); font: normal; line-height: var(--line-height-text-sm, 20px); color: var(--component-colors-components-buttons-tertiary-button-tertiary-fg, #333); font-weight: 500; &:focus, &:focus-visible { outline: none !important; border-radius: var(--radius-xs, 4px) !important; background: rgba(255, 255, 255, 0.00) !important; box-shadow: 0 0 0 2px var(--colors-background-bg-primary, #FFF), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring, #333) !important; } &:hover, &:active{ color: var(--colors-base-black, #000000); text-decoration: none; } } .forgot-password { display: flex; justify-content: flex-end; width: 100%; } /* Text */ .text-tertiary { color: var(--colors-text-text-secondary, #737373); font-family: var(--font-family), serif; font-size: var(--font-size-text-sm, 14px); font: normal; font-weight: 400; line-height: var(--line-height-text-sm, 20px); } /* Forms */ form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl, 20px); align-self: stretch; .form-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm, 6px); align-self: stretch; margin: 0; &.action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl, 16px); align-self: stretch; } &.checkboxes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl, 16px); align-self: stretch; label { gap: var(--spacing-xs, 4px); } } .col-md-10{ padding: 0; width: 100%; flex: none; max-width: none; } label { color: var(--colors-text-text-secondary, #737373); max-width: 100%; padding: 0; margin: 0; required:after { content: "*"; color: var(--color-text-error-primary-600, #D92D20); font-family: var(--font-family), serif; font-size: var(--font-size-text-sm, 14px); font: normal; font-weight: 500; line-height: var(--line-height-text-sm, 20px); } } input { color: var(--colors-text-text-primary, #121212FF); border-radius: var(--radius-md, 8px) !important; border: 1px solid var(--colors-border-border-secondary, #CCC); background: var(--colors-background-bg-primary, #FFF); box-shadow: 0 1px 2px 0 var(--colors-effects-shadows-shadow-xs, rgba(10, 13, 18, 0.05)) !important; display: flex; padding: 10px 14px; align-items: center; gap: var(--spacing-md, 8px); align-self: stretch; height: var(--aid-control-height); width: var(--aid-control-width); &:focus, &:focus-visible, &:active{ outline: none; border-color: var(--colors-effects-focus-rings-focus-ring, #333) !important; border-width: 2px; } &::placeholder { color: var(--colors-text-text-placeholder, #7F7F7F); font-size: 14px; opacity: 1; } &[type="checkbox"] { appearance: none; /* remove default browser styling */ -webkit-appearance: none; -moz-appearance: none; display: inline-flex; width: 16px; min-width: 16px; max-width: 16px; height: 16px; min-height: 16px; max-height: 16px; padding: 0; margin: 2px 0 0; border-radius: var(--radius-xs, 4px) !important; border: 1px solid var(--colors-border-border-secondary, #CCC); box-shadow: none !important; &:focus, &:focus-visible, &:active{ outline: none; border-radius: var(--radius-xs, 4px); border: 1px solid var(--colors-border-border-secondary, #CCC) !important; background: var(--colors-background-bg-primary, #FFF); box-shadow: 0 0 0 2px var(--colors-background-bg-primary, #FFF), 0 0 0 4px var(--colors-effects-focus-rings-focus-ring, #333) !important; } /*&:hover, &:active{*/ /* border-radius: var(--radius-xs, 4px);*/ /* border: 1px solid var(--colors-border-border-secondary, #CCC);*/ /*}*/ &:checked { border-color: transparent; background-color: var(--colors-background-bg-secondary-solid, #737373); border-radius: var(--radius-xs, 4px); &::after { content: "✓"; /* custom checkmark */ color: var(--color-background-bg-primary); font-size: 14px; font-weight: 600; position: relative; top: 0; left: 2px; } } } &[type="checkbox"] + label { display: inline-flex; } } div:has(> input[type="checkbox"]) { /*display: flex;*/ align-items: center; display: flex !important; gap: var(--spacing-md, 8px); flex: 1 0 0; padding: 0; } .switch input { display: none; } } } @media (max-width: 957px) { .view-container { .page-frame-left { width: 100%; } .page-frame-right { padding: inherit !important; display: none; } } } @media (max-width: 419px) { .view-container { .page-frame-left { .frame-header { .logo { left: 8px !important; } } } } }