/* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } .site-content { background-color: #fff; } .highlighted { color: #005cb9; } .contact-background-image-1, .contact-background-image-2 { position: absolute; width: 65%; } .contact-background-image-1 { top: 0; left: 0; } .contact-background-image-2 { bottom: 0; right: 0; } .contact-page { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 1180px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: auto auto 24px; padding: 32px 24px; } .contact-page .contact-header { font-family: ETrade-Bold; line-height: 100%; color: rgb(29, 40, 48); font-size: 2.5rem; line-height: 120%; height: 80px; width: 100%; margin-top: 88px; margin-bottom: 72px; position: relative; white-space: nowrap; } .contact-page .contact-header::after { content: " "; position: absolute; left: 0; bottom: 0; border-bottom: 4px solid #005cb9; height: 8px; width: 54px; } .contact-page .contact-body, .contact-page .employee-signup-body { width: 50%; -webkit-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .contact-page *::-ms-backdrop, .contact-page .contact-body, .contact-page .employee-signup-body { width: 45%; -ms-flex-preferred-size: 45%; flex-basis: 45%; } .contact-page .contact-body { border-right: 2px solid rgb(216, 217, 218); } .contact-page .employee-signup-body { padding-left: 32px; } .contact-page .contact-header-location, .contact-page .contact-header-sales, .contact-page .contact-header-media { font-family: ETrade-Bold; line-height: 150%; color: rgb(29, 40, 48); font-size: 1rem; margin-bottom: 16px; } .contact-page .contact-address, .contact-page .contact-sales-email, .contact-page .contact-media-email { font-family: ETrade-Regular; line-height: 150%; color: rgb(29, 40, 48); font-size: 1.5rem; font-style: normal; } .contact-page .contact-address span, .contact-page .contact-sales-email span, .contact-page .contact-media-email span { display: block; white-space: pre-line; } .contact-page .contact-sales-email, .contact-page .contact-media-email { display: block; text-decoration: none; height: 40px; } .contact-page .contact-sales-email::after, .contact-page .contact-media-email::after { content: " "; position: absolute; left: 0; bottom: 0; border-bottom: 2px solid #005cb9; width: 54px; } .contact-page .contact-address, .contact-page .contact-sales-email { margin-bottom: 64px; } .contact-page .contact-sales-email::after { width: 200px; } .contact-page .contact-media-email { margin-bottom: 24px; } .contact-page .contact-media-email::after { width: 260px; } @media (max-width: 50em) { .contact-page { padding: 40px; } .contact-page .contact-header { font-family: ETrade-Bold; line-height: 100%; color: rgb(29, 40, 48); font-size: 2rem; line-height: 120%; height: 56px; margin-bottom: 48px; } .contact-page .contact-header-location, .contact-page .contact-header-sales, .contact-page .contact-header-media { font-family: ETrade-Semibold; line-height: 120%; color: rgb(29, 40, 48); font-size: 0.75rem; line-height: 150%; } .contact-page .contact-header-location { margin-top: 16px; } .contact-page .contact-address, .contact-page .contact-sales-email, .contact-page .contact-media-email { font-family: ETrade-Regular; line-height: 150%; color: rgb(29, 40, 48); font-size: 1rem; margin-bottom: 32px; } .contact-page .contact-sales-email, .contact-page .contact-media-email { height: 32px; } .contact-page .contact-sales-email::after { width: 130px; } .contact-page .contact-media-email::after { width: 175px; } } @media (max-width: 40em) { .contact-page { padding: 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-page .contact-header { height: 55px; margin-bottom: 40px; } .contact-page .contact-header-location { margin-top: 0; } .contact-page .contact-body, .contact-page .employee-signup-body { width: 100%; -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .contact-page .contact-sales-email, .contact-page .contact-media-email { height: 30px; } .contact-page .contact-media-email { margin-bottom: 40px; } .contact-page .contact-body { border-right: none; border-bottom: 2px solid rgb(216, 217, 218); } .contact-page .employee-signup-body { margin: 32px 0 48px; padding-left: 0; } *::-ms-backdrop, .contact-page { display: block; } } /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } #view .page-header .full-screen-header { background-color: white; position: fixed; top: 0; left: 0; right: 0; } #view .page-header .full-screen-header .site-logo-container { padding-top: 0; } #view .page-header .full-screen-header .site-logo { background: url(/static/gradifui/assets/Gradifi-Logo-Horiz-Color.dbac622961af3346547b.svg) left center no-repeat; background-size: 250px 64px; } #view .page-header .full-screen-header .sub-items { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; background-color: white; color: rgb(29, 40, 48); } #view .page-header .full-screen-header .sub-items .header-item { color: black; } #view .page-header .full-screen-header .sub-items .header-item .label-link { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } #view .page-header .small-screen-header .sub-item-container { right: 0; } #view .page-header .full-screen-header, #view .page-header .small-screen-header { -webkit-box-shadow: 10px 20px 80px 0 rgba(11, 42, 65, 0.17); box-shadow: 10px 20px 80px 0 rgba(11, 42, 65, 0.17); } #view.inverted-header .page-header .full-screen-header { background-color: white; } #view .btn-demo-header { margin-left: 16px; } #view .full-screen-header .marketing-header-solutions .header-item:not(.menu-open) .sub-item-container { pointer-events: none; } img.right-arrow { height: 14px; width: 16px; color: #005cb9; -webkit-margin-after: 0; margin-block-end: 0; } .labelled-item .label-link { color: black; } .labelled-item .label-link:hover { color: black; } .labelled-item .label-link.solutions-link { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -moz-box-orient: horizontal; -moz-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; cursor: default; } .labelled-item .label-link.solutions-link i { margin-top: 2px; color: #005cb9; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions > .header-item.labelled-item { height: auto; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions .solutions-link { display: none; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions .header-item { padding-left: 0; margin-bottom: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions .header-item .sub-item-container { overflow: visible; height: auto; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions .header-item .sub-item-container .sub-items .header-item.labelled-item { height: 54px; margin-bottom: 0; padding-left: 0; -webkit-box-align: start; -webkit-align-items: start; -moz-box-align: start; -ms-flex-align: start; align-items: start; } .page-header .small-screen-header .header-item .sub-item-container .right-section .marketing-header-solutions .header-item .sub-item-container .sub-items .header-item.labelled-item:last-of-type { height: 44px; } .page-header .small-screen-header .header-item .sub-item-container .right-section > .header-item.labelled-item { height: 54px; margin-bottom: 0; padding-left: 0; } .marketing-header-solutions .flyout-tile-image { height: 70px; width: 70px; } .marketing-header-solutions .flyout-tile { text-align: center; padding: 48px 0; border-bottom: 4px solid; cursor: pointer; } .marketing-header-solutions .flyout-tile:hover { background: rgb(229, 242, 255); } .marketing-header-solutions .product-overview .flyout-tile-image { height: 70px; width: 90px; } .marketing-header-solutions .product-overview .flyout-tile-header { color: rgb(29, 40, 48); } .marketing-header-solutions .product-overview { border-bottom-color: #005cb9; } .marketing-header-solutions .fincore .flyout-tile-header { color: #009d4f; } .marketing-header-solutions .fincore { border-bottom-color: #00b451; } .marketing-header-solutions .slp .flyout-tile-header { color: #005cb9; } .marketing-header-solutions .slp { border-bottom-color: #00a0df; } .marketing-header-solutions .csu .flyout-tile-header { color: #8a1a9b; } .marketing-header-solutions .csu { border-bottom-color: #b14fc5; } .small-screen-header .header-item.mobile-menu-item:not(.menu-open) { -webkit-box-shadow: 10px 20px 80px 0 rgba(11, 42, 65, 0.17); box-shadow: 10px 20px 80px 0 rgba(11, 42, 65, 0.17); } .small-screen-header .menu-open .mobile-menu-container { background-color: transparent; } .small-screen-header .menu-open .mobile-menu-container .mobile-header-container-marketing { background-color: transparent; } .small-screen-header .menu-open .mobile-menu-container .menu-button-marketing .menu-toggle-marketing, .small-screen-header .menu-open .mobile-menu-container .menu-button-marketing::before, .small-screen-header .menu-open .mobile-menu-container .menu-button-marketing::after { background-color: #fff; } .small-screen-header .menu-open .mobile-menu-container .site-logo-container .site-logo-marketing { background: url(/static/gradifui/assets/Gradifi-Logo-Horiz-White.cad80791a89446a7ef0f.svg) left center no-repeat; background-size: contain; } .small-screen-header .menu-open .mobile-menu-container .menu-overlay { background: transparent; } .small-screen-header .menu-open .mobile-menu-container .btn-demo { display: none; } .small-screen-header .menu-open .mobile-menu-container .spacer { display: none; } .small-screen-header .menu-open.mobile-menu-item .sub-item-container { -webkit-animation: fadeIn 400ms ease; animation: fadeIn 400ms ease; } .small-screen-header .menu-open.mobile-menu-item .sub-item-container, .small-screen-header .menu-open.mobile-menu-item .sub-items { background-color: #005cb9; } .small-screen-header .menu-open.mobile-menu-item .sub-item-container { position: absolute; top: 0; padding: 0; } .small-screen-header .menu-open.mobile-menu-item .sub-items { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; background-image: url(/static/marketing/assets/redesign2020/header/mobile-background-chevron.42bd9ef8862ca7e75b1f.svg); background-size: contain; background-repeat: no-repeat; background-position: bottom right; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; margin: 96px auto 0; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .csu, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .slp, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .fincore, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-overview, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .about, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .logout, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .login { font-family: ETrade-Bold; line-height: 100%; color: rgb(29, 40, 48); color: #fff; text-decoration: none; margin: 8px 0; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .csu, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .slp, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .fincore, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-overview { font-family: ETrade-Semibold; line-height: 120%; color: rgb(29, 40, 48); font-size: 1rem; color: #fff; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .about, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .login, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .logout { font-size: 1.25rem; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header-checkbox { display: none; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header::after { content: "▼"; display: inline-block; margin-left: 2px; -webkit-transition: -webkit-transform 300ms ease-in; transition: -webkit-transform 300ms ease-in; -o-transition: transform 300ms ease-in; transition: transform 300ms ease-in; transition: transform 300ms ease-in, -webkit-transform 300ms ease-in; -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-dropdown { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 16px 0 0; max-height: 0; overflow: hidden; -webkit-transition: max-height 400ms ease-out; -o-transition: max-height 400ms ease-out; transition: max-height 400ms ease-out; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header-checkbox:checked ~ .product-dropdown { max-height: 1000px; -webkit-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header-checkbox:checked ~ .product-header::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .about, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .login, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .logout { margin-top: 24px; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo { border-radius: 32px; font-size: 0.75rem; font-weight: 600; text-align: center; color: #fff; background-color: #005cb9; -webkit-box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in; -o-transition: color 0.2s ease-in, background-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo:hover { color: rgb(29, 40, 48); background-color: #fff; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo { background: transparent; letter-spacing: 1px; text-decoration: none; border: 2px solid #fff; padding: 16px 32px; -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 40em) { .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .csu, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .slp, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .fincore, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-overview { font-size: 1.5rem; margin: 16px 0; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .product-header, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .about, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .login, .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .logout { font-size: 2rem; margin: 48px 0 24px; } .small-screen-header .menu-open.mobile-menu-item .marketing-header-mobile .request-demo { margin-top: 40px; } } @media (max-width: 65em) { .btn-demo-header-mobile { display: none; } .small-screen-header .menu-open > .sub-item-container { display: static; } .small-screen-header > :not(.menu-open) > .sub-item-container { display: none; } } @media (min-width: 60em) { .full-screen-header .right-section .marketing-header-solutions .header-item .sub-item-container { position: fixed; left: 0; right: 0; } .full-screen-header .labelled-item .label-link.login-link .header-label, .full-screen-header .labelled-item .label-link.solutions-link .header-label { display: block; } .full-screen-header .flyout-container { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ /* TODO:: GR-7482 */ .product-container { min-height: 100px; width: 100%; } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .labelled-item { /* allow shrinking */ min-width: 16px; cursor: default; } .labelled-item .label-link { height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; text-decoration: none; min-width: 0; width: 100%; z-index: 71; -webkit-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; font-weight: 600; padding: 8px; } .labelled-item .label-link:hover { color: #00a0d4; } .labelled-item i { margin-right: 4px; } .labelled-item .header-label { /* fix wrapping, truncate with ellipsis instead */ overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .labelled-item.selected > a { color: #00a0d4; /* color: black; */ } .login-link-section .login-link-content { display: inline-block; } .login-link-section .right-arrow-wrapper { margin-top: 14%; vertical-align: top; } @media (max-width: 80em) { .full-screen-header .labelled-item .label-link i { font-size: 1rem; } .full-screen-header .sub-items .labelled-item .header-label { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } } @media (max-width: 50em) { .page-header .small-screen-header .label-link { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .logo-item { min-width: 240px; } .logo-item .site-logo-container { z-index: 70; width: 352px; height: 56px; padding-top: 4px; margin-right: 24px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .logo-item .site-logo-container .site-logo { background-size: cover; background-position: top; background-repeat: no-repeat; background-image: url(/static/gradifui/assets/Gradifi-Logo-Horiz-White.cad80791a89446a7ef0f.svg); width: 256px; height: 56px; background-origin: content-box; background-size: contain; display: inline-block; } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } .page-header { color: white; z-index: 70; } .page-header .full-screen-header { padding: 0 16px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; background-color: rgb(29, 40, 48); } .page-header .small-screen-header { display: none; } .page-header .left-section, .page-header .right-section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .page-header .right-section { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .page-header .left-section { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; min-width: 0; -webkit-box-pack: left; -webkit-justify-content: left; -moz-box-pack: left; -ms-flex-pack: left; justify-content: left; } .page-header .header-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 16px; height: 64px; } .page-header .header-item .sub-item-container { overflow: hidden; position: absolute; padding-top: 4px; top: 60px; left: 0; min-width: 100%; } /* further nested menus don't need to adjust for header height */ .page-header .header-item .sub-item-container .sub-item-container { top: 0; left: 0; } .page-header .sub-items { width: 100%; background-color: rgb(29, 40, 48); z-index: 69; } .page-header .sub-items .header-item { height: auto; margin: 0; } .page-header .payment-accounts .sub-item-container .icon-bank { display: none; } @media (max-width: 65em) { .page-header { position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 70; } .page-header .full-screen-header { display: none; } .page-header .small-screen-header { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 100vw; } .page-header .small-screen-header .left-section { width: 100%; max-width: 100%; } .page-header .small-screen-header .header-item { margin: 0; width: 100%; } .page-header .small-screen-header .mobile-menu-container + .sub-item-container > .sub-items { height: 100vh; } } /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ .menu-overlay { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 68; background-color: rgba(29,41,52, 0.7); } .page-header .mobile-menu-item { min-width: 280px; } .page-header .mobile-menu-item .mobile-menu-container { width: 100%; } .page-header .mobile-menu-item .mobile-header-container, .page-header .mobile-menu-item .mobile-header-container-marketing { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 0 8px; height: 64px; background-color: rgb(29, 40, 48); z-index: 71; } .page-header .mobile-menu-item .mobile-header-container .mobile-buttons-section, .page-header .mobile-menu-item .mobile-header-container-marketing .mobile-buttons-section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .page-header .mobile-menu-item .mobile-header-container .mobile-buttons-section .spacer, .page-header .mobile-menu-item .mobile-header-container-marketing .mobile-buttons-section .spacer { border-right: 1px solid #5a666e; margin: 16px; width: 2px; } .page-header .mobile-menu-item .mobile-header-container .mobile-buttons-section .btn-demo, .page-header .mobile-menu-item .mobile-header-container-marketing .mobile-buttons-section .btn-demo { text-align: center; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .page-header .mobile-menu-item .mobile-header-container-marketing { background-color: white; } .page-header .mobile-menu-item .site-logo-container { top: 8px; width: 352px; height: 48px; margin: 4px 0 0 8px; display: inline-block; } .page-header .mobile-menu-item .site-logo-container .site-logo-marketing { background: url(/static/gradifui/assets/Gradifi-Logo-Horiz-Color.dbac622961af3346547b.svg) left center no-repeat; background-size: contain; width: 100%; height: 40px; display: inline-block; } .page-header .mobile-menu-item .site-logo-container .site-logo { background: url(/static/gradifui/assets/Gradifi-Logo-Horiz-White.cad80791a89446a7ef0f.svg) left center no-repeat; background-size: contain; width: 100%; height: 40px; display: inline-block; } .page-header .mobile-menu-item .sub-item-container { min-width: auto; height: 100vh; } .page-header .mobile-menu-item .sub-item-container .sub-items { width: 100%; } .page-header .mobile-menu-item .sub-item-container .sub-items .logo-item { display: none; } .page-header .mobile-menu-item .sub-item-container .sub-items .left-section { padding-top: 32px; padding-left: 32px; } .page-header .mobile-menu-item .sub-item-container .sub-items .left-section > .header-item { height: 52px; padding-bottom: 32px; } .page-header .mobile-menu-item .sub-item-container .sub-items .left-section, .page-header .mobile-menu-item .sub-item-container .sub-items .right-section { display: block; } .page-header .mobile-menu-item .sub-item-container .sub-items .labelled-item { margin-bottom: 8px; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .header-item:first-of-type .label-link { -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; padding-top: 0; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .labelled-item { height: 54px; padding-left: 60px; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .labelled-item .label-link { padding-left: 4px; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 0 16px; margin-top: 32px; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item .user-item-button { width: auto; margin-bottom: 16px; padding: 8px 0 8px 24px; font-size: 1rem; font-weight: 600; height: 52px; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item .user-item-button .icon-down-open { display: none; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item .user-item-button + .sub-item-container .header-item:not(:first-of-type) .label-link { padding-top: 0; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item .sub-item-container { padding: 0; } .page-header .mobile-menu-item .sub-item-container .sub-items .right-section .user-item .sub-items { padding-left: 4px; } .page-header .mobile-menu-item .sub-item-container .sub-items .header-item { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 24px; margin-bottom: 0; } .page-header .mobile-menu-item .sub-item-container .sub-items .header-item .label-link { width: auto; margin-left: 4px; font-size: 1rem; font-weight: 600; } .page-header .mobile-menu-item .sub-item-container .sub-items .header-item .label-link i { margin-right: 16px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts + .header-item { margin-top: 4px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts > .header-item { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-left: 32px; padding-bottom: 0; } .page-header .mobile-menu-item .sub-item-container .payment-accounts > .header-item > .sub-item-container { padding-top: 0; } .page-header .mobile-menu-item .sub-item-container .payment-accounts > .header-item > .sub-item-container > .header-item { height: 52px; margin-bottom: 2px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .header-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; right: 4px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .header-item:first-of-type { padding-bottom: 24px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .header-item:first-of-type i { margin-right: 16px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .header-item:not(:first-of-type) { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .header-item:not(:first-of-type) .label-link { padding-top: 0; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0; right: 2px; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .account-dropdown { display: none; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .sub-item-container { height: auto; } .page-header .mobile-menu-item .sub-item-container .payment-accounts .sub-item-container .icon-bank { display: block; } /* further nesting in mobile header should always be maximized */ .page-header .mobile-menu-item .sub-item-container .sub-item-container { position: relative; } .page-header .mobile-menu-item .sub-item-container .sub-item-container .sub-items { position: relative; } .page-header .mobile-menu-item .menu-toggle, .page-header .mobile-menu-item .menu-button::after, .page-header .mobile-menu-item .menu-button::before { height: 4px; width: 32px; background: white; border-radius: 8px; } .page-header .mobile-menu-item .menu-toggle-marketing, .page-header .mobile-menu-item .menu-button-marketing::after, .page-header .mobile-menu-item .menu-button-marketing::before { height: 4px; width: 32px; background: #005cb9; border-radius: 8px; } .page-header .mobile-menu-item .menu-button, .page-header .mobile-menu-item .menu-button-marketing { cursor: pointer; margin-right: 4px; margin-top: 4px; height: 36px; top: 8px; bottom: 8px; border: none; outline: none; } .page-header .mobile-menu-item .menu-button .menu-toggle, .page-header .mobile-menu-item .menu-button .menu-toggle-marketing, .page-header .mobile-menu-item .menu-button-marketing .menu-toggle, .page-header .mobile-menu-item .menu-button-marketing .menu-toggle-marketing { top: 16px; -webkit-transition: -webkit-transform 250ms ease 0ms; transition: -webkit-transform 250ms ease 0ms; -o-transition: transform 250ms ease 0ms; transition: transform 250ms ease 0ms; transition: transform 250ms ease 0ms, -webkit-transform 250ms ease 0ms; } .page-header .mobile-menu-item .menu-button::after, .page-header .mobile-menu-item .menu-button::before, .page-header .mobile-menu-item .menu-button-marketing::after, .page-header .mobile-menu-item .menu-button-marketing::before { content: ""; position: absolute; -webkit-transition: top 250ms ease 250ms, -webkit-transform 250ms ease 0ms; transition: top 250ms ease 250ms, -webkit-transform 250ms ease 0ms; -o-transition: top 250ms ease 250ms, transform 250ms ease 0ms; transition: top 250ms ease 250ms, transform 250ms ease 0ms; transition: top 250ms ease 250ms, transform 250ms ease 0ms, -webkit-transform 250ms ease 0ms; } .page-header .mobile-menu-item .menu-button::before, .page-header .mobile-menu-item .menu-button-marketing::before { top: 8px; } .page-header .mobile-menu-item .menu-button::after, .page-header .mobile-menu-item .menu-button-marketing::after { top: 24px; } .page-header .mobile-menu-item.menu-open .menu-button .menu-toggle, .page-header .mobile-menu-item.menu-open .menu-button-marketing .menu-toggle { -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); } .page-header .mobile-menu-item.menu-open .menu-button .menu-toggle-marketing, .page-header .mobile-menu-item.menu-open .menu-button-marketing .menu-toggle-marketing { -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); } .page-header .mobile-menu-item.menu-open .menu-button::before, .page-header .mobile-menu-item.menu-open .menu-button-marketing::before { top: 16px; -webkit-transform: rotateZ(45deg); -ms-transform: rotate(45deg); transform: rotateZ(45deg); } .page-header .mobile-menu-item.menu-open .menu-button::after, .page-header .mobile-menu-item.menu-open .menu-button-marketing::after { top: 16px; -webkit-transform: rotateZ(-45deg); -ms-transform: rotate(-45deg); transform: rotateZ(-45deg); } .page-header .mobile-menu-item.menu-open .menu-button .menu-toggle, .page-header .mobile-menu-item.menu-open .menu-button .menu-toggle-marketing, .page-header .mobile-menu-item.menu-open .menu-button::before, .page-header .mobile-menu-item.menu-open .menu-button::after, .page-header .mobile-menu-item.menu-open .menu-button-marketing .menu-toggle, .page-header .mobile-menu-item.menu-open .menu-button-marketing .menu-toggle-marketing, .page-header .mobile-menu-item.menu-open .menu-button-marketing::before, .page-header .mobile-menu-item.menu-open .menu-button-marketing::after { -webkit-transition: top 250ms ease 0ms, -webkit-transform 250ms ease 250ms; transition: top 250ms ease 0ms, -webkit-transform 250ms ease 250ms; -o-transition: top 250ms ease 0ms, transform 250ms ease 250ms; transition: top 250ms ease 0ms, transform 250ms ease 250ms; transition: top 250ms ease 0ms, transform 250ms ease 250ms, -webkit-transform 250ms ease 250ms; } @media (max-width: 40em) { .page-header .mobile-menu-item .mobile-buttons-section .btn-demo, .page-header .mobile-menu-item .spacer { display: none; } .page-header .mobile-menu-item .mobile-header-container .menu { margin-right: 24px; top: 4px; } .page-header .mobile-menu-item .mobile-header-container .menu::before { top: 6px; } .page-header .mobile-menu-item.menu-open .mobile-menu-container .mobile-header-container .menu::before { top: 16px; } .page-header .mobile-menu-item .site-logo-container { width: 240px; } } /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ a.btn-demo { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: rgb(29, 40, 48); background-color: #fff; border: 2px solid #005cb9; -webkit-box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; -o-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; } a.btn-demo:hover { color: #fff; background-color: #005cb9; border-color: #fff; } a.btn-demo { border-radius: 32px; font-size: 0.75rem; font-weight: 600; text-align: center; -webkit-box-shadow: none; box-shadow: none; font-size: 0.625rem; font-weight: 700; padding: 8px 16px; color: rgb(29, 40, 48); text-decoration: none; } a.btn-demo:hover { border-color: #005cb9; } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } .modal-dialog.load-spinner { background-color: rgba(255, 255, 255, 0); border: 0; } .modal-dialog.load-spinner .modal-content { background: rgba(255, 255, 255, 0); } .modal-dialog.load-spinner .modal-content .has-message { padding: 16px; background: white; border: 2px solid #005cb9; min-width: 70vw; } .modal-dialog.load-spinner .modal-content .has-message .message { margin-top: 32px; font-size: 1.2rem; text-align: center; color: #005cb9; } .modal-dialog.load-spinner .modal-content, .modal-dialog.load-spinner .modal-content .has-message, .modal-dialog.load-spinner .modal-content .no-message { min-height: 50vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal-overlay.load-spinner-overlay { background-color: rgba(255, 255, 255, 0.8); } .loader, .loader div { width: 10em; height: 10em; } .loader { display: inline-block; position: relative; margin: auto; } .loader div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; border: 8px solid #005cb9; border-radius: 50%; -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #005cb9 transparent transparent transparent; } .loader div:nth-child(1) { -webkit-animation-delay: -0.45s; animation-delay: -0.45s; } .loader div:nth-child(2) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .loader div:nth-child(3) { -webkit-animation-delay: -0.15s; animation-delay: -0.15s; } @keyframes lds-ring { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes lds-ring { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (max-width: 30em), (max-width: 46em) and (orientation: landscape) { .loader, .loader div { width: 6em; height: 6em; } .loader div { border-width: 8px; } } /** * TO BE DEPRECATED * Consider using *-common.css or common.css instead, or one of the categorical files below: */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .modal-enter { opacity: 0.01; } .modal-enter.modal-enter-active { opacity: 1; -webkit-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } .modal-exit { opacity: 1; } .modal-exit.modal-exit-active { opacity: 0.01; -webkit-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } .modal-appear { opacity: 0.01; } .modal-appear.modal-appear-active { opacity: 1; -webkit-transition: opacity 300ms ease-in; -o-transition: opacity 300ms ease-in; transition: opacity 300ms ease-in; } .modal-overlay { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 81; max-width: 100vw; /* goes above most everything else */ overflow-y: auto; } .modal-overlay .ReactCrop--crop-selection { display: none; } .modal-dialog { border-radius: 4px; position: relative; background: white; outline: none; margin: 32px auto 16px; padding: 0; max-width: 95vw; } @media (min-width: 45em) { .modal-dialog { width: 740px } } .modal-dialog.message-box { width: 300px; } .modal-header { font-size: 1.125rem; line-height: 1.5; font-weight: 400; font-family: 'Montserrat', Helvetica, sans-serif; border-radius: 4px 4px 0 0; font-weight: 500; border-bottom: 1px solid rgb(216, 217, 218); color: rgb(29, 40, 48); padding: 16px; background-color: white; } .modal-content { padding: 32px; overflow: auto; max-height: 100%; background: white; border-radius: 0 0 4px 4px; } .modal-radio-container { margin: 16px 0; line-height: 24px; } .modal-footer { border-radius: 0 0 4px 4px; background-color: rgba(0,92,185, 0.1); padding: 16px; } .modal-footer .modal-footer-close-button { display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 24px; cursor: pointer; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; text-align: center; display: block; margin-left: auto; } @media (max-width: 40em) { .modal-footer .modal-footer-close-button { height: 50px; margin: 8px 0; padding: 16px 16px 8px 16px; text-align: center; width: 100%; } } .modal-close-button { float: right; display: block; border: none; background: transparent; padding: 0; font-size: 1.25rem; line-height: 1.25; color: rgb(29, 40, 48); cursor: pointer; width: 32px; height: 32px; margin: 0; } @media (max-width: 50em) { .modal-content { padding: 16px; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .confirmation-modal.modal-dialog { margin-top: 32px; border-radius: 4px; padding: 0; } .confirmation-modal.modal-dialog .modal-header { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: white; height: initial; padding: 32px 16px 0 32px; border-bottom: 0; } .confirmation-modal.modal-dialog .modal-header .modal-close-button { color: #8a8c8f; -webkit-box-shadow: 0; box-shadow: 0; } .confirmation-modal.modal-dialog .modal-content { border-radius: 4px; background: white; padding: 0; overflow: visible; } .confirmation-modal.modal-dialog .modal-body { padding: 32px; } .confirmation-modal.modal-dialog .button-container { padding: 16px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; background-color: rgb(229, 242, 255); border-radius: 0 0 4px 4px; } .confirmation-modal.modal-dialog .button-container a, .confirmation-modal.modal-dialog .button-container button { margin-left: 16px; } @media (max-width: 40em) { .confirmation-modal.modal-dialog { margin: 8px; max-width: 100vw; } .confirmation-modal.modal-dialog .modal-header { padding: 24px; } .confirmation-modal.modal-dialog .modal-body { padding: 24px; } .confirmation-modal.modal-dialog .button-container { max-width: 100vw; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 24px; } .confirmation-modal.modal-dialog .button-container a, .confirmation-modal.modal-dialog .button-container button { margin: 8px; } } .confirmation-modal .message { margin-bottom: 16px; } .confirmation-modal .button-container .cancel-button { text-decoration: underline; cursor: pointer; padding: 0; margin: 8px 16px; background: transparent; border: none; color: rgb(29, 40, 48); -webkit-box-shadow: none; box-shadow: none; } .confirmation-modal .button-container .cancel-button:disabled { color: rgb(216, 217, 218); cursor: default; } .confirmation-modal .button-container .confirm-button { display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 24px; cursor: pointer; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; text-align: center; display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 24px; cursor: pointer; transition: all 0.2s ease-in; text-align: center; border: 2px solid #005cb9; color: white; background-color: #005cb9; } @media (max-width: 40em) { .confirmation-modal .button-container .confirm-button { height: 50px; margin: 8px 0; padding: 16px 16px 8px 16px; text-align: center; width: 100%; } } @media (max-width: 40em) { .confirmation-modal .button-container .confirm-button { height: 50px; margin: 8px 0; padding: 16px 16px 8px 16px; text-align: center; width: 100%; } } .confirmation-modal .button-container .confirm-button:hover { background-color: rgb(0, 76, 153); border-color: rgb(0, 76, 153); } .confirmation-modal .button-container .confirm-button:disabled { border-color: #8a8c8f; background-color: #8a8c8f; color: white; cursor: default; } @media (max-width: 40em) { .confirmation-modal.modal-dialog .modal-content .modal-header { padding: 16px 24px 8px; } .confirmation-modal.modal-dialog .modal-content .button-container { padding: 8px; } .confirmation-modal.modal-dialog .modal-content .button-container .cancel-button { margin-top: 4px; height: 35px; } } /** * TO BE DEPRECATED * Consider using *-common.css or common.css instead, or one of the categorical files below: */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .flash-page-wrapper { position: absolute; top: 0; left: 0; z-index: 120; } .flash-page-wrapper .flash-container { position: fixed; } .flash-message { overflow: hidden; padding: 8px; width: 100%; } .flash-message:before { content: ''; display: table; } .flash-message:after { content: ''; display: table; clear: both; } .flash-message.flash-enter { padding: 0 8px; max-height: 0; } .flash-message.flash-enter.flash-enter-active { padding: 8px; max-height: 100px; -webkit-transition: max-height 0.4s ease-in, padding 0.4s ease-in; -o-transition: max-height 0.4s ease-in, padding 0.4s ease-in; transition: max-height 0.4s ease-in, padding 0.4s ease-in; } .flash-message.flash-exit { padding: 8px; max-height: 100px; } .flash-message.flash-exit.flash-exit-active { padding: 0 8px; max-height: 0; -webkit-transition: max-height 0.4s ease-out, padding 0.4s ease-out; -o-transition: max-height 0.4s ease-out, padding 0.4s ease-out; transition: max-height 0.4s ease-out, padding 0.4s ease-out; } .flash-message .close-button { float: right; padding: 0; margin: 0; background-color: transparent; } .flash-message a { margin-left: 8px; text-decoration: underline; color: #005cb9; cursor: pointer; } .flash-message a:hover { color: blue; } .flash-container { width: 100%; } .flash-container .flash-message { font-size: 1.125rem; line-height: 1.5; font-weight: 400; font-family: 'Montserrat', Helvetica, sans-serif; font-weight: 600; text-align: center; } .flash-container .flash-message.success { color: white; background-color: #00843d; } .flash-container .flash-message.warning { color: white; background-color: #b36200; } .flash-container .flash-message.error { color: white; background-color: #c8102e; } .message-container .flash-message { margin-bottom: 16px; font-weight: 600; border: 1px solid rgb(177, 178, 180); } .message-container .flash-message.success { color: #00843d; border-color: #00843d; } .message-container .flash-message.warning { color: #e58c23; border-color: #e58c23; } .message-container .flash-message.error { color: #c8102e; border-color: #c8102e; } .message-container .flash-message .icon { padding-right: 4px; } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .site-footer { color: white; z-index: 40; background: url(/static/shared/assets/FooterDesktop.5fa5dec473a57b27269c.png) no-repeat; background-size: cover; } .site-footer .content-wrapper { max-width: 1180px; margin: auto; } .site-footer .site-footer-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 32px 32px 0; } .site-footer .site-footer-content .social-content { width: 296px; width: calc(99.9% * 1/3 - (16px - 16px * 1/3)); -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .site-footer .site-footer-content .social-content:nth-child(1n) { float: left; margin-right: 16px; clear: none; } .site-footer .site-footer-content .social-content:last-child { margin-right: 0; } .site-footer .site-footer-content .social-content:nth-child(0n) { float: right; } .site-footer .site-footer-content .social-content .logo { width: 100%; height: 56px; } .site-footer .site-footer-content .social-content .logo .footer-logo { width: 100%; height: 56px; background: url(/static/gradifui/assets/Gradifi-Logo-Horiz-White.cad80791a89446a7ef0f.svg) left center no-repeat; background-size: contain; } .site-footer .site-footer-content .social-content .linkedin-logo { right: 2px; width: 96px; height: 32px; background: url(/static/gradifui/assets/linkedin_logo.a6ef97bce84a5262f729.svg) center no-repeat; background-size: contain; } .site-footer .site-footer-content .link-content { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: calc(99.9% * 2/3 - (16px - 16px * 2/3)); -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 8px; } .site-footer .site-footer-content .link-content:nth-child(1n) { float: left; margin-right: 16px; clear: none; } .site-footer .site-footer-content .link-content:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content:nth-child(0n) { float: right; } .site-footer .site-footer-content .link-content .static-columns { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 3/5 - (16px - 16px * 3/5)); -ms-flex-preferred-size: calc(99.9% * 3/5 - (16px - 16px * 3/5)); flex-basis: calc(99.9% * 3/5 - (16px - 16px * 3/5)); max-width: calc(99.9% * 3/5 - (16px - 16px * 3/5)); width: calc(99.9% * 3/5 - (16px - 16px * 3/5)); -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .site-footer .site-footer-content .link-content .static-columns:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .static-columns:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .static-columns:nth-child(5n) { margin-right: 0; margin-left: auto; } /* No member support or demo column on employer-portal */ .site-footer .site-footer-content .link-content .employer-portal { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); -ms-flex-preferred-size: calc(99.9% * 1/1 - (16px - 16px * 1/1)); flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); max-width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); } .site-footer .site-footer-content .link-content .employer-portal:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .employer-portal:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .employer-portal:nth-child(1n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content .about-gradifi { white-space: nowrap; } .site-footer .site-footer-content .link-content .member-support-column, .site-footer .site-footer-content .link-content .demo-column { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 2/5 - (16px - 16px * 2/5)); -ms-flex-preferred-size: calc(99.9% * 2/5 - (16px - 16px * 2/5)); flex-basis: calc(99.9% * 2/5 - (16px - 16px * 2/5)); max-width: calc(99.9% * 2/5 - (16px - 16px * 2/5)); width: calc(99.9% * 2/5 - (16px - 16px * 2/5)); max-width: 240px; } .site-footer .site-footer-content .link-content .member-support-column:nth-child(1n), .site-footer .site-footer-content .link-content .demo-column:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .member-support-column:last-child, .site-footer .site-footer-content .link-content .demo-column:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .member-support-column:nth-child(5n), .site-footer .site-footer-content .link-content .demo-column:nth-child(5n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content ul { list-style: none; padding: 0; margin: 0; } .site-footer .site-footer-content .link-content ul li { padding-bottom: 24px; font-size: 0.75rem; } .site-footer .site-footer-content .link-content ul li a { color: white; text-decoration: none; } .site-footer .site-footer-content .link-content ul li a:hover { color: #00a0d4; } .site-footer .site-footer-content .link-content ul .member-support-email { word-break: break-word; } .site-footer .site-footer-content .demo-login-content ul li { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .site-footer .site-footer-content .demo-login-content ul li a { text-decoration: none; } .site-footer .site-footer-content .demo-login-content ul li a.btn-demo { font-size: 0.625rem; font-weight: 700; text-decoration: none; margin-top: 0; color: black; } .site-footer .privacy-terms-row, .site-footer .cpra-button { border-bottom: 1px solid #5a666e; font-size: 0.75rem; padding: 8px 0; } .site-footer .cpra-button { width: auto; } .site-footer .privacy-terms-row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-footer .privacy-terms-row li { display: inline-block; margin-right: 24px; } .site-footer .privacy-terms-row a { text-decoration: none; } .site-footer .privacy-terms-row .privacy-logged-in { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-top: 8px; width: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section, .site-footer .privacy-terms-row .privacy-logged-in .terms-section { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 16px; } .site-footer .privacy-terms-row .privacy-logged-in a, .site-footer .privacy-terms-row .privacy-logged-in #cpra-button { margin-right: 24px; } .site-footer .disclosure-row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; font-size: 0.625rem; } .site-footer .disclosure-row .disclosure-items { width: calc(99.9% * 1/2); padding: 16px; } .site-footer .disclosure-row .disclosure-items:nth-child(1n) { float: left; margin-right: 0; clear: none; } .site-footer .disclosure-row .disclosure-items:last-child { margin-right: 0; } .site-footer .disclosure-row .disclosure-items:nth-child(0n) { float: right; } @media (max-width: 60em) { .site-footer .site-footer-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .site-footer-content .social-content { margin: 0 auto 32px !important; width: calc(99.9% * 1/2 - (16px - 16px * 1/2)); } .site-footer .site-footer-content .social-content:nth-child(1n) { float: left; margin-right: 16px; clear: none; } .site-footer .site-footer-content .social-content:last-child { margin-right: 0; } .site-footer .site-footer-content .social-content:nth-child(0n) { float: right; } .site-footer .site-footer-content .link-content { margin: 0 auto !important; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } .site-footer .site-footer-content .link-content .static-columns { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 2/3 - (16px - 16px * 2/3)); -ms-flex-preferred-size: calc(99.9% * 2/3 - (16px - 16px * 2/3)); flex-basis: calc(99.9% * 2/3 - (16px - 16px * 2/3)); max-width: calc(99.9% * 2/3 - (16px - 16px * 2/3)); width: calc(99.9% * 2/3 - (16px - 16px * 2/3)); } .site-footer .site-footer-content .link-content .static-columns:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .static-columns:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .static-columns:nth-child(3n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content .member-support-column, .site-footer .site-footer-content .link-content .demo-column { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1/3 - (16px - 16px * 1/3)); -ms-flex-preferred-size: calc(99.9% * 1/3 - (16px - 16px * 1/3)); flex-basis: calc(99.9% * 1/3 - (16px - 16px * 1/3)); max-width: calc(99.9% * 1/3 - (16px - 16px * 1/3)); width: calc(99.9% * 1/3 - (16px - 16px * 1/3)); } .site-footer .site-footer-content .link-content .member-support-column:nth-child(1n), .site-footer .site-footer-content .link-content .demo-column:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .member-support-column:last-child, .site-footer .site-footer-content .link-content .demo-column:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .member-support-column:nth-child(3n), .site-footer .site-footer-content .link-content .demo-column:nth-child(3n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content .member-support-column .member-support-phone, .site-footer .site-footer-content .link-content .member-support-column .member-support-email, .site-footer .site-footer-content .link-content .demo-column .member-support-phone, .site-footer .site-footer-content .link-content .demo-column .member-support-email { white-space: nowrap; } } @media (max-width: 50em) { .site-footer { background: url(/static/shared/assets/FooterTablet.496cfa13de421ec361b6.png) no-repeat cover; } .site-footer .privacy-terms-row ul { padding-left: 16px; text-align: center; } .site-footer .privacy-terms-row .privacy-logged-in { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section, .site-footer .privacy-terms-row .privacy-logged-in .terms-section { -webkit-box-pack: left; -webkit-justify-content: left; -moz-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-left: 25%; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section *, .site-footer .privacy-terms-row .privacy-logged-in .terms-section * { width: 180px; margin-right: 0; text-align: left; } } @media (max-width: 40em) { .site-footer { background: url(/static/shared/assets/FooterMobile.88cf36add9bb1c5dba68.png) no-repeat; } .site-footer .site-footer-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-bottom: 16px; padding: 16px 16px 0; } .site-footer .site-footer-content .social-content { width: 300px; } .site-footer .site-footer-content .link-content { max-width: 336px; width: 336px; min-height: 200px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .site-footer-content .link-content .static-columns { margin-left: 16px; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); -ms-flex-preferred-size: calc(99.9% * 1/1 - (16px - 16px * 1/1)); flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); max-width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .site-footer .site-footer-content .link-content .static-columns:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .static-columns:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .static-columns:nth-child(1n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content .member-support-column, .site-footer .site-footer-content .link-content .demo-column { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); -ms-flex-preferred-size: calc(99.9% * 1/1 - (16px - 16px * 1/1)); flex-basis: calc(99.9% * 1/1 - (16px - 16px * 1/1)); max-width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); width: calc(99.9% * 1/1 - (16px - 16px * 1/1)); margin: 16px auto 0; } .site-footer .site-footer-content .link-content .member-support-column:nth-child(1n), .site-footer .site-footer-content .link-content .demo-column:nth-child(1n) { margin-right: 16px; margin-left: 0; } .site-footer .site-footer-content .link-content .member-support-column:last-child, .site-footer .site-footer-content .link-content .demo-column:last-child { margin-right: 0; } .site-footer .site-footer-content .link-content .member-support-column:nth-child(1n), .site-footer .site-footer-content .link-content .demo-column:nth-child(1n) { margin-right: 0; margin-left: auto; } .site-footer .site-footer-content .link-content .member-support-column .member-support-phone, .site-footer .site-footer-content .link-content .demo-column .member-support-phone { white-space: nowrap; } .site-footer .site-footer-content .link-content .member-support-column .member-support-email, .site-footer .site-footer-content .link-content .demo-column .member-support-email { word-break: normal; } .site-footer .site-footer-content .demo-login-content { min-height: 110px; } .site-footer *::-ms-backdrop, .site-footer .site-footer-content { margin: auto; } .site-footer .disclosure-row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .disclosure-row .disclosure-items { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1); -ms-flex-preferred-size: calc(99.9% * 1); flex-basis: calc(99.9% * 1); max-width: calc(99.9% * 1); width: calc(99.9% * 1); padding-bottom: 0; } .site-footer .disclosure-row .disclosure-items:nth-child(1n) { margin-right: 0; margin-left: 0; } .site-footer .disclosure-row .disclosure-items:last-child { margin-right: 0; } .site-footer *::-ms-backdrop, .site-footer .disclosure-row { display: block; } .site-footer *::-ms-backdrop, .site-footer .disclosure-row .disclosure-items:last-of-type { padding-bottom: 32px; } .site-footer *::-ms-backdrop, .site-footer .site-footer-content .demo-login-content.demo-login-content { margin: auto; } .site-footer .privacy-terms-row ul { margin-bottom: 0; } .site-footer .privacy-terms-row ul li { margin-bottom: 8px; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section, .site-footer .privacy-terms-row .privacy-logged-in .terms-section { margin-left: 15%; } } @media (max-width: 30em) { .site-footer .privacy-terms-row .privacy-logged-in .privacy-section, .site-footer .privacy-terms-row .privacy-logged-in .terms-section { margin-left: 5%; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section *, .site-footer .privacy-terms-row .privacy-logged-in .terms-section * { width: 176px; } } @media (max-width: 23em) { .site-footer .site-footer-content .social-content { height: 48px; margin: 0 auto 32px; } .site-footer .site-footer-content .social-content, .site-footer .site-footer-content .link-content { width: 288px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .site-footer .site-footer-content .social-content .static-columns, .site-footer .site-footer-content .link-content .static-columns { padding-top: 16px; } .site-footer .site-footer-content { padding: 8px; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section, .site-footer .privacy-terms-row .privacy-logged-in .terms-section { margin-left: 4%; } .site-footer .privacy-terms-row .privacy-logged-in .privacy-section *, .site-footer .privacy-terms-row .privacy-logged-in .terms-section * { width: 156px; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ #cpra-button { background: none; -webkit-transition: none; -o-transition: none; transition: none; border: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; margin: 0; height: auto; } #cpra-button .privacy-options-icon { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; top: 2px; } /** * TO BE DEPRECATED * Consider using *-common.css or common.css instead, or one of the categorical files below: */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .session-expiring-modal .session-expiration-info p { margin-top: 16px; } .session-expiring-modal .session-expiration-modal-buttons { border-top: 1px solid darkgray; margin-top: 16px; text-align: center; } .session-expiring-modal .session-expiration-modal-buttons button { margin-top: 16px; } .session-expiring-modal .session-expiration-modal-buttons .session-logout { margin-left: 65px; } .session-expiring-modal .session-expiration-modal-buttons .session-extend { display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 24px; cursor: pointer; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; text-align: center; display: inline-block; text-decoration: none; padding: 8px 16px; border-radius: 24px; cursor: pointer; transition: all 0.2s ease-in; text-align: center; border: 2px solid #005cb9; color: white; background-color: #005cb9; } @media (max-width: 40em) { .session-expiring-modal .session-expiration-modal-buttons .session-extend { height: 50px; margin: 8px 0; padding: 16px 16px 8px 16px; text-align: center; width: 100%; } } @media (max-width: 40em) { .session-expiring-modal .session-expiration-modal-buttons .session-extend { height: 50px; margin: 8px 0; padding: 16px 16px 8px 16px; text-align: center; width: 100%; } } .session-expiring-modal .session-expiration-modal-buttons .session-extend:hover { background-color: rgb(0, 76, 153); border-color: rgb(0, 76, 153); } .session-expiring-modal .session-expiration-modal-buttons .session-extend:disabled { border-color: #8a8c8f; background-color: #8a8c8f; color: white; cursor: default; } @media (max-width: 30em) { .session-expiring-modal .session-expiration-modal-buttons .session-logout { margin-left: 0; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } .mouseflow-id { font-size: 1.4rem; line-height: 1.2; font-weight: 600; font-family: 'Montserrat', Helvetica, sans-serif; text-align: center; color: white; background-color: rgb(29, 40, 48); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 200; } @media (max-width: 50em) { .mouseflow-id { font-size: 1.7rem; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .legal { background-color: rgb(29, 40, 48); } .legal .footnotes { font-size: 0.725rem; line-height: 1.5; font-weight: 400; font-family: 'Montserrat', Helvetica, sans-serif; max-width: 990px; margin: 0 auto; padding: 32px 8px; color: white; } .legal .footnotes .footnote { padding-bottom: 8px; } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } .marketing-subfooter { margin-top: 32px; } .marketing-subfooter .background-chevron { position: absolute; width: 100%; right: 0; left: 0; bottom: 43%; z-index: -2; } .marketing-subfooter .marketing-carousel { top: 64px; z-index: 20; } .marketing-subfooter .marketing-subfooter-body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; background-color: #005cb9; background-image: url(/static/marketing/assets/redesign2020/subfooter/background.00776277d2bf0bdd6edb.svg); background-size: cover; background-repeat: no-repeat; } .marketing-subfooter .marketing-subfooter-body .chevron { margin: 152px auto 0; } .marketing-subfooter .marketing-subfooter-body .subfooter-header { font-family: ETrade-Bold; line-height: 100%; color: rgb(29, 40, 48); font-size: 3rem; line-height: 120%; max-width: 660px; text-align: center; margin: 48px auto; color: #fff; } .marketing-subfooter .marketing-subfooter-body .button { color: rgb(29, 40, 48); background-color: #fff; border: 2px solid #005cb9; -webkit-box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; -o-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; } .marketing-subfooter .marketing-subfooter-body .button:hover { color: #fff; background-color: #005cb9; border-color: #fff; } .marketing-subfooter .marketing-subfooter-body .button { border-radius: 32px; font-size: 0.75rem; font-weight: 600; text-align: center; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 128px; height: 48px; width: 188px; font-family: Etrade-Bold; text-transform: uppercase; letter-spacing: 1.2px; } .marketing-subfooter .legalTextWrapper { background-color: #2b3748; color: #fff; } .marketing-subfooter .legalTextWrapper .legalText { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 1180px; margin: 0 auto; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList { font-family: ETrade-Regular; line-height: 150%; color: rgb(29, 40, 48); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 0.75rem; color: #fff; -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-basis: calc(99.9% * 1/2); -ms-flex-preferred-size: calc(99.9% * 1/2); flex-basis: calc(99.9% * 1/2); max-width: calc(99.9% * 1/2); width: calc(99.9% * 1/2); padding: 16px 32px; margin: 0; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList:nth-child(1n) { margin-right: 0; margin-left: 0; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList:last-child { margin-right: 0; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList .content-item { word-break: break-word; word-wrap: break-word; margin: 8px auto; } @media (max-width: 50em) { .marketing-subfooter .background-chevron { height: 200%; bottom: 0; } .marketing-subfooter .marketing-subfooter-body .chevron { margin-top: 152px; } } @media (max-width: 40em) { .marketing-subfooter .background-chevron { display: none; } .marketing-subfooter .marketing-carousel { top: 0; } .marketing-subfooter .marketing-subfooter-body .chevron { margin-top: 56px; } .marketing-subfooter .marketing-subfooter-body .subfooter-header { font-size: 2rem; padding: 0 16px; margin: 24px 0; width: 100%; } .marketing-subfooter .marketing-subfooter-body .button { padding: 0; margin-bottom: 80px; } .marketing-subfooter .legalTextWrapper .legalText { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -moz-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList:first-of-type { padding-bottom: 0; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList:first-of-type .content-item:last-of-type { margin-bottom: 0; } .marketing-subfooter .legalTextWrapper .legalText .legalTextList { max-width: 100%; width: 100%; } .marketing-subfooter .legalTextWrapper .legalText *::-ms-backdrop, .marketing-subfooter .legalTextWrapper .legalText .legalTextList { display: block; } .marketing-subfooter *::-ms-backdrop, .marketing-subfooter .legalText { padding-bottom: 32px; } } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } .marketing-carousel { max-width: 1180px; margin: 0 auto; padding: 0 16px; } .marketing-carousel .carousel-indicator-section { position: absolute; left: 40px; bottom: 40px; z-index: 20; } .marketing-carousel .carousel-indicator-arrows { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; top: 0%; width: 100%; height: 100%; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; z-index: 20; pointer-events: none; } .marketing-carousel .carousel-indicator-arrows .next-child, .marketing-carousel .carousel-indicator-arrows .prev-child { height: 100%; padding: 0; font-size: 5.5rem; pointer-events: all; } .marketing-carousel .carousel-indicator-arrows .next-child { padding-right: 8px; } .marketing-carousel .carousel-indicator-arrows .prev-child { padding-left: 8px; } .marketing-carousel .marketing-carousel-image-wrapper::before { content: ""; position: absolute; background: #484071; height: 100%; width: 100%; border-radius: 8px; } .marketing-carousel .marketing-carousel-header { font-family: ETrade-Bold; line-height: 150%; color: rgb(29, 40, 48); font-size: 1.25rem; text-align: center; margin-bottom: 24px; } .marketing-carousel .marketing-carousel-image { display: block; width: 100%; border-radius: 8px; outline: none; -webkit-box-shadow: 0 2px 100px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 100px 0 rgba(0, 0, 0, 0.5); } .marketing-carousel .marketing-carousel-logo { width: 32px; height: 32px; margin: 2px 8px 2px 0; } .marketing-carousel .marketing-carousel-body-wrapper { position: absolute; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; top: 0; height: 100%; } .marketing-carousel .marketing-carousel-body { margin: 18% 0 0; padding-left: 40px; padding-bottom: 32px; z-index: 2; } .marketing-carousel .marketing-carousel-body .button { color: rgb(29, 40, 48); background-color: #fff; border: 2px solid #005cb9; -webkit-box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; -o-transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in, border-color 0.2s ease-in; } .marketing-carousel .marketing-carousel-body .button:hover { color: #fff; background-color: #005cb9; border-color: #fff; } .marketing-carousel .marketing-carousel-body .button { border-radius: 32px; font-size: 0.75rem; font-weight: 600; text-align: center; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 48px; width: 160px; margin-top: 24px; border-color: #fff; color: #005cb9; font-size: 0.75rem; font-family: ETrade-Semibold; letter-spacing: 1px; cursor: pointer; } .marketing-carousel .marketing-carousel-bodytext { font-family: ETrade-Semibold; line-height: 120%; color: rgb(29, 40, 48); font-size: 2.5rem; margin-top: 24px; width: 70%; } .marketing-carousel .marketing-carousel-bodytext .header-line-1 { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 80%; } .marketing-carousel .marketing-carousel-bodytext .marketing-carousel-highlight { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; display: block; margin: 16px 0; width: 65%; font-size: 4.5rem; } .marketing-carousel .marketing-carousel-bodytext .marketing-carousel-highlight::after { content: ""; display: block; position: absolute; background: rgba(255, 255, 255, 0.15); bottom: 0; width: 67%; height: 50%; } .marketing-carousel .marketing-carousel-bodytext .dollar-sign { bottom: 12px; margin-right: 4px; margin-left: 8px; font-size: 2rem; } .marketing-carousel .marketing-carousel-overlay { background: url(/static/marketing/assets/redesign2020/marketing-carousel/fallback-overlay.4c3a72b2cbc6d516aa7f.png); border-radius: 8px 0 0 8px; position: absolute; height: 100%; width: 100%; background-size: contain; background-repeat: no-repeat; mix-blend-mode: multiply; z-index: 1; } .marketing-carousel .marketing-carousel-logo-button { font-family: ETrade-Bold; line-height: 150%; color: rgb(29, 40, 48); font-size: 1.25rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: rgba(255, 255, 255, 0.15); border-radius: 30px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 16px; position: absolute; z-index: 2; left: 40px; top: 13%; } .marketing-carousel .marketing-carousel-logo-button, .marketing-carousel .marketing-carousel-bodytext { color: #fff; } @media (max-width: 71.875em) { .marketing-carousel .marketing-carousel-body { margin-top: 16%; } .marketing-carousel .marketing-carousel-bodytext { font-size: 3vw; margin-top: 40px; } .marketing-carousel .marketing-carousel-bodytext .marketing-carousel-highlight { font-size: 4rem; } .marketing-carousel .marketing-carousel-logo-button { font-size: 1rem; } .marketing-carousel .marketing-carousel-logo { height: 26px; width: 26px; } } @supports (mix-blend-mode: multiply) { .marketing-carousel .marketing-carousel-overlay { background: url(/static/marketing/assets/redesign2020/marketing-carousel/overlay.65ab13a6fb2bf4c15485.png); background-size: contain; background-repeat: no-repeat; } } @media (max-width: 50em) { .marketing-carousel { top: 0; } .marketing-carousel .carousel-indicator-section { bottom: 20px; } .marketing-carousel .marketing-carousel-body { padding-top: 24px; padding-bottom: 40px; padding-left: 48px; margin-top: 8px; width: 85%; } .marketing-carousel .marketing-carousel-body .marketing-carousel-highlight { font-size: 3.5rem; } .marketing-carousel .marketing-carousel-body .marketing-carousel-bodytext { font-size: 1.25rem; } .marketing-carousel .marketing-carousel-body .marketing-carousel-bodytext .header-line-1 { width: 100%; } .marketing-carousel .marketing-carousel-body .button { margin: 24px auto 16px; padding: 0; max-width: 148px; height: 40px; } .marketing-carousel .marketing-carousel-logo-button { top: 8%; } .marketing-carousel *::-ms-backdrop, .marketing-carousel .marketing-carousel-bodytext { margin-top: 45px; } } @media (max-width: 40em) { .marketing-carousel { padding: 0; } .marketing-carousel .carousel-indicator-arrows { display: none; } .marketing-carousel .marketing-carousel-header { font-size: 1.25rem; margin-bottom: 16px; } .marketing-carousel .marketing-carousel-overlay { width: calc(100% - 32px); } .marketing-carousel .marketing-carousel-image-wrapper { padding: 0 16px; } .marketing-carousel .marketing-carousel-image-wrapper::before { width: calc(100% - 32px); } .marketing-carousel .marketing-carousel-image-wrapper::after { content: ""; position: absolute; width: 100%; height: 40px; z-index: -1; bottom: 0; left: 0; } .marketing-carousel .marketing-carousel-body-wrapper { position: static; background: #005cb9; } .marketing-carousel .marketing-carousel-bodytext { width: 100%; } .marketing-carousel .marketing-carousel-body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; margin: auto auto 16px; } .marketing-carousel .marketing-carousel-body .button { color: rgb(29, 40, 48); } .marketing-carousel .carousel-indicator-section { position: static; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; left: 0; bottom: 0; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 16px; } .marketing-carousel .carousel-indicator-section .carousel-indicators { height: 20px; width: 20px; margin-right: 0; } .marketing-carousel .carousel-indicator-section .carousel-indicators:not(:first-of-type):not(:last-of-type) { margin: 0 16px; } .marketing-carousel .marketing-carousel-logo-button { top: initial; left: 32px; bottom: 24px; } .marketing-carousel *::-ms-backdrop, .marketing-carousel .marketing-carousel-logo-button { top: 75%; max-height: 48px; } .marketing-carousel *::-ms-backdrop, .marketing-carousel .marketing-carousel-bodytext { margin-top: 16px; } .marketing-carousel .marketing-carousel-image-wrapper::after, .marketing-carousel .marketing-carousel-body-wrapper, .marketing-carousel .carousel-indicator-section { background: #1d87f2; } } @media (max-width: 30em) { .marketing-carousel .marketing-carousel-header { font-size: 0.75rem; } .marketing-carousel .marketing-carousel-logo { height: 23px; width: 23px; } .marketing-carousel .marketing-carousel-logo-button { font-size: 0.75rem; left: 24px; bottom: 16px; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .carousel .carousel-child.selected .animate { -webkit-animation: fadeIn 400ms ease-in forwards; animation: fadeIn 400ms ease-in forwards; } .carousel .carousel-child.previous .animate { -webkit-animation: fadeOut 400ms ease-in forwards; animation: fadeOut 400ms ease-in forwards; } .carousel .carousel-child:not(.selected) { opacity: 0; display: none; } .carousel .carousel-child:active, .carousel .carousel-child:focus, .carousel .carousel-child:hover { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: transparent; -moz-outline-style: none; outline: none; -webkit-box-shadow: none; box-shadow: none; -webkit-tap-highlight-color: transparent; } .carousel .carousel-indicator-arrows .next-child, .carousel .carousel-indicator-arrows .prev-child { background: transparent; } .carousel .carousel-indicator-arrows .next-child:active, .carousel .carousel-indicator-arrows .next-child:focus, .carousel .carousel-indicator-arrows .next-child:hover, .carousel .carousel-indicator-arrows .prev-child:active, .carousel .carousel-indicator-arrows .prev-child:focus, .carousel .carousel-indicator-arrows .prev-child:hover { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: transparent; -moz-outline-style: none; outline: none; -webkit-box-shadow: none; box-shadow: none; -webkit-tap-highlight-color: transparent; } .carousel .carousel-indicators { padding: 0; height: 16px; width: 16px; background: #fff; opacity: 0.2; margin-right: 8px; -webkit-transition: opacity 400ms ease-in; -o-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; outline: none; cursor: pointer; } .carousel .carousel-indicators.selected { opacity: 1; } /* this section is deprecated - prefer to use device-specific names if possible */ /* device based size names */ /* iPhone 5 width: 20em */ /* iPhone 6 width: */ /* iPhone 5 height: 35.5em */ /* iPhone 6 plus height: 46em */ /* iPad width: 48em */ /* iPad height: 64em */ .desktop { display: block; } .mobile { display: none; } @media (max-width: 30em) { .desktop { display: none; } .mobile { display: block; } } /** * CSS for colors */ /* stylelint-disable color-no-hex */ :root { /* TIER ONE - DESCRIPTIVE NAMES */ /* Default / Text color + Light background / Background color + Light text */ /* dark orange */ /* brand blue */ /* red */ /* purple */ /* dark green */ /* gray */ /* white */ /* yellow */ /* Highlight / Text color + Dark background / Background color + Dark text */ /* orange */ /* light red #f0425f */ /* light purple #ce51e1 */ /* bright green */ /* bright blue - brand color */ /* light yellow */ /* Alerts */ /* Additional blues */ /* dark blue #003366 */ /* medium blue #0066cc */ /* light blue #c7e3ff */ /* light blue #e5f2ff */ /* Additional reds */ /* light red #fbd0d7 */ /* dark red #8E0B21 */ /* Additional greens */ /* dark green */ /* light green #e5fff1 */ /* Additional purples */ /* extra light purple #f3d3f8 */ /* very light purple #f3d3f840 */ /* Additional oranges */ /* light orange #ffe8cc */ /* Grayscale Colors */ /* Near black */ /* Dark gray #1d2830 */ /* Formerly graphite */ /* medium gray */ /* #b1b2b4 */ /* #d8d9da */ /* Near white #f2f2f3 */ /* TIER TWO - SEMANTIC NAMES */ /* Product Colors */ /* Component Colors */ /* Partner/Refi Lender Colors */ /* First Republic palette */ /* forest green */ /* gold hacienda */ /* tan gray concrete */ /* dark gray matterhorn */ /* Visualization palette */ /* Marketing Page Colors */ /* #1d2830; */ /* #005cb9; *//* #0f1519; */ /* #1d2830; */ /* #5a666e; *//* #8a8c8f; */ /* #b1b2b4; */ /* #d7d8d9; *//* #f2f2f3; */ /* #e5f2ff; */ /* #eddef0; */ } /** * CSS for text, titles, labels. word. */ /* Marketing Text Mixins */ /** * CSS for laying out and displaying blocks and boxes */ :root { /* Consistent paddings */ /* shadows */ /* All z-index values should be listed here */ /* widths */ } /* basic setup for triangles in :before and :after pseudo-elements */ /* clears ul/ol defaults */ /* TODO Deprecated */ /* best pronounced with a texan drawl */ /* is this annoying yet? */ /* Marketing Button Mixins */ .employee-signup-body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; max-width: 550px; } .employee-signup-body .signup-header { font-family: ETrade-Semibold; line-height: 120%; color: rgb(29, 40, 48); font-size: 2rem; height: 88px; max-width: 450px; margin-bottom: 16px; position: relative; text-align: center; } .employee-signup-body .signup-header::after { content: " "; position: absolute; left: calc(50% - 27px); bottom: 0; border-bottom: 4px solid #005cb9; height: 8px; width: 54px; } .employee-signup-body *::-ms-backdrop, .employee-signup-body .signup-header { width: 100%; } .employee-signup-body .signup-subheader { font-family: ETrade-Regular; line-height: 150%; color: rgb(29, 40, 48); font-size: 1.5rem; margin: 0 auto 32px; text-align: center; } .employee-signup-body *::-ms-backdrop, .employee-signup-body .signup-subheader { width: 80%; } .employee-signup-body .btn-signup { color: #fff; background-color: #005cb9; -webkit-box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); box-shadow: 0 21px 30px 0 rgba(0, 0, 0, 0.27); -webkit-transition: color 0.2s ease-in, background-color 0.2s ease-in; -o-transition: color 0.2s ease-in, background-color 0.2s ease-in; transition: color 0.2s ease-in, background-color 0.2s ease-in; } .employee-signup-body .btn-signup:hover { color: rgb(29, 40, 48); background-color: #fff; } .employee-signup-body .btn-signup { border-radius: 32px; font-size: 0.75rem; font-weight: 600; text-align: center; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; height: 56px; width: 180px; letter-spacing: 1.1px; text-decoration: none; margin: 0 auto 40px; } @media (max-width: 50em) { .employee-signup-body .signup-header { font-family: ETrade-Semibold; line-height: 120%; color: rgb(29, 40, 48); font-size: 1.25rem; line-height: 150%; height: 72px; } .employee-signup-body .signup-header::after { width: 32px; left: calc(53% - 27px); } .employee-signup-body .btn-signup { height: 48px; padding: 16px; } .employee-signup-body .signup-subheader { font-family: ETrade-Regular; line-height: 150%; color: rgb(29, 40, 48); font-size: 0.75rem; margin: 16px 0; } } @media (max-width: 40em) { .employee-signup-body .signup-header { max-width: 350px; } .employee-signup-body .signup-subheader { max-width: 380px; } } /*# sourceMappingURL=marketing-views-contact.8529a43be4c350d1c24e.css.map*/