vovô arendito e sua história de amor em uma ditadura
MNEMOZINE
style.css
Desenvolvido por:
Caio Augusto
=============================================================*/
@font-face {
font-family: “Nimbus Sans”;
src: url(“../fonts/nimbus-sans-regular.woff2”) format(“woff2”);
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: “Nimbus Sans”;
src: url(“../fonts/nimbussant-italic.woff2”) format(“woff2”);
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: “Nimbus Sans”;
src: url(“../fonts/nimbus-sans-bold.woff2”) format(“woff2”);
font-weight: 700;
font-style: bold;
}
/*============================================================
RESET
============================================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background-color:#ECE2D6;
color:#222;
font-family: “Nimbus Sans”;
line-height:1.6;
overflow-x:hidden;
}
img{
display:block;
max-width:100%;
}
a{
color:inherit;
text-decoration:none;
}
button{
border:none;
background:none;
cursor:pointer;
}
ul{
list-style:none;
}
/*============================================================
VARIÁVEIS
============================================================*/
:root{
/* Identidade visual */
–roxo:#4f2156;
–roxo-claro:#6E55A3;
–bege:#fff4cc;
–bege-claro:#F7F2EC;
–branco:#FFFFFF;
–preto:#1F1F1F;
–cinza:#666666;
–borda:#D8CDC2;
/* Espaçamentos */
–container:1320px;
–radius:10px;
–transition:.30s;
–shadow:0 18px 40px rgba(0,0,0,.10);
}
/*============================================================
CONTAINER
============================================================*/
.container{
width:min(92%,1320px);
margin:auto;
margin-bottom: 5px;
}
/*============================================================
TIPOGRAFIA
============================================================*/
h1,
h2,
h3,
h4{
font-family: “Nimbus Sans”;
font-weight: 700; /* Bold */
}
p{
font-size:1rem;
color:#444;
}
.category{
display:inline-block;
margin-bottom:10px;
font-family: “Nimbus Sans”;
font-style:italic;
color:var(–bege);
letter-spacing:.05em;
font-size:.85rem;
}
.section-tag{
display:inline-block;
margin-bottom:20px;
color:var(–roxo);
font-family:”Nimbus Sans”;
text-transform:uppercase;
letter-spacing:.08em;
font-size:.85rem;
}
/*============================================================
MAIN
============================================================*/
.home{
padding-top:150px;
background-color: rgb(241, 227, 173);
}
/*=========================================================
MATÉRIAS
=========================================================*/
.article{
padding:7rem 0;
background:var(–bege);
}
.article .container{
max-width:1100px;
}
/*=========================================================
CABEÇALHO
=========================================================*/
.article__header{
max-width:850px;
margin:0 auto 5rem;
}
.article__category{
display:inline-block;
font-size:.9rem;
font-style:italic;
text-transform:uppercase;
letter-spacing:.15em;
color:var(–roxo);
margin-bottom:1rem;
}
.article__title{
font-size:clamp(2.8rem,6vw,5rem);
line-height:1.05;
margin-bottom:2rem;
}
.article__subtitle{
font-size:1.35rem;
line-height:1.8;
color:var(–cinza);
margin-bottom:2rem;
}
.article__meta{
font-size:.95rem;
color:#777;
}
/*=========================================================
IMAGEM PRINCIPAL
=========================================================*/
.article__cover{
margin-bottom:6rem;
justify-content: center;
align-items: center;
}
.article__cover img{
width: 100%;
max-width: 100%;
display: block;
}
.article__caption{
margin-top:1rem;
font-size:.9rem;
color:#777;
font-style:italic;
}
/*=========================================================
TRADUCAO
=========================================================*/
.translation-button {
color: #2E1633;
text-decoration: none;
border: 2px solid #2E1633;
padding: 10px 18px; /* antes era 10px 18px */
border-radius: 50px;
font-weight: 700;
font-size: 14px; /* opcional */
transition: .3s;
}
.translation-button:hover {
background: #2E1633;
color: #ECE2D6;
}
.translation-button:last-child {
margin-left: 20px;
}
/*=========================================================
TEXTO
=========================================================*/
.article__content{
max-width:760px;
margin:0 auto;
}
.article__content p{
font-size:1.25rem;
line-height:2;
margin-bottom:2rem;
}
.article__content h2{
margin:5rem 0 2rem;
font-size:2.3rem;
}
.article__content h3{
margin:4rem 0 1.5rem;
font-size:1.6rem;
}
.article__content strong{
font-weight:700;
}
.article__content em{
font-style:italic;
}
.article__content blockquote{
margin:4rem 0;
padding-left:2rem;
border-left:4px solid var(–roxo);
font-size:1.6rem;
font-style:italic;
line-height:1.8;
}
.article__content a{
color:var(–roxo);
text-decoration:none;
}
.article__content a:hover{
text-decoration:underline;
}
sup {
vertical-align: super;
font-size: 0.7em;
}
sup a {
text-decoration: none;
color: var(–roxo);
font-weight: 600;
}
sup a:hover {
text-decoration: underline;
}
/*=========================================================
IMAGENS dentro do texto
=========================================================*/
.article__image{
margin:5rem auto;
max-width:900px;
}
.article__image img{
width:100%;
display:block;
}
.article__image figcaption{
margin-top:1rem;
color:#777;
font-style:italic;
}
/*=========================================================
PRÓXIMA MATÉRIA
=========================================================*/
.next-article{
margin-top:8rem;
padding-top:4rem;
border-top:1px solid rgba(0,0,0,.08);
}
.next-article a{
display:flex;
justify-content:space-between;
align-items:center;
text-decoration:none;
color:inherit;
transition:.3s;
}
.next-article a:hover{
transform:translateX(10px);
}
.next-article span{
font-size:.85rem;
letter-spacing:.15em;
text-transform:uppercase;
color:#777;
}
.next-article h2{
margin-top:.7rem;
}