/* ========================================================================== Main page styles ========================================================================== */ .hipster { display: inline-block; width: 347px; height: 497px; background: url('../../content/images/jhipster_family_member_0.svg') no-repeat center top; background-size: contain; } .bg-img-cover { background-position: center; background-size: cover; background-repeat: no-repeat; } .overlay { position: relative; } .overlay:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; } .overlay-10:before { opacity: 0.1; } .overlay-20:before { opacity: 0.2; } .overlay-30:before { opacity: 0.3; } .overlay-40:before { opacity: 0.4; } .overlay-50:before { opacity: 0.5; } .overlay-60:before { opacity: 0.6; } .overlay-70:before { opacity: 0.7; } .overlay-80:before { opacity: 0.8; } .overlay-90:before { opacity: 0.9; } .fixed-top, .page-header-ui.navbar-fixed .navbar { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .text-white-75, .page-header-ui-dark .page-header-ui-text a { color: rgba(255, 255, 255, 0.75) !important; } .page-header-ui { position: relative; padding-top: 8rem; padding-bottom: 8rem; } .page-header-ui .page-header-ui-content .page-header-ui-title { font-size: 2.5rem; } .page-header-ui .page-header-ui-content .page-header-ui-text { font-size: 1.15rem; } .page-header-ui .page-header-ui-content .page-header-ui-text.small { font-size: 0.9rem; } .page-header-ui-dark { color: #fff; background-color: #212832; } .svg-border-rounded svg { position: absolute; bottom: 0; left: 0; height: 1rem; width: 100%; } @media (min-width: 576px) { .svg-border-rounded svg { height: 1.5rem; } } @media (min-width: 768px) { .svg-border-rounded svg { height: 2rem; } } @media (min-width: 992px) { .svg-border-rounded svg { height: 2.5rem; } } @media (min-width: 1200px) { .svg-border-rounded svg { height: 3rem; } } /** Cards **/ .lift { box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .lift:hover { transform: translateY(-0.3333333333rem); box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25); } .lift:active { transform: none; box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15); } .lift-sm { box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); } .lift-sm:hover { transform: translateY(-0.1666666667rem); box-shadow: 0 0.25rem 1rem 0 rgba(33, 40, 50, 0.25); } .lift-sm:active { transform: none; box-shadow: 0 0.125rem 0.25rem 0 rgba(33, 40, 50, 0.2); } .card.lift { text-decoration: none; color: inherit; } .card-flag { position: absolute; font-size: 0.7rem; padding: 0.3rem 0.5rem; line-height: 1; } .card-flag-dark { background-color: rgba(33, 40, 50, 0.7); color: #fff; } .card-flag-light { background-color: rgba(255, 255, 255, 0.7); color: #69707a; } .card-flag-lg { font-size: 0.9rem; padding: 0.5rem 0.65rem; } .card-flag-top-right { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; top: 0.5rem; right: 0; } .card-flag-top-left { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; top: 0.5rem; left: 0; } .border-cyan { border-color: #00cfd5 !important; } .py-10 { padding-top: 6rem !important; padding-bottom: 6rem !important; } /* wait autoprefixer update to allow simple generation of high pixel density media query */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .hipster { background: url('../../content/images/jhipster_family_member_0.svg') no-repeat center top; background-size: contain; } } .icon-stack { display: inline-flex; justify-content: center; align-items: center; border-radius: 100%; height: 2.5rem; width: 2.5rem; font-size: 1rem; background-color: #f2f6fc; flex-shrink: 0; } .icon-stack svg { height: 1rem; width: 1rem; } .icon-stack-sm { height: 2rem; width: 2rem; } .icon-stack-lg { height: 4rem; width: 4rem; font-size: 1.5rem; } .icon-stack-lg svg { height: 1.5rem; width: 1.5rem; } .icon-stack-xl { height: 5rem; width: 5rem; font-size: 1.75rem; } .icon-stack-xl svg { height: 1.75rem; width: 1.75rem; } .bg-gradient-primary-to-secondary { background-color: #1c44b2 !important; background-image: linear-gradient(135deg, #1c44b2 0%, #00b88d 100%) !important; }