]>
Commit | Line | Data |
---|---|---|
82858235 ES |
1 | .hero { |
2 | padding: 32px 2.8rem; | |
3 | color: var(--md-primary-bg-color); | |
4 | background: linear-gradient( | |
5 | to bottom, | |
6 | var(--md-primary-fg-color), | |
7 | hsla(160deg, 47%, 55%, 1) 99%, | |
8 | #fff 99% | |
9 | ); | |
10 | } | |
11 | ||
12 | .hero-container { | |
13 | display: flex; | |
14 | flex-direction: row; | |
15 | align-items: center; | |
16 | justify-content: space-between; | |
17 | padding: 1rem 0; | |
18 | } | |
19 | ||
20 | .hero-content { | |
21 | flex: 0 0 40%; | |
22 | } | |
23 | ||
24 | .hero-title { | |
25 | height: 4rem; | |
26 | display: flex; | |
27 | flex-direction: row; | |
28 | align-items: center; | |
29 | } | |
30 | ||
31 | .hero-title > img { | |
32 | max-height: 100%; | |
33 | width: auto; | |
34 | } | |
35 | ||
36 | .hero-title > h1 { | |
37 | margin: 0 0 0 0.5rem; | |
38 | font-size: 4rem; | |
39 | line-height: 1; | |
40 | color: currentColor; | |
41 | font-weight: 700; | |
42 | } | |
43 | ||
44 | .hero-image { | |
45 | width: 17rem; | |
46 | height: auto; | |
47 | flex: 0 0 50%; | |
48 | transform: perspective(300px) rotate3D(0, 1, 0, -5deg); | |
49 | box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); | |
50 | } | |
51 | ||
52 | .hero .md-button { | |
53 | margin-top: 0.5rem; | |
54 | margin-right: 0.5rem; | |
55 | color: var(--md-primary-bg-color); | |
56 | } | |
57 | ||
58 | .hero .md-button-primary { | |
59 | background-color: var(--md-primary-bg-color); | |
60 | color: hsla(280deg, 37%, 48%, 1); | |
61 | border-color: var(--md-primary-bg-color); | |
62 | } | |
63 | ||
64 | .hero .md-button:focus, | |
65 | .hero .md-button:hover { | |
66 | background-color: var(--md-accent-fg-color); | |
67 | color: var(--md-default-bg-color); | |
68 | border-color: var(--md-accent-fg-color); | |
69 | } | |
70 | ||
71 | .md-header { | |
72 | position: initial; | |
73 | } | |
74 | ||
75 | .md-main__inner { | |
76 | margin: 0; | |
77 | } | |
78 | ||
79 | .md-content { | |
80 | display: none; | |
81 | } |