/*!
Theme Name: Singulab
Theme URI: https://them.es/starter
Author: Patropi Comunica
Author URI: https://them.es/
Description: Thema desenvolvido para a Singulab
Version: 3.5.4
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.2
License: GPL version 2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0
Tags: custom-background, custom-colors, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready
Text Domain: patropi-singulab
*/
/* Don't overwrite this file. Compile "/assets/main.scss" to "/build/main.css" */
/* From http://codex.wordpress.org/CSS */
/* Vars */
/* Global format */
*{
font-family: var(--sg-font) !important;
}
p{
color:#fff;
}
html{
width:100vw;
overflow-x: hidden;
}
body{
background-color:var(--sg-black) !important;
&.sg-iframe{
padding-bottom:100px;
}
}
p{
margin-bottom:0px !important;
padding-bottom:0px !important;
}
.container{
width:100% !important;
padding:0px !important;
}
section{
width:calc(100%) !important;
overflow-x:hidden;
margin-left:0px;
padding-left:80px;
&.header-loop{
width:calc(100%) !important;
overflow-x:hidden;
overflow-y:visible;
& .carousel-item{
z-index: 1;
}
& .carousel-item::before {
content: ""; /* Cria o pseudoelemento */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right, /* Direção do gradiente */
rgba(0, 0, 0, 0.4) 0%, /* Preto com 50% de opacidade no topo */
rgba(0, 0, 0, 0) 60% /* Totalmente transparente no meio */
);
z-index: -1; /* Coloca o gradiente acima da imagem */
}
}
& .carousel-item {
position: relative; /* Necessário para posicionar o pseudoelemento */
background-size: cover;
background-position: center;
}
}
main{
margin:0px !important;
padding:0px !important;
}
.pll-select{
border-left: 3px solid #FFF;
background: rgba(255, 255, 255, 0.20);
position:fixed;
top:100px;
right:-100px;
padding:5px 10px 5px 10px;
transition:all 0.3s ease;
display:flex;
flex-direction:column;
justify-content: flex-start;
gap:10px;
align-items: flex-start;
z-index:99999999999999999999999999999999999999999999999;
&:hover{
right:0px;
}
& li{
list-style: none;
display: flex;
align-items: center;
gap:10px;
&.current-lang{
cursor:pointer;
}
&.current-lang:after{
content: url("https://dev.patropicomunica.com.br/singulab/wp-content/themes/patropi-singulab/assets/images/arrow_drop_down.svg");
padding-top:5px;
}
& a{
display:flex !important;
align-items: center !important;
justify-content: center;
gap:10px;
}
&:not(.current-lang){
display:none;
}
}
& a{
color:#fff;
}
& img{
width:24px !important;
height:24px !important;
}
}
.riscado{
text-decoration: line-through;
}
/* Menu fixo */
div.header{
position:fixed;
height:100vh;
width: 80px;
border-right: 1px solid #000;
background: rgba(69, 69, 69, 0.80);
display: flex;
flex-direction: column;
z-index:10000;
transition: width 0.3s ease;
overflow: hidden;
& .hide-on-close{
opacity:0;
}
&:hover{
width:400px;
& .hide-on-close{
opacity: 1;
}
& .has-children:before{
display:flex !important;
}
}
& .avatar{
margin-bottom:20px;
transition:all 0.3s ease;
& img{
width:42px !important;
height:42px;
border-radius:50px;
border:3px solid #fff;
background-color:var(--sg-light-gray);
}
&:hover img{
border-color:var(--sg-purple);
}
}
/*
& > old div{
padding-top:20px;
padding-bottom:20px;
display:flex;
flex-direction: column;
align-items: center;
& img{
width:25px !important;
}
}
*/
& .menu-top > li,
& .menu-bottom > li,
& .menu-center > li {
position: relative;
&:before{
content:url('data:image/svg+xml,');
display:none !important;
width:20px;
height:20px;
position: absolute;
right:30px;
top:25px;
z-index:1111111;
transition: transform 0.3s ease;
}
&.has-children.submenu-open:before {
transform:rotate(180deg);
}
& ul.menu-submenu{
display:none;
background: #333;
box-shadow: 0px -20px 40px 0px rgba(0, 0, 0, 0.25) inset;
&.open{
display:block;
}
& small{
position: absolute;
left:75px;
top:4px;
color: #7F7F7F !important;
font-family: "Netflix Sans";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration: Line-through;
}
}
&.active-page:after{
content:"";
display: block;
height:100%;
width:7px;
position:absolute;
top:0px;
left:0px;
background-color:var(--sg-purple);
transition:all 0.3s ease;
}
a{
width:100%;
height:70px;
display:flex;
padding-left:25px;
position:relative;
align-items: center;
gap:25px;
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
transition:background 0.3s ease;
&.avatar{
padding-left:17px;
gap:15px;
& small{
display: block;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
}
&:hover{
background: rgba(217, 217, 217, 0.50);
box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25) inset;
}
}
}
& .menu-top{
flex:1 1 20%;
min-width: 390px;
}
& .menu-center{
flex:0 0 50%;
justify-content: space-between;
min-width: 390px;
}
& .menu-bottom{
flex:1 1 20%;
display: flex;
align-items: flex-end;
min-width: 390px;
}
}
/* episodes list */
.episodes-list{
& .episodes-item{
border-radius: 3px;
height: 150px;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
transition:background-color 0.3s ease;
display:flex;
align-items: center;
gap:0px;
cursor:pointer;
.image:after {
content: url("https://dev.patropicomunica.com.br/singulab/wp-content/themes/patropi-singulab/assets/images/bt-play.svg");
position: absolute; /* Posiciona o ícone dentro da div */
top: 50%; /* Centraliza verticalmente */
left: 50%; /* Centraliza horizontalmente */
transform: translate(-50%, -50%); /* Ajusta para que o ícone fique exatamente no centro */
pointer-events: none; /* Impede que o ícone interfira na interação do usuário com outros elementos */
opacity:0;
transition:all 0.3s ease;
}
&:hover{
background: rgba(255, 255, 255, 0.10);
.image:after {
opacity:1;
}
}
& > .counter{
color: var(--sg-white);
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
flex:0 0 100px
}
& img{
width: 194px;
height: 109px;
}
& .image{
position:relative;
}
& div.time{
color: #7F7F7F;
text-align: right;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
width:1200x;
text-align: right;
flex:0 0 70px;
padding-right:20px;
}
& div.title{
flex: 0 1 100%;
min-width:50%;
padding-left:22px;
& span{
color: #454545;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line:line-through !important;
}
& h3{
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
font-family: var(--sg-font);
}
& p{
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
font-family: var(--sg-font);
}
}
}
}
/* Header */
.header-logo{
display:flex;
gap:14px;
align-items: center;
& span{
color: var(--sg-white);
font-family: var(--sg-font);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 6.4px;
text-transform: uppercase;
}
}
.header-loop{
min-height: 80vh;
padding:0px !important;
& .carousel-inner{
padding-left:0px;
}
& .carousel-item{
height:90vh !important;
display: block;
&.com-shadow:after{
content:"";
width:100%;
height:50px !important;
display:block;
position: absolute;
bottom:0px;
left:0px;
background: linear-gradient(0deg, #1C1B1F, transparent);
}
}
& .col-md-12{
height:90vh;
max-width:100%;
margin:auto;
display:flex;
}
& .header-content{
margin-left:110px;
width:calc( 100% / 13 * 6);
display: flex;
flex-direction:column;
justify-content: center;
gap:20px;
z-inde:1000;
& .header-image{
max-height: 80px;
& img{
height:80px;
}
}
& .header-classes{
display:flex;
gap:5px;
& span{
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
&.dot{
color: var(--sg-medium-gray);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
}
}
& .header-tags{
display: flex;
gap:20px;
& > div{
display:flex;
gap:10px;
align-items: center;
& span{
flex-shrink: 0;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
}
}
& .header-text{
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
& .header-link{
& a{
color: var(--sg-light-green) !important;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
position:relative;
display:flex;
gap:5px;
align-items: center;
&:before{
content:url('data:image/svg+xml,');
width:16px;
height:16px;
display:block;
top:0px;
left:0px;
}
}
}
}
& .carousel .carousel-indicators{
display: flex;
gap:20px;
justify-content: flex-end;
& li{
display: block !important;
width: 60px;
height: 10px;
flex-shrink: 0;
background-color:#454545;
cursor:pointer;
border-radius: var(--sg-border-radius) !important;
cursor:pointer;
&:hover{
background-color:var(--sg-white);
}
&.active{
background-color:var(--sg-purple);
}
}
}
}
.header-info{
display: flex;
gap:15px;
align-items: center;
& span{
color: var(--sg-light-gray);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
&.rated{
width: 36px;
height: 23px;
flex-shrink: 0;
border-radius: 2px;
background: var(--sg-light-gray);
color: #FFF;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.episodes-zoom .header-info span:not(.rated){
color:#7F7F7F;
}
/* Text formating */
.title_section{
color: var(--sg-white);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.info_section{
color: var(--sg-light-gray);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.text_section{
color: var(--sg-white);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.link{
color: var(--sg-light-green); /* links */
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.title-loop{
color: var(--sg-text-white);
font-family: var(--sg-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin:0px;
margin-top:8px;
padding:0px !important;
}
.year-loop{
color: var( --sg-medium-gray) !important;
text-align: right;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: normal;
& span{
color: var( --sg-medium-gray) !important;
text-decoration:line-through;
padding-right:5px;
}
}
.section-loop{
padding-top:30px;
padding-bottom:30px;
overflow: visible;
&.section-boxed{
& .header-section{
margin-left:0px;
}
}
& .header-section{
display: flex;
gap:20px;
align-items: center;
margin:auto;
margin-bottom:30px;
margin-top:25px;
margin-left:70px;
}
& .header-episodios{
display:flex;
justify-content: space-between;
padding-right:35px;
}
&.section-boxed{
max-width:952px;
margin:auto;
padding-left:0px;
padding-right:0px;
overflow: visible;
&.section-boxed-full{
max-width:1300px;
width:80%;
padding-top:50px;
}
& .header-episodios{
padding-right:0px;
margin-left:0px;
margin-right:0px;
}
& h4{
color: var(--sg-link-gray);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top:20px;
margin-bottom:15px;
}
}
& .entry-title{
color: var(--sg-white);
font-family: var(--sg-font);
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: normal;
position: relative;
display:flex;
gap:10px;
& small{
color: var(--sg-medium-gray);
font-family: var(--sg-font);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: strikethrough;
position:absolute;
top:-15px;
}
}
& .entry-text{
text-align: right;
color: var(--sg-white);;
font-family: var(--sg-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
& .entry-taxonomy,
& .entry-episodes{
color: var(--sg-light-gray);;
font-family: var(--sg-font);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
& .entry-mais{
text-align: right;
color: var(--sg-purple);;
font-family: var(--sg-font);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
& .entry-link{
color: #3DF2F2;
font-family: var(--sg-link);;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
gap:5px;
&:before{
content:url('data:image/svg+xml,');
width:16px;
height:16px;
display:block;
top:0px;
left:0px;
}
}
&.section-loop-ordered .col-md-12 > .card{
overflow: hidden !important;
width:305px;
& .counter{
width:185px;
height:256px;
position:absolute;
z-index:0;
display: flex;
justify-content: center;
align-items: center;
color: #000;
font-family: var(--sg-font);
font-size: 256px;
font-style: normal;
font-weight: 600;
line-height: 100%; /* 256px */
background: linear-gradient(180deg, #fff, #66666680);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-stroke: 8px transparent;
transition:all 0.3s ease;
}
& img.ordered-image{
z-index: 0;
height:256px;
min-width:185px !important;
width:fit-content;
margin-left:120px;
}
}
&.section-loop-ordered .carousel-item:hover .card{
& .counter{
color:var(--sg-purple);
-webkit-text-stroke: 8px var(--sg-purple);
}
}
}
/* layout elements */
#main.container{
max-width:100vw !important;
}
.container{
& .full-width{
max-width: 100vw;
}
}
/* Align */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float: right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
.gallery-item {
display: inline-block;
text-align: left;
vertical-align: top;
width: 50%;
}
.gallery-item a,
.gallery-item a:hover,
.gallery-item a:focus {
-webkit-box-shadow: none;
box-shadow: none;
background: none;
display: inline-block;
max-width: 100%;
}
.gallery-item a img {
display: block;
-webkit-transition: -webkit-filter 0.2s ease-in;
transition: -webkit-filter 0.2s ease-in;
transition: filter 0.2s ease-in;
transition: filter 0.2s ease-in, -webkit-filter 0.2s ease-in;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.gallery-item a:hover img,
.gallery-item a:focus img {
-webkit-filter: opacity(60%);
filter: opacity(60%);
}
.gallery-caption {
display: block;
text-align: left;
padding: 0 10px 0 0;
margin-bottom: 0;
}
.gallery-columns-1 .gallery-item {
max-width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
.bypostauthor {
font-weight: bold;
}
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/* Footer logo */
.full-logo-float{
position: fixed;
bottom:35px;
right:35px;
width:160px;
z-index:9999;
& img{
width:100%;
}
}
/* Footer serviços */
#footer{
margin-top:100px;
background-color:#000 !important;
& .col-12 img{
margin-top:60px;
}
& .footer-servicos{
padding-top:60px !important;
& .row{
& .col-12{
margin-top:40px;
margin-bottom:80px;
color: var(--sg-white);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
& .col-sm{
color:var(--sg-link-gray);
display:flex;
flex-direction: column;
color: #7F7F7F;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
& h4{
color: var(--sg-white);
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
display:flex;
align-items: center;
height:40px;
gap:10px;
}
& a{
color:#fff;
}
}
& .col-sm:first-child{
align-items:flex-end;
text-decoration-line:line-through !important;
}
& .col-sm:first-child h4{
color:var(--sg-link-gray);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: strikethrough;
}
}
& .row.row-contato{
& .col-sm:first-child{
color: #7F7F7F;
text-align: right;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration-line:none !important;
}
& .link-social-grupo{
display:flex;
gap:20px;
& .link-social{
}
}
}
}
& .footer-servicos{
& ul{
display:flex;
justify-content: center;
gap:25px;
}
& li{
&::marker{
color: var(--sg-link-gray);
}
&:first-child{
list-style: none;
}
& a{
color: var(--sg-link-gray);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration-line: underline;
}
}
}
}
/* elenco */
.producao-list,
.elenco-list{
display: flex;
gap:20px;
& .producao-item,
& .elenco-item{
cursor:pointer;
& img{
width:88px !important;
height:88px !important;
border:2px solid transparent;
transition:border 0.3s ease;
}
&:hover img{
border:2px solid #454545;
}
}
& .producao-item{
& img{
border: 2px solid rgba(255, 255, 255, 0.50);
border-radius: 50px;
width:42px !important;
height:42px !important;
}
& .title-loop{
text-align: center;
opacity: 0;
}
&:hover .title-loop{
opacity:1;
}
}
}
.tag-list{
margin-top:40px;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
& a{
color:var(--sg-white);
&:hover{
text-decoration:underline;
}
}
& strong{
color:var(--sg-link-gray);
}
}
/* select */
h2.episodios-select-title{
color: var(--sg-white);
text-align: right;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.episodios-select{
position: relative;
&.open:after {
transform: rotate(-180deg);
}
&:after {
content: url('data:image/svg+xml,');
position: absolute;
top: calc(50% - 15px );
right: 20px; /* Distância da borda */
width: 32px; /* Largura da seta personalizada */
height: 32px; /* Altura da seta personalizada */
transition:all 0.3s ease;\
overflow: hidden;
}
& select{
border-radius: 3px;
border: 2px solid var(--sg-white);;
background: rgba(255, 255, 255, 0.00);
min-width: 522px;
height: 55px;
padding:12px 19px;
font-family: var(--sg-font);
color: var(--sg-white);;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* background: url('URL_DA_SETA') no-repeat right center; */
background-size: 20px 20px; /* Define o tamanho da nova seta */
padding-right: 30px; /* Aumenta o espaço à direita para a seta */
& option{
}
}
}
.status_bar{
height: 3px;
width:100%;
display: block;
background-color:transparent;
position: absolute;
top:168px;
& .complete_bar{
background-color:#7B5BF5;
height:3px;
width:0%;
display: block;
}
}
/* icons */
.link-social{
display:block;
width:22px;
height:22px;
&.link-instagram:after{
content:url('data:image/svg+xml,');
}
&.link-podcast:after{
content:url('data:image/svg+xml,');
}
&.link-linkedin:after{
content:url('data:image/svg+xml,');
}
&.link-spotify:after{
content:url('data:image/svg+xml,');
}
&.link-tiktok:after{
content:url('data:image/svg+xml,');
}
&.link-spectrum:after{
content:url('data:image/svg+xml,');
}
&.link-journals:after{
content:url('data:image/svg+xml,');
}
&.link-lab:after{
content:url('data:image/svg+xml,');
}
&.link-formulas:after{
content:url('data:image/svg+xml,');
}
&.link-contato:after{
content:url('data:image/svg+xml,');
}
}
/* Estilização do overlay */
#popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* Fundo preto com 40% de opacidade */
display: flex;
align-items: center; /* Centraliza verticalmente */
justify-content: center; /* Centraliza horizontalmente */
z-index: 9999; /* Sobrepõe todo o conteúdo */
visibility: hidden; /* Inicialmente escondido */
opacity: 0; /* Inicialmente invisível */
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
/* Estilização do popup */
#popup-container {
position: relative;
background-color: black; /* Fundo preto */
color: white; /* Texto branco */
padding: 40px 30px;
border-radius: 8px; /* Bordas arredondadas */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* Sombreamento para "elevar" */
max-width: 500px;
width: 90%; /* Para telas menores */
text-align: center;
}
/* Botão de fechar (X) no canto superior esquerdo */
#close-popup {
position: absolute;
top: 10px;
left: 10px;
background: none;
border: none;
font-size: 18px;
font-weight: bold;
color: white;
cursor: pointer;
z-index: 10; /* Para garantir que fique acima do conteúdo */
}
/* Torna o overlay visível */
#popup-overlay.show {
visibility: visible;
opacity: 1;
}
/* Inputs */
.input-recipt{
display: flex;
position: relative;
&:before{
height:32px;
width:32px;
display:flex;
align-items: center;
justify-content: center;
position: absolute;
top:7px;
left:7px;
}
&.input_keyboard:before{
content: url("assets/images/keyboard_keys.svg");
}
&.input_drafts:before{
content: url("assets/images/drafts.svg");
}
&.input_key_vertical:before{
content: url("assets/images/key_vertical.svg");
}
& .password_toggle{
content: "";
height:32px;
width:32px;
display:block;
position: absolute;
top:7px;
right:7px;
}
& .password_toggle:after{
content: url("assets/images/visibility.svg");
height:32px;
width:32px;
display:flex;
align-items: center;
justify-content: center;
}
& .password_toggle_off:after{
content: url("assets/images/visibility_off.svg");
}
input{
border:0px;
background: #333;
color: #fff !important;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding:10px 10px 10px 40px;
width:100%;
border-radius: 3px;
border: 1px solid #7F7F7F;
&::-webkit-input-placeholder,
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder{
color: #7F7F7F !important;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
&:before{
content:"X";
display:block;
width:30px;
height:30px;
background-color:green;
position:absolute;
}
}
}
.login-error{
color:#EB3942 !important;
}
/* Popups */
#singulab-popup{
img{
width: 95.223px;
height: 24px;
flex-shrink: 0;
}
h2{
color: #FFF;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 40px; /* 125% */
text-align: left !important;
padding:0px !important;
margin:0px !important;
}
p{
color: #FFF;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: left !important;
padding:0px !important;
margin:0px !important;
& a{
color: #8762D9;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
}
form{
display:flex;
flex-direction: column;
gap:15px;
}
.popup-image{
width: 390px;
height: 250px;
position: absolute;
left:0px;
top:0px;
border-radius:10px 10px 0px 0px;
}
#singulab-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99999;
}
#register-popup-content{
display:flex;
}
#login-popup-content{
display:flex;
}
.popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 280px 40px 40px 40px;
border-radius: 8px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
z-index: 999999;
max-width: 400px;
width: 390px;
border-radius: 10px;
background: #333;
flex-direction:column;
gap:20px;
}
.close-popup {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
z-index: 10;
}
}
.loading-spinner{
color:#fff;
}
/* POSTS */
.single-post{
& .single-close{
display:flex;
justify-content:center;
margin-top:54px;
}
& #main.container{
max-width: 950px !important;
margin:auto !important;
& article{
max-width:950px;
}
& .header-loop{
position: absolute;
left:0px;
}
& .header-content {
margin-left: 0px;
width: calc( 100% / 13 * 6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
z-inde: 1000;
margin:auto;
& h1{
order:2;
color: #FFF;
text-align: center;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
}
.button-group.button-group-15{
position:absolute;
left:120px;
top:80vh;
}
.header-classes,
.header-tags{
display: none !important;
}
.header-logo{
order:1;
}
.header-info {
order:4;
}
.header-text{
order:3;
}
.button-group{
order:6;
}
}
& .header-space{
height:100vh;
display: block;
width:100vw;
}
& p{
font-size: 20px;
font-weight: 300;
}
& .entry-content{
max-width:520px;
margin:auto;
& li{
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
& ul{
display:flex;
flex-direction:column;
gap:10px;
margin-top:15px;
margin-bottom:15px;
margin-left:25px;
}
& h2{
color: #FFF;
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
margin-bottom:20px;
}
& h3{
color: #FFF;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 48px;
margin-bottom:20px;
}
& h6{
color: #7B5BF5;
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 20px;
text-transform: uppercase;
margin-bottom:10px;
}
& > p:first-child{
overflow:visible !important;
position:relative;
&::first-letter {
color: #000;
text-align: right;
font-size: 200px;
font-style: normal;
font-weight: 500;
float: left; /* Faz a letra flutuar ao lado do texto */
margin-right: 10px;
line-height: 1;
vertical-align: top;
background: linear-gradient(180deg, #fff, #66666680);
background-size: auto;
background-clip: border-box;
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-stroke: 8px transparent;
padding:5px;
}
}
}
}
& header.entry_header{
padding-top:90px;
display:flex;
flex-direction: column;
gap:37px;
margin-bottom:86px;
& .entry_title{
color: #FFF;
text-align: center;
font-family: "Netflix Sans";
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
& .entry_autor{
& .entry_name{
color: #FFF;
font-family: "Netflix Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
text-align: center;
}
& .entry_cargo{
color: #FFF;
text-align: center;
font-family: "Netflix Sans";
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 20px; /* 125% */
text-transform: uppercase;
}
}
}
}
.wp-block-cover{
width:950px;;
overflow:visible !important;
padding:0px;
left:-41.5%;
min-height: unset !important;
margin-bottom:5em;
margin-top:3em;
/*! width: auto !important; */
& img{
position: relative !important;
}
& .wp-block-cover__background{
display:none;
}
.wp-block-cover__inner-container{
position: absolute;
height:100%;
width:100% !important;
& p:first-child{
position:absolute;
color: #FFF;
font-size: 16px !important;;
font-style: normal;
font-weight: 300 !important;;
line-height: normal !important;;
width: 196px !important;;
}
& p:last-child{
position:absolute;
bottom:-2em;
}
}
&.is-position-bottom-left{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:0;
transform: translateY(120%);
text-align: right !important;
}
}
&.is-position-bottom-right{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:0;
right:0px;
transform: translateY(120%);
text-align: right !important;
}
}
&.is-position-top-left{
& p:first-child{
border-bottom: 3px solid #7B5BF5;
padding-bottom:10px !important;
top:0;
left:0px;
transform: translateY(-120%);
text-align: left !important;
}
}
&.is-position-top-right{
& p:first-child{
border-bottom: 3px solid #7B5BF5;
padding-bottom:10px !important;
top:0;
right:0px;
transform: translateY(-120%);
text-align: right !important;
}
}
&.imagem-vertical{
width:520px;
left:0px;
& img{
width:520px;
}
&.is-position-center-left{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:50%;
transform: translate(-110%,-50%);
text-align: left !important;
}
}
&.is-position-center-right{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:50%;
right:0px;
transform: translate(110%,-50%);
text-align: left !important;
}
}
&.is-position-bottom-left{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:0;
transform: translateX(-110%);
text-align: right !important;
}
}
&.is-position-bottom-right{
& p:first-child{
border-top: 3px solid #7B5BF5;
padding-top:10px;
bottom:0;
right:0px;
transform: translateX(110%);
text-align: left !important;
}
}
&.is-position-top-left{
& p:first-child{
border-bottom: 3px solid #7B5BF5;
padding-bottom:10px !important;
top:0;
left:0px;
transform: translateX(-110%);
text-align: right !important;
}
}
&.is-position-top-right{
& p:first-child{
border-bottom: 3px solid #7B5BF5;
padding-bottom:10px !important;
top:0;
right:0px;
transform: translateX(110%);
text-align: left !important;
}
}
}
}