You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
2.9 KiB
145 lines
2.9 KiB
body { |
|
background: #F4F1EB; |
|
color: #000; |
|
margin: 0; |
|
padding: 0; |
|
font-size: 16px; |
|
} |
|
|
|
.header { |
|
display: flex; |
|
width: 100%; |
|
margin: 0 auto; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* Subtle shadow */ |
|
0 6px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow */ |
|
border: 1px solid rgba(0, 0, 0, 0.05); /* Light border */ |
|
background: #fff; |
|
} |
|
|
|
.logo { |
|
width: 30px; |
|
margin: 8px 20px; |
|
align-self: center; |
|
} |
|
|
|
.title { |
|
flex: 1; |
|
font-family: "Helvetica Neue", "Helvetica", serif; |
|
margin: 0; |
|
align-self: center; |
|
font-size: 1.75rem; |
|
} |
|
|
|
.login-container { |
|
align-self: center; |
|
margin-right: 20px |
|
} |
|
|
|
.content { |
|
display: flex; |
|
margin: 0; |
|
padding: 60px 0 40px; |
|
flex-direction: column; |
|
} |
|
.difference { |
|
margin: 0 auto 8px; |
|
padding: 0; |
|
font-size: 2.5rem; |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
color: #457B9D; |
|
text-align: center; |
|
} |
|
|
|
.product-description { |
|
margin: 0 auto; |
|
text-align: center; |
|
font-size: 1.25rem; |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
width: 50%; |
|
line-height: 2rem; |
|
color: #6C757D; |
|
} |
|
|
|
.cta-button { |
|
display: block; /* Change to block for vertical alignment */ |
|
margin: 60px auto 0px; |
|
padding: 10px 20px; |
|
border-radius: 5px; |
|
color: white; |
|
text-decoration: none; |
|
font-size: 1.5rem; |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
width: 15%; |
|
text-align: center; |
|
font-weight: bold; |
|
background-color: #A3C1AD; |
|
} |
|
|
|
.how-it-works-button:hover { |
|
text-decoration: underline; |
|
} |
|
.how-it-works-button { |
|
display: block; /* Change to block for vertical alignment */ |
|
margin: 8px auto; |
|
border-radius: 5px; |
|
color: #457B9D; |
|
text-decoration: none; |
|
font-size: 1.15rem; |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
width: 15%; |
|
text-align: center; |
|
} |
|
|
|
.how-it-works-container { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
flex-wrap: wrap; |
|
border-top: 1px solid #ccc; |
|
} |
|
|
|
.become-a-supporter-container { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
max-width: 1200px; |
|
margin: 60px auto; |
|
flex-wrap: wrap; |
|
border-top: 1px solid #ccc; |
|
} |
|
|
|
.headline { |
|
width: 100%; |
|
text-align: center; |
|
font-size: 2em; |
|
color: #457b9d; /* Muted blue color */ |
|
margin-bottom: 20px; |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
} |
|
|
|
.column { |
|
justify-content: space-between; |
|
flex: 1; |
|
background-color: #ffffff; |
|
padding: 20px; |
|
margin: 10px; |
|
border-radius: 8px; |
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); |
|
font-family: "Helvetica Neue", Helvetica, serif; |
|
flex-basis: 28% ; |
|
} |
|
|
|
.column h3 { |
|
font-size: 1.5em; |
|
color: #91A4B1; |
|
margin-bottom: 10px; |
|
text-align: center; |
|
} |
|
|
|
.column p { |
|
font-size: 1.15em; |
|
color: #495057; |
|
line-height: 1.6; |
|
} |