123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- .hero {
- background-size: cover;
- box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
- color: #fff;
- height: 200px;
- position: relative;
- text-align: center;
- -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- width: 100%;
- }
- .hero > * {
- -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
- transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
- opacity: 1;
- filter: alpha(opacity=100);
- }
- .hero + .mid-bar {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- height: initial;
- opacity: 1;
- filter: alpha(opacity=100);
- }
- .hero .hero-icon {
- box-shadow: 0px 0 2px 0 rgba(0, 0, 0, 0.26);
- border-radius: 50%;
- display: inline-block;
- font-size: 65px;
- height: 150px;
- padding: 10px 30px;
- line-height: 136px;
- width: 150px;
- }
- .hero.no-header {
- height: 244px;
- }
- .hero > .content {
- bottom: 0;
- position: absolute;
- text-align: center;
- width: 100%;
- z-index: 1;
- }
- .hero > .content > .avatar {
- background-position: center;
- background-size: cover;
- border: solid 1px rgba(255, 255, 255, 0.8);
- border-radius: 50%;
- display: inline-block;
- height: 88px;
- left: auto;
- margin-bottom: 10px;
- position: relative;
- width: 88px;
- }
- .hero h1 .hero h2, .hero h3, .hero h4, .hero h5, .hero h6 {
- color: #fff;
- margin: 0;
- }
- .hero h4 {
- color: rgba(255, 255, 255, 0.7);
- margin: 3px 0 16px;
- }
- .hero h1 > a, .hero h2 > a, .hero h3 > a, .hero h4 > a, .hero h5 > a, .hero h6 > a {
- text-decoration: none;
- }
- .hero + .button-bar {
- border-radius: 0;
- margin-top: 0;
- }
- .hero + .button-bar > .button:first-child, .hero + .button-bar > .button:last-child {
- border-radius: 0;
- }
- .hero .hero-icon {
- color: #fff;
- font-size: 96px;
- }
- .hero .hero-icon + h1 {
- color: rgb(255, 255, 255);
- letter-spacing: 0.15rem;
- }
- .hero .button, .hero .button.button-large, .hero .button.button-flat {
- margin: 0;
- }
- .hero h1.title {
- color: #fff;
- font-size: 23px;
- margin: 0;
- text-align: left;
- padding-left: 80px;
- line-height: 59px;
- }
- .hero + .mid-bar {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- -webkit-transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- transition: all 1s cubic-bezier(0.55, 0, 0.1, 1);
- height: initial;
- opacity: 1;
- filter: alpha(opacity=100);
- }
- .hero > * {
- -webkit-transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
- transition: opacity 2.5s cubic-bezier(0.55, 0, 0.1, 1);
- opacity: 1;
- filter: alpha(opacity=100);
- }
|