8 974
edições
Sem resumo de edição Etiquetas: Edição móvel Edição feita através do site móvel |
Sem resumo de edição Etiquetas: Edição móvel Edição feita através do site móvel |
||
Linha 188: | Linha 188: | ||
} | } | ||
.update-title{ | |||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); | |||
--border-width: 3px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: 90%; | |||
margin: auto; | |||
font-weight: bold; | |||
font-family: Lato, sans-serif; | |||
font-size: 1rem; | |||
color: white; | |||
background: linear-gradient(60deg, | |||
#c93713, | |||
#e0370d, | |||
#e05b0d, | |||
#e0180d); | |||
background-size: 300% 300%; | |||
background-position: 0 50%; | |||
animation: moveGradient 30s alternate infinite; | |||
border-radius: 10px; | |||
} | |||
.post-title{ | |||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); | |||
--border-width: 3px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
width: 90%; | |||
margin: auto; | |||
font-weight: bold; | |||
font-family: Lato, sans-serif; | |||
font-size: 1rem; | |||
color: white; | |||
background: linear-gradient(60deg,#8d8384,#6f5860,#565452,#b4b5b5); | |||
background-size: 300% 300%; | |||
background-position: 0 50%; | |||
animation: moveGradient 30s alternate infinite; | |||
border-radius: 10px; | |||
} | |||
.card__heading a { | |||
color: white; | |||
} | |||
.sc-icon { | |||
display: inline-block; | |||
width: 12.5%; | |||
margin: -1px; | |||
height: auto; | |||
transition: 1s; | |||
} | |||
.sc-icon:hover { | |||
filter: grayscale(0%) contrast(115%); | |||
transition: 1s; | |||
transform: scale(1.10); | |||
} | |||
p.card__heading { | |||
font-size: 1.2em; | |||
font-weight: bold; | |||
} | |||
:root{ | |||
--background-dark: #2d3548; | |||
--text-light: rgba(255,255,255,0.6); | |||
--text-lighter: rgba(255,255,255,0.9); | |||
--spacing-s: 8px; | |||
--spacing-m: 16px; | |||
--spacing-l: 24px; | |||
--spacing-xl: 32px; | |||
--spacing-xxl: 64px; | |||
--width-container: 1200px; | |||
} | |||
.hero-section{ | |||
margin: 5%; | |||
padding-bottom: 53%; | |||
} | |||
.hero-section2{ | |||
margin: 5%; | |||
padding-bottom: 88%; | |||
} | |||
.card-grid{ | |||
display: grid; | |||
width: 100%; | |||
} | |||
.card{ | |||
list-style: none; | |||
position: relative; | |||
} | |||
.card:before{ | |||
content: ''; | |||
display: block; | |||
width: 100%; | |||
} | |||
.card__background{ | |||
width: 100%; | |||
height: auto; | |||
background-size: cover; | |||
background-position: center; | |||
bottom: 0; | |||
filter: brightness(0.95) saturate(1) contrast(0.95); | |||
left: 0; | |||
position: absolute; | |||
right: 0; | |||
top: 0; | |||
transform-origin: center; | |||
trsnsform: scale(1) translateZ(0); | |||
transition: | |||
filter 1s, | |||
transform 1s; | |||
} | |||
.card:hover .card__background{ | |||
transform: scale(1.05) translateZ(0); | |||
} | |||
.card__content{ | |||
left: 0; | |||
margin: var(--spacing-l); | |||
position: absolute; | |||
top: 0; | |||
text-align: left; | |||
} | |||
.card__category{ | |||
color: var(--text-light); | |||
font-size: 0.9rem; | |||
margin-bottom: var(--spacing-s); | |||
text-transform: uppercase; | |||
} | |||
.card__heading{ | |||
color: var(--text-lighter); | |||
font-size: 1.9rem; | |||
text-shadow: 2px 2px 20px rgba(0,0,0,0.2); | |||
line-height: 1.4; | |||
} | |||
h3.card__heading { | |||
margin-top: -10px; | |||
} | |||
/* Keyframes */ | |||
@keyframes moveGradient { | @keyframes moveGradient { | ||
50% { | 50% { |