Viewing File: /home/cienp/public_html/inct-inovamed/wp-content/themes/inovamed/sass/style.scss
/*
Theme Name: Inovamed
Author: Muto
Version: 1
*/
@import "mixins";
@import "normalize";
/*---------------------------
Variables
---------------------------*/
$azulescuro: #0C1720;
$offwhite: #F7F1EB;
$laranja: #F15F31;
$rosaClaro: #ED227D;
$rosaEscuro: #AD238A;
$roxo: #26247B;
/*---------------------------
Globals
---------------------------*/
.rounded{
@include rounded();
}
.shadow-center{
@include box-shadow(0px, 0px, 20px, rgba(0,0,0,0.2));
}
.flexbox{
@include flexbox();
}
.grid{
display: grid;
gap: 20px;
}
.animate{
@include animate();
}
.wrapper{
width: 900px;
margin: 50px auto;
@include box-sizing(border-box);
}
.smallWrapper{
max-width: 600px;
width: 100%;
margin: 0px auto;
@include box-sizing(border-box);
}
.sectionContent{
padding: 50px 0;
}
picture{
margin: 0;
img{
width: 100%;
height: auto;
display: block;
vertical-align: top;
}
}
a{
@include animate();
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure {
margin: 0;
}
a.botao, span.botao{
@include animate();
cursor:pointer;
color: $offwhite !important;
background-color: $laranja;
font-weight: 700;
font-size: 1em;
padding: 0.6em 2em;
text-transform: uppercase;
@include rounded(5px);
&:hover{
background-color: $rosaClaro;
}
}
h1, h2, h3, h4, h5, h6{
margin: 0;
}
.invertColor{
background-color: $offwhite;
color: $azulescuro;
border-bottom: 1px solid $azulescuro;
}
.not-home{
section{
padding: 100px 0;
}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;700&display=swap');
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.woff') format('woff');
font-display: swap;
}
.social {
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-busca:before {
content: "\f002";
}
.icon-facebook:before {
content: "\ea90";
}
.icon-facebook2:before {
content: "\ea91";
}
.icon-instagram:before {
content: "\ea92";
}
.icon-whatsapp:before {
content: "\ea93";
}
.icon-spotify:before {
content: "\ea94";
}
.icon-twitter:before {
content: "\ea96";
}
.icon-youtube:before {
content: "\ea9d";
}
.icon-twitch:before {
content: "\ea9f";
}
.icon-soundcloud:before {
content: "\eac3";
}
.icon-compiuter:before {
content: "\f108";
}
.icon-seta:before, .setaElemento:after {
font-family: 'icomoon' !important;
content: "\f061";
}
.icon-pessoa:before {
content: "\f007";
}
html{
overflow-x:hidden;
width: 100%;
}
body{
background-color: $azulescuro;
color: $offwhite;
padding: 0;
margin: 0;
width: 100%;
overflow-x:hidden;
font-size:16px;
-webkit-font-smoothing: antialiased;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
nav.menuPrimary{
width: 100%;
padding: 20px;
@include box-sizing(border-box);
@include animate(.6s);
.logo{
height: 34px;
width: 162px;
display: block;
}
@include align-items(center);
@include justify-content(space-between);
ul{
list-style: none;
padding: 0;
margin: 0;
li{
display: inline-block;
margin-left: 20px;
margin-right: 20px;
a{
text-transform: uppercase;
font-weight: 400;
font-size: 0.8em;
color: $offwhite;
opacity: 0.6;
&:hover{
opacity: 1;
}
}
}
}
}
nav.hiddenMenu{
position:fixed;
height: 55px;
padding: 10px;
@include box-sizing(border-box);
top: 0;
background-color: $azulescuro;
border-bottom: 1px solid rgba(100,100,100,0.1);
width: 100%;
z-index: 999999;
@include transform(translateY(-80px));
@include animate();
.logo{
z-index: 99;
height: 34px;
width: 162px;
display: block;
}
.abreMenu, .fechaMenu{
width:30px;
position: absolute;
top: 50%;
right: 20px;
@include transform(translateY(-50%));
z-index: 9999;
cursor: pointer;
div{
width: 100%;
height:1px;
@include animate();
margin:7px 0;
background-color: $offwhite;
}
&:hover{
div{
background-color: $rosaClaro;
}
}
}
.abreMenu{
margin: 2px 0;
opacity: 1;
pointer-events: auto;
div{
&:nth-child(2){
width:22px;
}
}
}
.fechaMenu{
padding: 25px 0;
position: absolute;
top: 29px;
right: 21px;
opacity: 0;
pointer-events: none;
div{
margin:0;
&:nth-child(1){
@include transform(rotate(45deg));
}
&:nth-child(2){
@include transform(rotate(-45deg));
margin-top:-1px;
}
}
&:hover{
div{
}
}
}
.pageHolder{
margin:0 auto;
width: 100%;
position: absolute;
top: 55px;
left: 0;
background-color: $azulescuro;
border-bottom: 1px solid rgba(100,100,100,0.1);
@include transform(translateY(calc(-100% - 55px)));
z-index: -1;
@include animate();
ul{
width: 300px;
display:block;
padding: 1em;
margin:0 auto;
li{
list-style: none;
a{
color: $offwhite;
font-size:1.5em;
margin:0.5em auto;
display:block;
text-align: center;
max-width: 300px;
&:hover{
color: $laranja;
}
}
}
&.accessButtons{
border-top: 1px solid rgba(100,100,100,0.1);
}
}
}
}
nav.hiddenMenu.active{
.abreMenu{
opacity: 0;
pointer-events: none;
}
.fechaMenu{
opacity: 1;
pointer-events: auto;
}
.pageHolder{
@include transform(translateY(0));
@include box-shadow(0px, 15px, 15px, rgba(0,0,0,0.2));
}
}
nav.hiddenMenu.fixo{
@include transform(translateY(0px));
}
.splashHome{
width: 100%;
margin: 225px 0;
.grid{
grid-template-columns: 1fr 1fr 1fr;
position: relative;
}
.chamada{
width: calc(100% - 60px);
grid-column: 2 / 4;
h1{
font-size: 4em;
line-height:1.1em;
font-weight: 100;
text-transform: uppercase;
b{
font-weight: 700;
}
}
span{
font-size: 0.9em;
margin: 1em 0;
display: block;
}
.botao{
margin-top: 1em;
display: inline-block;
}
}
.drop{
left: 33%;
width: 1000px;
height: auto;
position: absolute;
top: 50%;
@include transform(translate(-50%, -50%));
z-index: -1;
}
.bgVideo{
pointer-events: none;
left: 33%;
width: 1200px;
height: auto;
position: absolute;
top: 50%;
@include transform(translate(-50%, -50%));
z-index: -1;
}
}
.videoApresentacao{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(12, 23, 32, 0.7);
z-index: 999;
@include animate();
opacity:0;
pointer-events: none;
iframe{
width: 90%;
height: 50vw;
position:absolute;
left: 50%;
top: 50%;
@include transform(translate(-50%, -50%));
}
.fechaVideo{
width:30px;
position: absolute;
padding: 25px 0;
top: 29px;
right: 21px;
@include transform(translateY(-50%));
z-index: 99999;
cursor: pointer;
div{
width: 100%;
height:1px;
@include animate();
background-color: $offwhite;
margin:0;
&:nth-child(1){
@include transform(rotate(45deg));
}
&:nth-child(2){
@include transform(rotate(-45deg));
margin-top:-1px;
}
}
&:hover{
div{
background-color: $rosaClaro;
}
}
}
}
.videoApresentacao.active{
opacity:1;
pointer-events: auto;
}
.chamadaPaginas{
.grid{
grid-template-columns: 1fr 1fr 1fr 1fr;
.chamada{
@include animate();
color: $offwhite;
padding: 20px;
@include box-sizing(border-box);
@include rounded(10px);
font-size: 0.8em;
align-self: start;
.titulo{
font-weight: 700;
}
img, span{
display: block;
}
&:nth-child(1){
background-color: $roxo;
}
&:nth-child(2){
background-color: $rosaEscuro;
}
&:nth-child(3){
background-color: $rosaClaro;
}
&:nth-child(4){
background-color: $laranja;
}
.icon{
max-height: 35px;
display: block;
margin-bottom: 3em;
}
&:hover{
@include box-shadow(0px, 15px, 15px, rgba(0,0,0,0.2));
@include transform(translateY(-6px));
}
}
}
}
footer{
.newsletter{
background-color: $offwhite;
color: $roxo;
overflow: hidden;
position: relative;
.grid{
grid-template-columns: 1fr 1fr 1fr;
position: relative;
.chamada{
z-index: 3;
padding: 5em 0;
h2{
color: $rosaEscuro;
text-transform: uppercase;
font-size: 2em;
line-height: 1em;
padding: 0;
margin: 0;
}
span{
line-height: 1.1em;
margin: 3em 0;
display: block;
}
}
.pills{
position:absolute;
left: 66%;
top: 50%;
height: 540px;
width: auto;
@include transform(translate(-50%, -50%));
z-index: 1;
}
.outlineLogo{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: 2;
opacity: 0.1;
@include transform(translate(-50%, -50%));
}
}
}
.contact{
grid-template-columns: 1fr 1fr 1fr;
.linkLogoFooter{
width: 32px;
height: 30px;
display: block;
}
.contactInfo{
grid-column: 2 / 4;
div:nth-child(1){
font-size: 0.8em;
span{
font-weight: 700;
text-transform: uppercase;
display: block;
}
a{
color: $offwhite;
display: block;
}
}
.instagram{
margin: 2em 0;
display: inline-block;
}
div:nth-child(3){
font-size: 0.7em;
a{
color: $offwhite;
font-weight: 700;
display: block;
opacity: 0.6;
margin-bottom: 1em;
}
span{
display: block;
opacity: 0.6;
}
.brasil{
margin-top: 1em;
opacity: 0.4;
.iconBr{
width: 15px;
height: 10px;
margin-left: 0.01em;
vertical-align: middle;
display: inline-block;
margin-bottom: 2px;
}
}
}
}
}
}
section.blog{
padding: 100px 0;
min-height: 550px;
.title{
@include justify-content(space-between);
@include align-items(center);
margin-bottom: 4em;
h2{
font-size: 1.6em;
}
}
.posts{
list-style: none;
padding:0;
li{
padding: 50px 0;
position: relative;
border-top: 1px solid rgba(248, 240, 235, 0.4);
&:before{
content: '';
background-color: rgba(11, 23, 31, 0.5);
height: 4px;
width: 25%;
position: absolute;
top: -4px;
left: calc(75% + 15px);
}
a{
color: $offwhite;
grid-template-columns: 1fr 1fr 1fr 1fr;
h3{
font-size: 1.6em;
font-weight: 300;
grid-column: 1 / 4;
margin: 0;
max-width: 600px;
}
.data{
grid-column: 4 / 4;
.date{
display: block;
font-size: 0.8em;
font-weight: 700;
opacity: 0.4;
text-transform: capitalize;
margin-bottom: 1em;
}
.categoria{
display: inline-block;
color: $offwhite !important;
background-color: rgba(255,255,255,0.2);
font-weight: 700;
font-size: 0.7em;
padding: 0.6em 1.2em;
text-transform: uppercase;
@include rounded(5px);
&.noticia{
background-color: $roxo;
}
&.artigo{
background-color: $rosaClaro;
}
}
}
.resumo{
grid-column: 1 / 4;
&.hasThumb{
grid-column: 1 / 3;
}
opacity: 0.4;
font-size: 0.9em;
.lermais{
font-size: 0.9em;
font-weight: 700;
&:hover{
@include box-shadow(0px, 2px, 0px, $roxo);
}
}
}
img{
grid-column: 3 / 5;
width: 100%;
height: auto;
@include rounded(10px);
}
&:after{
content: '';
background-color: rgba(245, 240, 235, 0.05);
@include animate();
opacity: 0;
pointer-events: none;
position:absolute;
width:100%;
height: calc(100% + 1px);
top: -1px;
left: -10px;
padding: 0 10px;
@include rounded(10px);
z-index: 99;
}
&:hover{
.resumo{
opacity: 1;
}
.data{
.date{
opacity: 1;
}
}
&:after{
opacity: 1;
}
}
}
}
}
}
.home{
.blog{
.posts{
li{
&:first-child{
border-top: none;
}
}
}
}
}
.page-template-template-sobre{
font-weight: 300;
.splashSobre{
font-size: 0.9em;
.grid{
grid-template-columns: 1fr 1fr;
position: relative;
.logo{
mix-blend-mode: screen;
position: absolute;
height: 700px;
width: auto;
left: calc(50% + 50px);
}
}
}
.instituicoes{
h2{
text-align: center;
font-size: 2.3em;
}
.intro{
text-align: center;
color: $roxo;
font-size: 1.2em;
}
h3{
font-size: 0.9em;
color: $roxo;
}
p{
font-size: 0.9em;
}
& .wrapper > p{
width: 600px;
margin: 0 auto;
}
.column{
grid-template-columns: 1fr 1fr;
margin: 100px 0;
.col01, .col02{
width: 100%;
}
img{
height: 180px;
padding: 30px;
margin: 0 auto;
position: relative;
display: block;
width: 100%;
@include box-sizing(border-box);
}
}
img.intituicao{
margin: 0px auto;
position: relative;
display: block;
}
ul{
@include justify-content(space-between);
@include align-items(center);
margin:0;
padding: 50px 0 0;
li{
list-style: none;
}
}
}
}
.page-template-template-pesquisadores{
h1.title{
font-size: 3em;
text-align: center;
text-transform: uppercase;
font-weight: 100;
}
.subtitle{
margin-top: 2em;
text-align: center;
font-weight: 700;
}
.pesquisadores{
padding-top: 0;
.grid{
grid-template-columns: 1fr 1fr 1fr;
margin: 0 auto;
padding: 0;
li{
list-style: none;
margin-bottom: 2em;
a{
color: $offwhite;
text-align: center;
}
.posicao{
font-weight: 700;
opacity: 0.4;
font-size: 0.8em;
padding: 1em 0 0.9em;
width: 100%;
display: block;
letter-spacing: 0.05em;
}
h3{
font-weight: 100;
padding-bottom: 1.2em;
}
.photo{
width: 100%;
height: 300px;
overflow: hidden;
@include rounded(10px);
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
@include animate();
}
}
.icones{
text-align: center;
a{
padding: 0 0.8em;
opacity: 0.4;
img{
width: 20px;
}
&:hover{
opacity: 1;
}
}
}
&:hover{
.photo{
@include box-shadow(0px, 0px, 20px, rgba(237,34,125,0.4));
img{
@include transform(scale(1.2));
}
}
}
}
}
}
}
.single.single-pesquisadores{
h1{
font-size: 3em;
font-weight: 300;
margin-bottom: 1.5em;
line-height: 1.1em;
}
p{
margin-top: 1em;
}
section.grid{
grid-template-columns: 1fr 1fr;
a{
color: $offwhite;
}
.posicao{
font-weight: 700;
opacity: 0.4;
padding-bottom: 1.2em;
width: 100%;
display: block;
letter-spacing: 0.05em;
}
.photo{
width: 100%;
height: 460px;
overflow: hidden;
@include rounded(10px);
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
@include animate();
}
}
.icones{
margin-top: 2em;
a{
padding-right: 1.6em;
opacity: 0.4;
img{
width: 20px;
}
&:hover{
opacity: 1;
}
}
}
}
}
.page-template-template-projetos{
h1.title{
font-size: 3em;
text-align: center;
text-transform: uppercase;
font-weight: 100;
}
.subtitle{
margin-top: 2em;
text-align: center;
font-weight: 700;
}
.projetos{
padding-top: 0;
ul{
padding: 0;
}
li{
list-style: none;
margin-bottom: 2em;
overflow: hidden;
@include rounded(10px);
a{
grid-template-columns: 1fr 1fr;
gap: 00px;
position: relative;
width: 100%;
color: $offwhite;
min-height: 250px;
}
h2{
font-weight: 100;
padding: 20px 40px;
position: absolute;
text-align: center;
top: 50%;
@include transform(translateY(-50%));
@include box-sizing(border-box);
width: 100%;
z-index: 5;
font-weight: 700;
font-size: 2.2em;
}
.photo{
position: relative;
.gradient{
width: 100%;
height: 100%;
position: absolute;
z-index: 4;
}
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
@include animate();
filter: grayscale(1);
z-index: 3;
position: absolute;
opacity:0.15;
}
}
.texto{
@include box-sizing(border-box);
padding: 20px;
z-index: 5;
p{
margin-top: 0;
font-size: 0.9em;
opacity: 0.6;
font-weight: 300;
}
span{
font-size: 0.75em;
font-weight: 700;
opacity: 0.8;
}
}
&:hover{
@include box-shadow(0px, 15px, 15px, rgba(0,0,0,0.2));
@include transform(translateY(-6px));
}
&:nth-child(4n+1){
a{
background-color: $roxo;
.gradient{
background: rgb(38,36,123);
background: -moz-linear-gradient(90deg, rgba(38,36,123,0) 50%, rgba(38,36,123,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(38,36,123,0) 50%, rgba(38,36,123,1) 100%);
background: linear-gradient(90deg, rgba(38,36,123,0) 50%, rgba(38,36,123,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#26247b",endColorstr="#26247b",GradientType=1);
}
}
}
&:nth-child(4n+2){
a{
background-color: $rosaEscuro;
.gradient{
background: rgb(173,35,138);
background: -moz-linear-gradient(90deg, rgba(173,35,138,0) 50%, rgba(173,35,138,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(173,35,138,0) 50%, rgba(173,35,138,1) 100%);
background: linear-gradient(90deg, rgba(173,35,138,0) 50%, rgba(173,35,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ad238a",endColorstr="#ad238a",GradientType=1);
}
}
}
&:nth-child(4n+3){
a{
background-color: $rosaClaro;
.gradient{
background: rgb(237,34,125);
background: -moz-linear-gradient(90deg, rgba(237,34,125,0) 50%, rgba(237,34,125,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(237,34,125,0) 50%, rgba(237,34,125,1) 100%);
background: linear-gradient(90deg, rgba(237,34,125,0) 50%, rgba(237,34,125,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed227d",endColorstr="#ed227d",GradientType=1);
}
}
}
&:nth-child(4n+4){
a{
background-color: $laranja;
color: $azulescuro;
.gradient{
background: rgb(241,95,49);
background: -moz-linear-gradient(90deg, rgba(241,95,49,0) 50%, rgba(241,95,49,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(241,95,49,0) 50%, rgba(241,95,49,1) 100%);
background: linear-gradient(90deg, rgba(241,95,49,0) 50%, rgba(241,95,49,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f15f31",endColorstr="#f15f31",GradientType=1);
}
}
}
}
}
}
.page-template-template-eventos{
h1.title{
font-size: 3em;
text-align: center;
text-transform: uppercase;
font-weight: 100;
}
.subtitle{
margin-top: 2em;
text-align: center;
font-weight: 700;
}
.eventos{
padding-top: 0;
.wrapper{
padding:0;
}
li{
list-style: none;
margin-bottom: 2em;
a{
grid-template-columns: 1fr 1fr;
@include rounded(10px);
gap: 20px;
position: relative;
width: 100%;
color: $offwhite;
min-height: 250px;
background-color: rgba(248, 240, 235, 0.05);
}
.texto{
@include box-sizing(border-box);
padding: 20px;
.data{
color: $laranja;
font-weight: 300;
b{
font-weight: 700;
}
&.jaRolou{
color: $offwhite;
opacity: 0.4;
}
span{
text-transform: capitalize;
}
}
p{
margin-top: 0;
font-size: 0.9em;
opacity: 0.6;
font-weight: 300;
}
.infos{
font-weight: 700;
color: $laranja;
font-size: 0.9em;
}
}
h2{
font-weight: 300;
padding: 0.5em 0;
font-size: 2.2em;
line-height: 1.4em;
}
.photo{
position: relative;
@include rounded(10px);
overflow: hidden;
padding: 20px 20px 20px 0px;
width: 100%;
@include box-sizing(border-box);
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
@include animate();
@include rounded(10px);
}
}
&:hover{
@include box-shadow(0px, 15px, 15px, rgba(0,0,0,0.2));
@include transform(translateY(-6px));
}
}
}
}
.single-eventos{
.data{
margin-top: 1em;
color: $laranja;
&.jaRolou{
color: $offwhite;
opacity: 0.4;
}
}
}
.page-template-template-posts{
h1.title{
font-size: 3em;
text-align: center;
text-transform: uppercase;
font-weight: 100;
}
section.blog{
padding-top: 0;
}
.postsDestaque{
margin-top: 0;
padding: 0;
a{
@include rounded(10px);
position: relative;
width: 100%;
color: $offwhite;
height: 350px;
overflow: hidden;
background-color: rgba(248, 240, 235, 0.05);
display: inline-block;
-webkit-box-shadow: 0px 20px 25px 20px rgba(12, 23, 32, .6);
-moz-box-shadow: 0px 20px 25px 20px rgba(12, 23, 32, .6);
box-shadow: 0px 20px 25px 20px rgba(12, 23, 32, .6);
}
.texto{
position: absolute;
padding: 20px;
bottom: 0;
font-weight: 700;
text-shadow: 0px 1px 7px black;
@include box-sizing(border-box);
h3{
padding: 0.5em 0;
font-size: 2em;
line-height: 1.4em;
}
}
img{
width:100%;
height:100%;
object-position: center;
object-fit: cover;
@include animate();
}
&:hover{
}
}
.owl-carousel{
position: relative;
margin: 0 auto;
}
.owl-item{
display:inline-block;
@include animate();
height: 100%;
position: relative;
@include transform(scale(0.8));
z-index: 1;
opacity: 0.6;
&.active{
@include transform(scale(1));
z-index: 2;
opacity: 1;
}
}
.owl-stage-outer{
height: 100%;
}
.owl-stage{
height: 100%;
@include animate();
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.owl-stage:active{
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.owl-dots{
text-align: center;
.owl-dot {
width: 30px;
margin: 0 3px;
border: none;
height: 4px;
@include rounded(10px);
opacity: 0.4;
&.active{
opacity: 1;
}
}
}
.owl-nav{
position: absolute;
top: 50%;
margin-top: -30px;
width: 100%;
font-weight: 100;
font-size: 3em;
.owl-prev, .owl-next{
position: absolute;
left: 20px;
cursor: pointer;
@include animate();
background: none;
border: none;
padding:0;
opacity: 0.6;
line-height: 0.6em;
&:hover{
opacity: 1;
}
}
.owl-next{
right: 20px;
left: inherit;
}
}
div.search_result {
display: none;
}
}
.search_bar{
padding-top: 100px;
max-width: 300px;
input{
width: 100%;
background-color: transparent;
border: 1px solid rgba(248, 240, 235, 0.4);
text-align: center;
padding: 10px 20px;
@include box-sizing(border-box);
@include rounded(10px);
@include animate();
outline: 0;
&:hover{
background-color: rgba(245, 240, 235, 0.05);
}
&:focus{
border: 1px solid rgba(248, 240, 235, 1);
}
}
}
.single{
.grid{
grid-template-columns: 1fr 1fr 1fr 1fr;
position: relative;
h1{
grid-column: 2 / 5;
font-weight: 100;
font-size: 2.8em;
}
.data{
grid-column: 1 / 2;
width: 100%;
.date{
display: block;
font-size: 0.8em;
font-weight: 700;
opacity: 0.4;
text-transform: capitalize;
margin-bottom: 1em;
margin-top: 1.26em;
}
.categoria{
display: inline-block;
color: $offwhite !important;
background-color: rgba(255,255,255,0.2);
font-weight: 700;
font-size: 0.7em;
padding: 0.6em 1.2em;
text-transform: uppercase;
@include rounded(5px);
&.noticia{
background-color: $roxo;
}
&.artigo{
background-color: $rosaClaro;
}
}
}
.conteudo{
grid-column: 2 / 5;
width: 100%;
p{
font-size: 1em;
letter-spacing: 0.05em;
line-height: 1.8em;
color: rgba(248, 240, 235, 0.7);
b{
font-weight: 700;
}
a{
color: rgba(248, 240, 235, 0.8);
text-decoration: underline;
&:hover{
color: rgba(248, 240, 235, 1);
}
}
}
figure{
padding: 5em 0;
width: calc(100% + 34%);
margin-left: -34%;
img{
width: 100%;
height: auto;
@include rounded(10px);
}
figcaption{
font-size:0.8em;
color: rgba(248, 240, 235, 0.7);
}
}
h2, h3, h4, h5{
margin-top: 3em;
}
}
}
}
@import "responsive";
Back to Directory
File Manager