422 lines
10 KiB
CSS
422 lines
10 KiB
CSS
/*----------------------------- Cabe<62>alho inicial do site com os iconis externos -------------------------------------- */
|
||
|
||
/* Define as margens e preenchimentos padr<64>o para o corpo e a p<>gina HTML */
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Estilos para o Bloco_1 */
|
||
.Bloco_1 {
|
||
position: absolute;
|
||
/* Define a posi<73><69>o absoluta do bloco */
|
||
top: 0vh;
|
||
/* Alinha o topo do bloco */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
justify-content: flex-end;
|
||
/* Alinha os itens <20> direita */
|
||
width: 100%;
|
||
/* Define a largura total */
|
||
backdrop-filter: blur(1vw);
|
||
/* Aplica um efeito de desfoque ao fundo */
|
||
background-color: #3535352a;
|
||
/* Cor de fundo com transpar<61>ncia */
|
||
|
||
/* Defini<6E><69>o de preenchimento e altura */
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
height: 3.9vh;
|
||
z-index: 99999;
|
||
/* Z-index para posicionamento em camadas */
|
||
}
|
||
|
||
.Bloco_1 a {
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Estilos para a classe icon2 */
|
||
.icon2 {
|
||
width: 1.6vw;
|
||
/* Largura do <20>cone */
|
||
padding-right: 20px;
|
||
/* Preenchimento <20> direita */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
.icon2:hover {
|
||
transform: scale(1.5);
|
||
/* Aumenta o tamanho do <20>cone ao passar o mouse */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
/*----------------------------- Fechamento do Cabe<62>alho inicial da p<>gina -------------------------------------- */
|
||
|
||
|
||
|
||
/*----------------------------- Fontes externas que est<73>o sendo usadas no site -------------------------------------- */
|
||
|
||
|
||
@font-face {
|
||
font-family: fonteTi;
|
||
src: url(../Acessts/Fontes/zekton\ rg.otf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: fonteTa;
|
||
src: url(../Acessts/Fontes/MADE\ Evolve\ Sans\ Bold\ \(PERSONAL\ USE\).otf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: fonteseta;
|
||
src: url(../Acessts/Fontes/venus\ rising\ rg.otf);
|
||
}
|
||
|
||
/*----------------------------- Fechamento das fontes que est<73>o sendo usados no site -------------------------------------- */
|
||
|
||
/*----------------------------- Todos os elementos dedicados para o menu -------------------------------------- */
|
||
|
||
/* Estilos para o Bloco_nav_1 */
|
||
.Bloco_nav_1 {
|
||
position: absolute;
|
||
/* Define a posi<73><69>o absoluta do bloco */
|
||
top: 8vh;
|
||
/* Alinha o topo do bloco */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
flex-direction: row;
|
||
/* Define a dire<72><65>o dos itens como linha */
|
||
justify-content: space-around;
|
||
/* Distribui o espa<70>o ao redor dos itens */
|
||
backdrop-filter: blur(1vw);
|
||
/* Aplica um efeito de desfoque ao fundo */
|
||
width: 100%;
|
||
/* Define a largura total */
|
||
background-color: #3535352a;
|
||
/* Cor de fundo com transpar<61>ncia */
|
||
padding: 2px 0px;
|
||
/* Preenchimento superior e inferior */
|
||
height: 10vh;
|
||
/* Altura do bloco */
|
||
z-index: 99;
|
||
/* Z-index para posicionamento em camadas */
|
||
}
|
||
|
||
/* Estilos para os links no menu */
|
||
.Bloco_nav_1 a {
|
||
text-decoration: none;
|
||
/* Remove a decora<72><61>o do link */
|
||
}
|
||
|
||
/* Estilos para o Bloco_nav_2 */
|
||
.Bloco_nav_2 {
|
||
width: 60vw;
|
||
/* Largura do bloco */
|
||
order: 2;
|
||
/* Define a ordem do bloco */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
align-content: center;
|
||
/* Alinha o conte<74>do verticalmente */
|
||
align-items: center;
|
||
/* Alinha os itens verticalmente */
|
||
}
|
||
|
||
/* Estilos para os itens do menu */
|
||
.nav_bloco_iten {
|
||
display: inline-block;
|
||
/* Define o display como bloco */
|
||
width: 6vw;
|
||
/* Largura do item */
|
||
padding-left: 5vw;
|
||
/* Preenchimento <20> esquerda */
|
||
font-size: 1.3vw;
|
||
/* Tamanho da fonte */
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
justify-content: space-around;
|
||
/* Distribui o espa<70>o ao redor dos itens */
|
||
color: white;
|
||
/* Cor do texto */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
.nav_bloco_iten:hover {
|
||
color: rgb(0, 89, 255);
|
||
/* Cor do texto ao passar o mouse */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
/* Estilos para a classe Logo */
|
||
.Logo {
|
||
order: 1;
|
||
/* Define a ordem do elemento */
|
||
width: 15vw;
|
||
/* Largura do elemento */
|
||
}
|
||
|
||
/* Estilos para o Botao1 */
|
||
.Botao1 {
|
||
order: 3;
|
||
/* Define a ordem do elemento */
|
||
position: relative;
|
||
/* Define a posi<73><69>o como relativa */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
align-items: center;
|
||
/* Alinha os itens verticalmente */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
.Botao1 button {
|
||
outline: none;
|
||
/* Remove o contorno do bot<6F>o */
|
||
background: none;
|
||
/* Remove o plano de fundo do bot<6F>o */
|
||
border: none;
|
||
/* Remove a borda do bot<6F>o */
|
||
color: white;
|
||
/* Cor do texto */
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
font-size: 1.2vw;
|
||
/* Tamanho da fonte */
|
||
border: 2px solid white;
|
||
/* Borda do bot<6F>o */
|
||
padding: 1vh 1vw;
|
||
/* Preenchimento do bot<6F>o */
|
||
}
|
||
|
||
.Botao1 a {
|
||
text-decoration: none;
|
||
/* Remove a decora<72><61>o do link */
|
||
}
|
||
|
||
.Botao1:hover {
|
||
transform: scale(0.8);
|
||
/* Reduz o tamanho ao passar o mouse */
|
||
cursor: pointer;
|
||
/* Altera o cursor ao passar o mouse */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
.Botao1 button:hover {
|
||
border: 2px solid rgb(0, 89, 255);
|
||
/* Borda do bot<6F>o ao passar o mouse */
|
||
color: rgb(0, 89, 255);
|
||
/* Cor do texto ao passar o mouse */
|
||
}
|
||
|
||
/*----------------------------- Fechamento do menu -------------------------------------- */
|
||
|
||
/*----------------------------- Rodap<61> final do site -------------------------------------- */
|
||
|
||
/* Estilos para o Bloco_Rodape1 */
|
||
.Bloco_Rodape1 {
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
flex-direction: row;
|
||
/* Define a dire<72><65>o dos itens como linha */
|
||
justify-content: space-around;
|
||
/* Distribui o espa<70>o ao redor dos itens */
|
||
background-color: #3457a2;
|
||
/* Cor de fundo */
|
||
padding: 20px;
|
||
/* Preenchimento */
|
||
}
|
||
|
||
/* Estilos para a Coluna_Rod_1 */
|
||
.Coluna_Rod_1 {
|
||
width: 25vw;
|
||
/* Largura da coluna */
|
||
border-left: 1px solid white;
|
||
/* Borda <20> esquerda */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
flex-direction: column;
|
||
/* Define a dire<72><65>o dos itens como coluna */
|
||
justify-content: center;
|
||
/* Alinha os itens verticalmente */
|
||
align-items: center;
|
||
/* Alinha os itens horizontalmente */
|
||
align-content: center;
|
||
/* Alinha o conte<74>do verticalmente */
|
||
}
|
||
|
||
/* Estilos para as Coluna_Rod_2, Coluna_Rod_3, Coluna_Rod_4 */
|
||
.Coluna_Rod_2,
|
||
.Coluna_Rod_3,
|
||
.Coluna_Rod_4 {
|
||
width: 20vw;
|
||
/* Largura das colunas */
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
justify-content: center;
|
||
/* Alinha os itens horizontalmente */
|
||
align-items: center;
|
||
/* Alinha os itens verticalmente */
|
||
align-content: center;
|
||
/* Alinha o conte<74>do verticalmente */
|
||
border-left: 1px solid white;
|
||
/* Borda <20> esquerda */
|
||
}
|
||
|
||
/* Estilos para os links nas colunas */
|
||
.Coluna_Rod_2 a,
|
||
.Coluna_Rod_3 a,
|
||
.Coluna_Rod_4 a {
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
color: white;
|
||
/* Cor do texto */
|
||
text-decoration: none;
|
||
/* Remove a decora<72><61>o do link */
|
||
}
|
||
|
||
/* Estilos para as listas nas colunas */
|
||
.Coluna_Rod_2 li,
|
||
.Coluna_Rod_3 li,
|
||
.Coluna_Rod_4 li {
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
font-size: 1vw;
|
||
/* Tamanho da fonte */
|
||
list-style: none;
|
||
/* Remove os marcadores de lista */
|
||
transition: 0.2s ease;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
/* Estilos para os itens da lista ao passar o mouse */
|
||
.Coluna_Rod_2 li:hover,
|
||
.Coluna_Rod_3 li:hover,
|
||
.Coluna_Rod_4 li:hover {
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
font-size: 1vw;
|
||
/* Tamanho da fonte */
|
||
color: #11bb9c;
|
||
/* Cor do texto ao passar o mouse */
|
||
list-style: none;
|
||
/* Remove os marcadores de lista */
|
||
transition: 0.2s ease;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
/* Estilos para os t<>tulos nas colunas */
|
||
.Coluna_Rod_2 h2,
|
||
.Coluna_Rod_3 h2,
|
||
.Coluna_Rod_4 h2 {
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
text-align: center;
|
||
/* Alinhamento do texto no centro */
|
||
color: white;
|
||
/* Cor do texto */
|
||
}
|
||
|
||
/* Estilos para a sub_coluna_Rod_1_1 */
|
||
.sub_coluna_Rod_1_1 img {
|
||
padding: auto;
|
||
/* Preenchimento autom<6F>tico */
|
||
width: 10vw;
|
||
/* Largura da imagem */
|
||
font-size: 15px;
|
||
/* Tamanho da fonte */
|
||
color: white;
|
||
/* Cor do texto */
|
||
}
|
||
|
||
/* Estilos para a sub_coluna_Rod_1_2 */
|
||
.sub_coluna_Rod_1_2 {
|
||
display: flex;
|
||
/* Define o display como flex<65>vel */
|
||
align-items: center;
|
||
/* Alinha os itens verticalmente */
|
||
justify-content: center;
|
||
/* Alinha os itens horizontalmente */
|
||
align-content: center;
|
||
/* Alinha o conte<74>do verticalmente */
|
||
}
|
||
|
||
/* Estilos para a classe icon2_rod */
|
||
.icon2_rod {
|
||
width: 1.6vw;
|
||
/* Largura do <20>cone */
|
||
gap: 160vw;
|
||
/* Espa<70>amento entre os <20>cones */
|
||
margin-top: 2vh;
|
||
/* Margem superior */
|
||
cursor: pointer;
|
||
/* Cursor do mouse */
|
||
padding: 5px;
|
||
/* Preenchimento */
|
||
border: solid 2px white;
|
||
/* Borda */
|
||
background-color: #3457a2;
|
||
/* Cor de fundo */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
.icon2_rod:hover {
|
||
transform: scale(1.2);
|
||
/* Aumenta o tamanho ao passar o mouse */
|
||
transition: ease 1s;
|
||
/* Transi<73><69>o suave */
|
||
}
|
||
|
||
/* Estilos para os par<61>grafos dentro de Bloco_Rodape1 */
|
||
.Bloco_Rodape1 p {
|
||
padding: auto;
|
||
/* Preenchimento autom<6F>tico */
|
||
font-size: 1vw;
|
||
/* Tamanho da fonte */
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
margin-left: 20px;
|
||
/* Margem esquerda */
|
||
color: white;
|
||
/* Cor do texto */
|
||
}
|
||
|
||
/* Estilos para o Bloco_Rodape2 */
|
||
.Bloco_Rodape2 {
|
||
background-color: #3457a2;
|
||
/* Cor de fundo */
|
||
border-top: solid 1px white;
|
||
/* Borda superior */
|
||
padding: 5px;
|
||
/* Preenchimento */
|
||
}
|
||
|
||
/* Estilos para os t<>tulos dentro de Bloco_Rodape2 */
|
||
.Bloco_Rodape2 h2 {
|
||
padding: auto;
|
||
/* Preenchimento autom<6F>tico */
|
||
font-size: 1vw;
|
||
/* Tamanho da fonte */
|
||
font-family: fonteTi;
|
||
/* Fonte */
|
||
color: white;
|
||
/* Cor do texto */
|
||
text-align: center;
|
||
/* Alinhamento do texto no centro */
|
||
}
|
||
|
||
.error-message {
|
||
color: red;
|
||
margin-top: 1vh;
|
||
font-size: 1vw;
|
||
font-family: fonteTi;
|
||
}
|
||
|
||
|
||
/*----------------------------- Fechamento final do site -------------------------------------- */ |