/* ==============================================
ARQUIVO: style.css
PROJETO: Viver sem Glúten - Maria Cavalcanti
============================================== */
/* ===========================
HTML REFERÊNCIA:
=========================== */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f0e8;
color: #333333;
}
/* ===========================
HTML REFERÊNCIA:
![]()
Viver sem Glúten
=========================== */
header {
background-color: #f5f0e8;
border-bottom: 3px solid #c9a820;
padding: 20px;
display: flex;
align-items: center;
}
header .logo {
width: 120px;
height: auto;
margin: 0;
}
header h1 {
color: #c9a820;
font-size: 36px;
margin: 0 0 0 20px;
letter-spacing: 2px;
text-transform: uppercase;
flex: 1;
}
/* ===========================
HTML REFERÊNCIA:
=========================== */
.apresentacao {
background-color: #f5f0e8;
padding: 40px 20px;
text-align: center;
}
.apresentacao p {
font-size: 18px;
color: #555555;
}
.apresentacao a {
display: inline-block;
background-color: #2d6e2d;
color: #ffffff;
font-size: 18px;
font-weight: bold;
padding: 15px 40px;
border-radius: 8px;
text-decoration: none;
margin: 20px auto;
}
.apresentacao a:hover {
background-color: #c9a820;
}
.apresentacao h2 {
color: #c9a820;
font-size: 28px;
margin: 40px 0 20px 0;
}
.apresentacao ul {
list-style: none;
padding: 0;
max-width: 500px;
margin: 0 auto;
}
.apresentacao ul li {
background-color: #ffffff;
color: #333333;
font-size: 16px;
padding: 12px 20px;
margin-bottom: 10px;
border-radius: 8px;
border-left: 4px solid #2d6e2d;
text-align: left;
}
.apresentacao ul li::before {
content: "✔ ";
color: #c9a820;
font-weight: bold;
}
/* ===========================
HTML REFERÊNCIA:
=========================== */
.sobre {
display: flex;
align-items: center;
gap: 40px;
padding: 40px 20px;
max-width: 900px;
margin: 0 auto;
}
.sobre-texto {
flex: 1;
}
.sobre-texto h2 {
color: #c9a820;
font-size: 28px;
}
.sobre-texto p {
font-size: 16px;
line-height: 1.7;
color: #333333;
}
.sobre-foto img {
width: 250px;
height: auto;
border-radius: 50%;
border: 4px solid #c9a820;
}
/* ===========================
HTML REFERÊNCIA:
O que dizem nossos leitores
=========================== */
.depoimentos {
background-color: #eee8d5;
padding: 40px 20px;
}
.depoimentos h2 {
text-align: center;
color: #c9a820;
font-size: 28px;
margin-bottom: 30px;
}
.grade-depoimentos {
display: flex;
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
blockquote {
background-color: #ffffff;
border-left: 4px solid #c9a820;
border-radius: 8px;
padding: 20px;
margin: 0;
flex: 1;
}
blockquote p {
color: #333333;
font-size: 15px;
line-height: 1.7;
font-style: italic;
margin: 0 0 10px 0;
}
blockquote cite {
color: #c9a820;
font-size: 14px;
font-weight: bold;
font-style: normal;
}
/* ===========================
HTML REFERÊNCIA:
Garanta seu Ebook Agora
De: R$ 97,00
Por apenas: R$ 27,00
Pagamento único • Acesso imediato
COMPRAR AGORA
🔒 Garantia de 7 dias...
=========================== */
.secao-preco {
background-color: #eee8d5;
padding: 40px 20px;
text-align: center;
}
#preco {
color: #c9a820;
font-size: 28px;
margin-bottom: 20px;
}
.secao-preco img {
width: 200px;
height: auto;
margin: 0 auto 20px auto;
}
.secao-preco p {
font-size: 16px;
color: #333333;
margin: 5px 0;
}
.secao-preco s {
color: #999999;
font-size: 16px;
}
.secao-preco strong {
color: #2d6e2d;
font-size: 36px;
display: block;
margin: 10px 0;
}
.secao-preco a {
display: inline-block;
background-color: #2d6e2d;
color: #ffffff;
font-size: 18px;
font-weight: bold;
padding: 15px 40px;
border-radius: 8px;
text-decoration: none;
margin: 20px 0;
letter-spacing: 1px;
}
.secao-preco a:hover {
background-color: #c9a820;
}
.secao-preco .garantia {
font-size: 14px;
color: #666666;
margin-top: 15px;
}
/* ===========================
HTML REFERÊNCIA:
Perguntas Frequentes
O ebook é em qual formato?
...
=========================== */
.faq {
background-color: #f5f0e8;
padding: 40px 20px;
}
.faq h2 {
text-align: left;
color: #c9a820;
font-size: 28px;
margin-bottom: 30px;
}
.faq h3 {
color: #2d6e2d;
font-size: 18px;
margin-top: 25px;
margin-bottom: 5px;
}
.faq p {
color: #333333;
font-size: 15px;
line-height: 1.7;
margin: 0;
}
/* ===========================
HTML REFERÊNCIA:
=========================== */
footer {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
padding: 30px 20px;
}
footer p {
font-size: 14px;
color: #aaaaaa;
margin-bottom: 15px;
}
.links-legais {
margin-bottom: 20px;
}
.links-legais a {
color: #c9a820;
text-decoration: none;
font-size: 14px;
margin: 0 5px;
}
.links-legais a:hover {
text-decoration: underline;
}
.redes-sociais {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 10px;
}
.redes-sociais a {
background-color: #2d6e2d;
color: #ffffff;
text-decoration: none;
font-size: 14px;
padding: 8px 16px;
border-radius: 20px;
}
.redes-sociais a:hover {
background-color: #c9a820;
}
