MediaWiki:Common.css
Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Edge: Pressione Ctrl enquanto clica Recarregar, ou pressione Ctrl-F5.
- Opera: Pressione Ctrl-F5.
/* =====================================
FARMLAND WIKI - COMMON.CSS
===================================== */
/* =============================================
AJUSTE FINAL DO LOGO SIDEBAR
============================================= */
/* Força o tamanho no contêiner principal do logo */
#p-logo, .mw-wiki-logo, .ps-logo {
width: 140px ; /* Ajuste essa largura para caber na sua barra lateral */
height: auto ;
display: block ;
margin: 10px auto ;
padding: 0 ;
}
/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain ;
width: 100% ;
height: 140px ; /* Ajuste a altura proporcional aqui */
}
/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px ;
height: auto ;
}
/* -----------------------------
FONTE E FUNDO PADRÃO
----------------------------- */
body {
font-family: "Segoe UI", Arial, sans-serif; /* FONTE PADRÃO IGUAL AO PRINT */
background-color: #ffffff; /* FUNDO BRANCO IGUAL AO PRINT */
}
/* -----------------------------
REMOVE LARGURA QUEBRADA PADRÃO
----------------------------- */
.mw-body {
max-width: 100%; /* LARGURA MÁXIMA PARA EVITAR QUEBRA */
}
/* -----------------------------
CONTAINER PRINCIPAL DA PÁGINA
----------------------------- */
.farmland-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}
/* =========================
BANNER PRINCIPAL
========================= */
.farmland-banner {
height: 220px; /* ALTURA DO BANNER IGUAL AO PRINT */
background: #9b1c1c; /* COR DE FUNDO DO BANNER */
border-radius: 10px; /* CANTOS ARREDONDADOS */
display: flex; /* FLEX PARA CENTRALIZAR CONTEÚDO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
justify-content: center; /* CENTRALIZA HORIZONTALMENTE */
color: #ffffff; /* COR DO TEXTO DO BANNER */
font-size: 32px; /* TAMANHO DA FONTE DO BANNER */
font-weight: bold; /* NEGRITO */
margin-bottom: 20px; /* ESPAÇAMENTO ABAIXO DO BANNER */
}
/* =========================
BOTÃO DE EVENTO
========================= */
.farmland-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}
.farmland-event-button a {
background: #c62828; /* COR DE FUNDO DO BOTÃO */
color: #fff; /* COR DO TEXTO */
padding: 12px 30px; /* PADDING DO BOTÃO */
font-size: 20px; /* TAMANHO DA FONTE DO BOTÃO */
text-decoration: none; /* REMOVE SUBLINHADO */
border-radius: 6px; /* CANTOS LEVEMENTE ARREDONDADOS */
transition: background 0.3s; /* TRANSIÇÃO SUAVE AO HOVER */
}
.farmland-event-button a:hover {
background: #a11f1f; /* COR DE FUNDO AO PASSAR O MOUSE */
}
/* =====================================
IMAGENS SIMPLES COM HOVER (SEM GRID)
===================================== */
/* Container das imagens com hover */
.hover-images {
display: flex; /* FLEX PARA LINHAS */
flex-wrap: wrap; /* QUEBRA AUTOMÁTICA DE LINHA */
gap: 16px; /* ESPAÇAMENTO ENTRE IMAGENS */
justify-content: center; /* CENTRALIZA HORIZONTALMENTE */
align-items: center; /* ALINHA VERTICALMENTE */
margin: 20px 0; /* MARGEM SUPERIOR E INFERIOR */
}
/* Remove qualquer estilo padrão do MediaWiki */
.hover-images .thumb,
.hover-images .image {
background: none; /* REMOVE FUNDO */
border: none; /* REMOVE BORDA */
box-shadow: none; /* REMOVE SOMBRA */
margin: 0; /* REMOVE MARGEM */
padding: 0; /* REMOVE PADDING */
}
/* Imagens dentro do container hover */
.hover-images img {
display: block; /* EXIBE COMO BLOCO */
border-radius: 6px; /* CANTOS ARREDONDADOS */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* TRANSIÇÃO SUAVE */
}
/* Efeito ao passar o mouse nas imagens */
.hover-images img:hover {
transform: translateY(-6px) scale(1.03); /* LEVE MOVIMENTO E AUMENTO */
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25); /* SOMBRA SUAVE */
}
/* Efeito especial para galerias com hover */
.farmland-hover-gallery img:hover {
transform: scale(1.08) translateY(-6px); /* AMPLIAÇÃO + LEVE ELEVAÇÃO */
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
cursor: pointer; /* CURSOR DE MÃO */
}
/* =========================
TÍTULOS DE SEÇÃO
========================= */
.farmland-section-title {
font-size: 22px; /* TAMANHO DA FONTE IGUAL AO PRINT */
margin: 25px 0 15px; /* MARGEM SUPERIOR E INFERIOR */
border-bottom: 2px solid #ccc; /* LINHA INFERIOR */
}
/* =========================
GUIAS
========================= */
.farmland-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}
/* Ícones dentro das guias */
.farmland-guide .icon {
width: 28px; /* LARGURA DO ÍCONE */
height: 28px; /* ALTURA DO ÍCONE */
background: #ccc; /* FUNDO CINZA */
margin-right: 8px; /* ESPAÇAMENTO ENTRE ÍCONE E TEXTO */
}
/* =========================
ANIMAÇÕES - CARDS PRINCIPAIS
========================= */
/* Card container */
.farmland-card {
transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
cursor: pointer; /* CURSOR DE MÃO */
}
/* Efeito hover do card */
.farmland-card:hover {
transform: translateY(-6px); /* LEVE ELEVAÇÃO */
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); /* SOMBRA SUAVE */
background: #ffffff; /* FUNDO BRANCO */
}
/* Imagem dentro do card */
.farmland-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}
/* Efeito hover na imagem do card */
.farmland-card:hover .img {
transform: scale(1.05); /* LEVE AMPLIAÇÃO */
}
/* =========================
CONTEÚDOS EXCLUSIVOS
========================= */
/* Container geral */
.farmland-exclusive-wrapper {
margin-top: 30px; /* MARGEM SUPERIOR */
}
/* Grid dos conteúdos exclusivos */
.farmland-exclusive-grid {
display: grid; /* GRID PARA ITENS */
grid-template-columns: repeat(3, 1fr); /* 3 COLUNAS IGUAIS */
gap: 15px; /* ESPAÇAMENTO ENTRE ITENS */
}
/* Item individual */
.farmland-exclusive-item {
border: 1px solid #cfcfcf; /* BORDA LEVE */
background: #f7f7f7; /* FUNDO CINZA CLARO */
transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
}
/* Efeito hover no item */
.farmland-exclusive-item:hover {
transform: translateY(-5px); /* LEVE ELEVAÇÃO */
box-shadow: 0 8px 18px rgba(0,0,0,0.18); /* SOMBRA SUAVE */
}
/* Imagem do item exclusivo */
.farmland-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}
/* Título do item exclusivo */
.farmland-exclusive-title {
padding: 10px; /* ESPAÇAMENTO INTERNO */
font-weight: bold; /* TEXTO EM NEGRITO */
text-align: center; /* CENTRALIZA TEXTO */
background: #ffffff; /* FUNDO BRANCO */
}
/* =========================
CARDS
========================= */
/* Container geral de cards */
.farmland-cards {
display: flex; /* FLEX PARA CARDS */
gap: 14px; /* ESPAÇAMENTO ENTRE CARDS */
justify-content: center; /* CENTRALIZA HORIZONTALMENTE */
flex-wrap: wrap; /* QUEBRA DE LINHA AUTOMÁTICA */
}
/* Card individual */
.farmland-card {
width: 160px; /* LARGURA DO CARD */
background: #ffffff; /* FUNDO BRANCO */
border: 1px solid #cfd6dd; /* BORDA LEVE */
border-radius: 2px; /* CANTOS LEVEMENTE ARREDONDADOS */
overflow: hidden; /* ESCONDE EXCESSO DE CONTEÚDO */
text-align: center; /* CENTRALIZA TEXTO */
font-family: Arial, sans-serif; /* FONTE PADRÃO */
}
/* Imagem do card */
.farmland-img {
width: 100%; /* OCUPA TODA A LARGURA */
height: 100px; /* ALTURA IGUAL AO PRINT */
background-size: cover; /* IMAGEM COBRE TODO O ESPAÇO */
background-position: center; /* CENTRALIZA IMAGEM */
background-repeat: no-repeat; /* SEM REPETIÇÃO */
}
/* Link do card */
.farmland-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}
.farmland-card a:hover {
text-decoration: underline; /* SUBLINHADO AO PASSAR O MOUSE */
}
/* =========================
CLASSES TABLE
========================= */
/* Tabela de classes */
.classes-table {
width: 100%; /* OCUPA 100% DA LARGURA */
border-collapse: collapse; /* REMOVE ESPAÇAMENTO ENTRE CELULAS */
text-align: center; /* CENTRALIZA TEXTO */
background: #fff; /* FUNDO BRANCO */
}
/* Células da tabela */
.classes-table td {
border: 1px solid #cfcfcf; /* BORDA LEVE */
padding: 10px; /* ESPAÇAMENTO INTERNO */
vertical-align: middle; /* ALINHA TEXTO NO CENTRO */
}
/* Nome da classe */
.class-name {
color: #2a5db0; /* COR AZUL */
font-weight: bold; /* TEXTO NEGRITO */
}
/* =========================
BARRAS DE TÍTULO
========================= */
/* Barra padrão */
.row-title td {
font-weight: bold; /* TEXTO NEGRITO */
padding: 6px; /* PADDING INTERNO */
border: 1px solid #bdbdbd; /* BORDA LEVE */
}
/* Barra inicial */
.row-title.initial td {
background: #fdecc8; /* FUNDO LARANJA CLARO */
}
/* Barras de cores alternativas */
.row-title.c1 td {
background: #f6ef99; /* FUNDO AMARELO CLARO */
}
.row-title.c2 td {
background: #f2ddc7; /* FUNDO BEGE CLARO */
}
.row-title.trans td {
background: #dce8dc; /* FUNDO VERDE CLARO */
}
.row-title.expand td {
background: #f6ef99; /* FUNDO AMARELO CLARO */
}
.row-title.expand2 td {
background: #f2ddc7; /* FUNDO BEGE CLARO */
}
/* ===============================
LAYOUT DAS CLASSES – FARMLAND
=============================== */
/* Grid principal das classes */
.classes-grid {
display: grid; /* GRID PARA ITENS */
gap: 0; /* SEM ESPAÇAMENTO ENTRE ITENS */
border-left: 1px solid #cfcfcf; /* BORDA ESQUERDA */
border-top: 1px solid #cfcfcf; /* BORDA SUPERIOR */
margin-bottom: 25px; /* MARGEM INFERIOR */
background: #ffffff; /* FUNDO BRANCO */
}
/* Configurações por quantidade de colunas */
.classes-grid-2 { grid-template-columns: repeat(2, 1fr); }
.classes-grid-4 { grid-template-columns: repeat(4, 1fr); }
.classes-grid-6 { grid-template-columns: repeat(6, 1fr); }
.classes-grid-10 { grid-template-columns: repeat(5, 1fr); }
/* Item individual da classe */
.class-item {
text-align: center; /* CENTRALIZA TEXTO */
padding: 20px 10px; /* ESPAÇAMENTO INTERNO */
border-right: 1px solid #cfcfcf; /* BORDA DIREITA */
border-bottom: 1px solid #cfcfcf; /* BORDA INFERIOR */
background: #ffffff; /* FUNDO BRANCO */
font-size: 14px; /* TAMANHO DA FONTE */
line-height: 1.4; /* ALTURA DE LINHA */
}
/* Imagem dentro do item da classe */
.class-item img {
display: inline-block; /* EXIBE EM LINHA */
margin: 0 2px; /* MARGEM LATERAL PEQUENA */
vertical-align: middle; /* ALINHA AO MEIO */
max-width: 100%; /* NÃO ULTRAPASSA CONTAINER */
height: auto; /* ALTURA PROPORCIONAL */
}
/* =========================
TÍTULOS DE CLASSES
========================= */
/* Títulos genéricos */
h2 {
margin: 0;
padding: 6px;
text-align: center;
font-weight: bold;
}
/* Classes de cores específicas (substitui :contains) */
.classe-inicial-title { background: #f6e7c6; border: 1px solid #e0c99c; }
.classe-1-title { background: #f2ea8c; border: 1px solid #e0d87c; }
.classe-2-title { background: #efd7c4; border: 1px solid #dcc2a9; }
.classe-transcendental-title { background: #dce6d8; border: 1px solid #c5d4c1; }
.classe-expandida-title { background: #f2ea8c; border: 1px solid #e0d87c; }
/* =========================
RESPONSIVIDADE DAS CLASSES
========================= */
/* Para telas até 1200px */
@media (max-width: 1200px) {
.classes-grid-6 { grid-template-columns: repeat(4, 1fr); }
.classes-grid-10 { grid-template-columns: repeat(5, 1fr); }
}
/* Para telas até 900px */
@media (max-width: 900px) {
.classes-grid-6 { grid-template-columns: repeat(3, 1fr); }
.classes-grid-10 { grid-template-columns: repeat(3, 1fr); }
.classes-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Para telas até 600px */
@media (max-width: 600px) {
.classes-grid-6,
.classes-grid-10,
.classes-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Para telas até 400px */
@media (max-width: 400px) {
.classes-grid-6,
.classes-grid-10,
.classes-grid-4,
.classes-grid-2 { grid-template-columns: 1fr; }
}
/* ================================================= */
/* SISTEMA DE CLASSES - WIKI FARMLAND */
/* ================================================= */
/* -----------------------------
RESET E CONTAINER
----------------------------- */
.farmland-classes-system {
max-width: 1000px; /* LARGURA MÁXIMA DO SISTEMA */
margin: 20px auto; /* CENTRALIZA HORIZONTALMENTE */
padding: 0 15px; /* PADDING LATERAL */
font-family: -apple-system, BlinkMacSystemFont, /* FONTE PADRÃO */
'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}
/* -----------------------------
TÍTULO DA PÁGINA
----------------------------- */
.farmland-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}
.farmland-page-title h1 {
color: #2c3e50; /* COR DO TÍTULO */
font-size: 32px; /* TAMANHO DO TÍTULO */
margin-bottom: 15px; /* MARGEM INFERIOR */
font-weight: 700; /* NEGRITO */
}
.farmland-page-title p {
color: #666; /* COR DO SUBTÍTULO */
font-size: 16px; /* TAMANHO DA FONTE */
line-height: 1.6; /* ALTURA DE LINHA */
max-width: 800px; /* LARGURA MÁXIMA DO TEXTO */
margin: 0 auto; /* CENTRALIZA TEXTO */
}
/* -----------------------------
GRADE PRINCIPAL (3 COLUNAS)
----------------------------- */
.farmland-main-grid {
display: grid; /* GRID PARA CARDS */
grid-template-columns: repeat(3, 1fr); /* 3 COLUNAS IGUAIS */
gap: 25px; /* ESPAÇAMENTO ENTRE CARDS */
margin-bottom: 40px; /* MARGEM INFERIOR */
}
/* Responsividade da grade principal */
@media (max-width: 900px) {
.farmland-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}
@media (max-width: 600px) {
.farmland-main-grid {
grid-template-columns: 1fr; /* 1 COLUNA EM TELAS PEQUENAS */
}
}
/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farmland-class-card {
background: white; /* FUNDO DO CARD */
border-radius: 12px; /* CANTOS ARREDONDADOS */
overflow: hidden; /* ESCONDE EXCESSO */
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* SOMBRA SUAVE */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* TRANSIÇÃO SUAVE */
cursor: pointer; /* CURSOR DE MÃO */
border: 2px solid transparent; /* BORDA TRANSPARENTE INICIAL */
position: relative; /* POSICIONAMENTO RELATIVO */
}
.farmland-class-card:hover {
transform: translateY(-8px); /* LEVE ELEVAÇÃO */
box-shadow: 0 12px 24px rgba(0,0,0,0.15); /* SOMBRA AO HOVER */
border-color: #3498db; /* BORDA AZUL AO HOVER */
}
.farmland-class-card.active {
border-color: #2980b9; /* BORDA AZUL ESCURO */
background: #f8fafc; /* FUNDO LEVE DIFERENCIADO */
}
/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farmland-class-image {
height: 220px; /* ALTURA IGUAL AO PRINT */
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%); /* GRADIENTE DE FUNDO */
display: flex; /* FLEX PARA CENTRALIZAR IMAGENS */
align-items: center;
justify-content: center;
gap: 10px; /* ESPAÇAMENTO ENTRE IMAGENS */
padding: 20px; /* PADDING INTERNO */
overflow: hidden;
}
/* -----------------------------
IMAGENS COM EFEITO HOVER
----------------------------- */
.farmland-img-hover {
transition: all 0.4s ease; /* TRANSIÇÃO SUAVE */
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* SOMBRA LEVE */
max-height: 180px; /* ALTURA MÁXIMA */
object-fit: contain; /* PROPORÇÃO CORRETA */
}
.farmland-class-card:hover .farmland-img-hover {
transform: scale(1.08); /* AMPLIAÇÃO AO HOVER */
filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2)); /* SOMBRA MAIOR AO HOVER */
}
/* -----------------------------
NOME DA CLASSE
----------------------------- */
.farmland-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}
.farmland-class-title {
display: block;
color: #2c3e50; /* COR DO TÍTULO */
font-size: 20px; /* TAMANHO DA FONTE */
font-weight: 700; /* NEGRITO */
margin-bottom: 5px; /* MARGEM INFERIOR */
}
.farmland-class-subtitle {
display: block;
color: #7f8c8d; /* COR DO SUBTÍTULO */
font-size: 14px; /* TAMANHO DA FONTE */
font-weight: 500; /* PESO MÉDIO */
text-transform: uppercase; /* MAIÚSCULAS */
letter-spacing: 1px; /* ESPAÇAMENTO ENTRE LETRAS */
}
/* ================================================= */
/* ÁREA DE EXPANSÃO (ABRE AO CLICAR) */
/* ================================================= */
/* Container da área expansível */
.farmland-expansion-area {
display: none; /* OCULTO POR PADRÃO */
background: white; /* FUNDO BRANCO */
border-radius: 12px; /* CANTOS ARREDONDADOS */
margin: 20px 0 40px; /* MARGEM SUPERIOR E INFERIOR */
box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* SOMBRA LEVE */
border: 1px solid #e0e0e0; /* BORDA CINZA CLARO */
animation: farmlandSlideDown 0.4s ease-out; /* ANIMAÇÃO AO ABRIR */
}
/* Área ativa (quando clicada) */
.farmland-expansion-area.active {
display: block; /* EXIBE CONTEÚDO */
}
/* Animação de abertura */
@keyframes farmlandSlideDown {
from {
opacity: 0;
transform: translateY(-15px); /* LEVE SUBIDA INICIAL */
}
to {
opacity: 1;
transform: translateY(0); /* POSIÇÃO FINAL */
}
}
/* Conteúdo interno da expansão */
.farmland-expansion-content {
padding: 30px; /* PADDING INTERNO */
}
/* Título da expansão */
.farmland-expansion-title {
color: #2c3e50; /* COR DO TÍTULO */
font-size: 28px; /* TAMANHO DA FONTE */
margin-bottom: 15px; /* MARGEM INFERIOR */
padding-bottom: 15px; /* PADDING INFERIOR */
border-bottom: 2px solid #3498db; /* LINHA AZUL */
font-weight: 700; /* NEGRITO */
}
/* Descrição da expansão */
.farmland-expansion-description {
color: #555; /* COR DO TEXTO */
font-size: 16px; /* TAMANHO DA FONTE */
line-height: 1.7; /* ALTURA DE LINHA */
margin-bottom: 30px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 1px solid #eee; /* LINHA LEVE */
}
/* ================================================= */
/* GRADE DE SUB-CLASSES (DENTRO DA EXPANSÃO) */
/* ================================================= */
/* Grid de sub-classes */
.farmland-subclasses-grid {
display: grid; /* GRID PARA ITENS */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* COLUNAS FLEXÍVEIS */
gap: 25px; /* ESPAÇAMENTO ENTRE CARDS */
margin-top: 20px; /* MARGEM SUPERIOR */
}
/* Card individual de sub-classe */
.farmland-subclass-card {
background: #f8fafc; /* FUNDO LEVE */
border-radius: 10px; /* CANTOS ARREDONDADOS */
padding: 20px; /* PADDING INTERNO */
transition: all 0.3s ease; /* TRANSIÇÃO SUAVE */
border: 1px solid #e2e8f0; /* BORDA CLARA */
display: flex; /* FLEX PARA IMAGEM + INFO */
align-items: center;
gap: 20px; /* ESPAÇAMENTO ENTRE IMAGEM E INFO */
}
/* Hover no card de sub-classe */
.farmland-subclass-card:hover {
background: white; /* FUNDO BRANCO AO HOVER */
border-color: #3498db; /* BORDA AZUL */
box-shadow: 0 6px 12px rgba(52, 152, 219, 0.15); /* SOMBRA AO HOVER */
transform: translateY(-3px); /* LEVE ELEVAÇÃO */
}
/* Imagem da sub-classe */
.farmland-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}
.farmland-subclass-img {
width: 100px;
height: 100px; /* TAMANHO FIXO */
object-fit: contain; /* MANDA PROPORÇÃO CORRETA */
transition: transform 0.3s ease; /* TRANSIÇÃO SUAVE */
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); /* SOMBRA LEVE */
}
/* Hover na imagem */
.farmland-subclass-card:hover .farmland-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}
/* Informações da sub-classe */
.farmland-subclass-info {
flex-grow: 1; /* OCUPA ESPAÇO RESTANTE */
}
/* Título da sub-classe */
.farmland-subclass-info h3 {
margin: 0 0 8px 0; /* MARGEM INFERIOR */
font-size: 18px; /* TAMANHO DO TÍTULO */
font-weight: 700; /* NEGRITO */
}
/* Link do título da sub-classe */
.farmland-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}
.farmland-subclass-info h3 a:hover {
color: #3498db; /* AZUL AO PASSAR O MOUSE */
}
/* Descrição da sub-classe */
.farmland-subclass-info p {
color: #666; /* COR DO TEXTO */
font-size: 14px; /* TAMANHO DA FONTE */
line-height: 1.5; /* ALTURA DE LINHA */
margin: 0;
}
/* ================================================= */
/* ANIMAÇÕES EXTRAS E MELHORIAS */
/* ================================================= */
/* -----------------------------
EFEITO DE CARREGAMENTO PARA AS IMAGENS
----------------------------- */
.farmland-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}
.farmland-class-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: loadingShimmer 1.5s infinite;
pointer-events: none;
}
@keyframes loadingShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* -----------------------------
SETA INDICADORA NO CARD ATIVO
----------------------------- */
.farmland-class-card.active::after {
content: '▼';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
color: #2980b9;
font-size: 20px;
animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
from { transform: translateX(-50%) translateY(0); }
to { transform: translateX(-50%) translateY(5px); }
}
/* -----------------------------
BOTÃO DE FECHAR (OPCIONAL)
----------------------------- */
.farmland-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: #e74c3c;
color: white;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
z-index: 10;
}
.farmland-close-btn:hover {
background: #c0392b;
}
/* ================================================= */
/* RESPONSIVIDADE ADICIONAL */
/* ================================================= */
/* TABLETS MENORES */
@media (max-width: 768px) {
.farmland-class-image {
height: 180px;
padding: 15px;
}
.farmland-img-hover {
max-height: 150px;
}
.farmland-expansion-content {
padding: 20px;
}
.farmland-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}
/* CELULARES */
@media (max-width: 480px) {
.farmland-classes-system {
padding: 0 10px;
}
.farmland-page-title h1 {
font-size: 24px;
}
.farmland-page-title p {
font-size: 14px;
}
.farmland-main-grid {
gap: 15px;
}
.farmland-class-image {
height: 150px;
}
.farmland-img-hover {
max-height: 120px;
}
.farmland-class-name {
padding: 15px;
}
.farmland-class-title {
font-size: 18px;
}
.farmland-subclasses-grid {
grid-template-columns: 1fr;
}
}
/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farmland-classes-system {
background: transparent;
}
.farmland-class-card,
.farmland-expansion-area,
.farmland-subclass-card {
background: #2d3748;
border-color: #4a5568;
}
.farmland-class-name,
.farmland-expansion-content {
background: #2d3748;
}
.farmland-class-title,
.farmland-expansion-title,
.farmland-subclass-info h3 a {
color: #e2e8f0;
}
.farmland-class-subtitle,
.farmland-expansion-description,
.farmland-subclass-info p {
color: #a0aec0;
}
.farmland-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}
.farmland-subclass-card:hover {
background: #4a5568;
}
}
/* ================================================= */
/* GRID DE CLASSES */
/* ================================================= */
.classes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
margin: 20px 0;
}
/* ITEM INDIVIDUAL */
.class-item {
border: 1px solid #cfcfcf;
background: #f7f7f7;
padding: 15px 10px;
text-align: center;
transition: transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
}
.class-item:hover {
transform: translateY(-6px);
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
background: #ffffff;
}
/* IMAGENS DAS CLASSES */
.class-item img {
margin: 0 2px;
vertical-align: middle;
}
/* NOME DA CLASSE */
.class-item b,
.class-item strong {
display: block;
margin-top: 8px;
font-size: 14px;
}
/* ================================================= */
/* LINKS EM TODO O CARD */
/* ================================================= */
/* Torna o card inteiro clicável */
.class-link {
text-decoration: none; /* Remove underline */
color: inherit; /* Mantém cor do card */
display: block; /* Ocupa todo o card */
}
.class-link:hover {
text-decoration: none;
color: inherit;
}
/* ================================================= */
/* ANIMAÇÃO E INTERAÇÃO – CLASSES */
/* ================================================= */
/* Card individual */
.class-item {
position: relative;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
/* Hover no card */
.class-item:hover {
transform: translateY(-6px);
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
background: #fdfdfd;
}
/* Animação nas imagens do card */
.class-item img {
transition: transform 0.25s ease;
}
.class-item:hover img {
transform: scale(1.08);
}
/* Remove underline e mantém todo o card clicável */
.class-item a {
text-decoration: none;
color: inherit;
display: block;
}
/* ================================================= */
/* PÁGINA DE CLASSES – FARMLAND */
/* ================================================= */
/* Container principal da página */
.job-page {
max-width: 750px;
margin: 0 0 40px 0; /* remove auto horizontal */
padding-left: 0; /* remove recuo herdado */
}
/* Header da página */
.job-header {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: #f6f7f9;
border: 1px solid #dcdcdc;
margin-bottom: 25px;
}
/* Título da página */
.job-title h1 {
margin: 0;
font-size: 28px;
}
.job-title p {
margin: 0;
color: #666;
font-weight: bold;
}
/* Seções da página */
.job-section {
margin-bottom: 25px;
}
.job-section h2 {
font-size: 20px;
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 4px;
}
.job-section h3 {
font-size: 16px;
margin-top: 15px;
}
/* Lista de itens */
.job-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 20px;
margin: 10px 0;
}
.job-list li {
list-style: disc;
margin-left: 18px;
}
/* ================================================= */
/* TABELA DE ATRIBUTOS */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}
.farmland-attr-table th {
background: #f2ea8c;
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farmland-attr-table td {
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
/* Hover nas linhas da tabela */
.farmland-attr-table tbody tr:hover {
background: #f9f9f9;
}
/* ================================================= */
/* PÁGINA DA CLASSE – APRENDIZ */
/* ================================================= */
/* Container principal */
.aprendiz-page {
max-width: 1200px;
margin: 25px auto;
padding: 10px;
}
/* Conteúdo principal: texto + infobox */
.aprendiz-content {
display: flex;
gap: 24px;
}
/* -----------------------------
TEXTO PRINCIPAL
----------------------------- */
.aprendiz-text {
flex: 3;
background: #ffffff;
padding: 18px;
border: 1px solid #cfcfcf;
font-size: 14px;
line-height: 1.6;
}
.aprendiz-text h2 {
margin-top: 25px;
padding-bottom: 5px;
border-bottom: 2px solid #e0e0e0;
}
/* -----------------------------
INFOBOX LATERAL
----------------------------- */
.aprendiz-infobox {
flex: 1;
background: #f8f8f8;
border: 1px solid #cfcfcf;
font-size: 13px;
}
/* Título da infobox */
.infobox-title {
background: #f2ea8c;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 16px;
}
/* Área de imagens dentro da infobox */
.infobox-images {
text-align: center;
padding: 10px;
}
/* Tabela da infobox */
.infobox-table {
width: 100%;
border-collapse: collapse;
}
.infobox-table th,
.infobox-table td {
border-top: 1px solid #cfcfcf;
padding: 6px;
text-align: left;
}
.infobox-table th {
background: #eeeeee;
width: 45%;
}
/* =========================
RESPONSIVIDADE
========================= */
@media (max-width: 800px) {
.aprendiz-content {
flex-direction: column;
}
}
/* ================================================= */
/* INFOBOX – APRENDIZES (CLONE) */
/* ================================================= */
/* Container da infobox */
.aprendiz-infobox {
width: 300px;
background: #f8f8f8;
border: 1px solid #cfcfcf;
font-size: 13px;
float: right;
margin: 0 0 10px 10px;
font-family: Arial, sans-serif;
}
/* Cabeçalho da infobox */
.aprendiz-header {
border-radius: 8px;
color: #0645ad;
padding: 4px;
text-align: center;
font-weight: bold;
line-height: 2;
display: flex;
justify-content: center;
align-items: center;
gap: 3px;
}
/* Imagem principal */
.aprendiz-main-image {
text-align: center;
padding: 10px;
background: #e6e6e6;
}
/* Título das seções da infobox */
.aprendiz-section-title {
background: #4a4a4a;
color: #fff;
text-align: center;
font-weight: bold;
padding: 4px;
margin-top: 5px;
}
.aprendiz-section-title.dark {
background: #333;
}
/* Tabs */
.aprendiz-tabs {
display: flex;
gap: 10px;
padding: 6px;
font-size: 12px;
}
.aprendiz-tabs .tab {
color: #0645ad;
cursor: pointer;
}
.aprendiz-tabs .active {
font-weight: bold;
text-decoration: underline;
}
/* Sprites */
.aprendiz-sprites {
text-align: center;
padding: 6px;
}
/* Tabela de informações */
.aprendiz-info-table {
width: 100%;
border-collapse: collapse;
}
.aprendiz-info-table th {
background: #f0f0f0;
border: 1px solid #ccc;
padding: 4px;
width: 40%;
text-align: left;
}
.aprendiz-info-table td {
border: 1px solid #ccc;
padding: 4px;
}
.aprendiz-info-table a {
color: #0645ad;
text-decoration: none;
}
.aprendiz-info-table a:hover {
text-decoration: underline;
}
/* Ícones de armas na infobox */
.aprendiz-weapons img {
margin: 2px;
padding: 2px;
border: 1px solid #ddd;
background: #fff;
border-radius: 4px;
width: 24px;
height: 24px;
}
/* Tabela de bônus */
.aprendiz-bonus-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.aprendiz-bonus-table th {
color: #0645ad;
font-weight: bold;
padding: 4px;
border: 1px solid #ccc;
}
.aprendiz-bonus-table td {
padding: 4px;
border: 1px solid #ccc;
}
/* ================================================= */
/* TABELA DE ATRIBUTOS */
/* ================================================= */
.farmland-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}
.farmland-attr-table th {
background: #f2ea8c;
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farmland-attr-table td {
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farmland-attr-table tbody tr:hover {
background: #f9f9f9;
}
/* ================================================= */
/* CARDS PRINCIPAIS */
/* ================================================= */
.farmland-cards {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* Card individual */
.farmland-card {
width: 160px;
background: #ffffff;
border: 1px solid #cfd6dd;
text-align: center;
font-family: Arial, sans-serif;
padding-bottom: 8px;
}
/* Área da imagem do card */
.farmland-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Imagem do MediaWiki */
.farmland-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Mantém proporção e centraliza */
}
/* Texto do card */
.farmland-card a {
display: block;
padding: 6px 4px;
font-weight: bold;
color: #0033cc;
text-decoration: none;
}
.farmland-card a:hover {
text-decoration: underline;
}
/* ================================================= */
/* HOVER EM IMAGENS */
/* ================================================= */
.img-hover a img {
border: none;
outline: none;
box-shadow: none;
}
.hover-images {
display: flex;
gap: 16px;
align-items: center;
}
.img-hover {
display: inline-block;
}
.img-hover img {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.img-hover img:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
/* ============================= */
/* TESTE SCRIPTS - CLASSES inicio*/
/* ============================= */
/* =====================================
SLIDER HORIZONTAL – CONTEÚDOS EXCLUSIVOS
===================================== */
/* Container principal do carrossel */
.farmland-carousel {
position: relative; /* Permite posicionar setas dentro */
display: flex; /* Organiza os elementos horizontalmente */
align-items: center; /* Centraliza verticalmente conteúdo e setas */
}
/* Botões de navegação (setas) */
.nav-btn {
background: rgba(0,0,0,0.5); /* Transparência inicial */
color: white;
border-radius: 50%; /* Circulares */
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s; /* Suaviza mudanças visuais */
}
/* Hover nos botões deixa a seta totalmente preta */
.nav-btn:hover {
background: #000;
}
/* Wrapper que segura a faixa rolável */
.exclusive-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden; /* Esconde overflow horizontal */
margin: 20px 0;
}
/* Área rolável (slider real) */
.exclusive-slider {
display: flex; /* Mantém imagens lado a lado */
gap: 18px; /* Espaçamento entre slides */
overflow-x: auto; /* Permite rolagem horizontal */
scroll-behavior: smooth; /* Rolagem suave */
padding: 10px 40px; /* Espaçamento interno */
}
/* Remove barra de rolagem no Webkit (Chrome/Safari) */
.exclusive-slider::-webkit-scrollbar {
display: none;
}
/* Remove barra de rolagem em Firefox */
.exclusive-slider {
scrollbar-width: none;
}
/* Cada slide individual */
.exclusive-slide {
flex: 0 0 auto; /* Impede que o slide encolha ou cresça */
}
/* Imagens dentro do slide */
.exclusive-slide img {
display: block;
border-radius: 6px; /* Cantos arredondados */
transition: transform 0.25s ease, box-shadow 0.25s ease; /* Animação suave */
}
/* Hover sobre a imagem do slide */
.exclusive-slide img:hover {
transform: translateY(-6px) scale(1.03); /* Leve elevação + zoom */
box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Sombra realista */
}
/* Setas de navegação absolutas */
.exclusive-arrow {
position: absolute;
top: 50%; /* Centraliza verticalmente */
transform: translateY(-50%);
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
width: 34px;
height: 60px;
cursor: pointer;
font-size: 28px;
z-index: 5; /* Fica acima dos slides */
}
/* Setas esquerda/direita */
.exclusive-arrow.left { left: 0; }
.exclusive-arrow.right { right: 0; }
/* Hover nas setas aumenta contraste */
.exclusive-arrow:hover {
background: rgba(0,0,0,0.85);
}
/* ================================================= */
/* CARROSSEL – CONTAINER GERAL */
/* ================================================= */
/* Container geral do carrossel */
.farmland-carousel {
position: relative;
width: 100%; /* Ocupa 100% da largura do container pai */
overflow: hidden; /* Esconde overflow horizontal */
margin: 25px 0;
}
/* Faixa de imagens do carrossel */
.farmland-carousel-track {
display: flex; /* Alinha imagens horizontalmente */
gap: 20px; /* Espaço entre imagens */
overflow-x: auto; /* Permite scroll horizontal */
scroll-behavior: smooth; /* Rolagem suave */
padding: 10px 40px;
}
/* Remove barra de rolagem feia do track */
.farmland-carousel-track::-webkit-scrollbar {
display: none;
}
/* Imagens dentro do track */
.farmland-carousel-track img {
display: block;
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover suave */
}
/* Hover nas imagens dentro do track */
.img-hover img:hover {
transform: translateY(-6px) scale(1.04); /* Leve elevação + zoom */
box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Sombra realista */
}
/* ================================================= */
/* SETAS DO CARROSSEL */
/* ================================================= */
.carousel-btn {
position: absolute;
top: 50%; /* Centraliza verticalmente */
transform: translateY(-50%);
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 50%; /* Círculo */
cursor: pointer;
z-index: 10; /* Fica acima do conteúdo */
}
/* Posicionamento das setas esquerda/direita */
.carousel-btn.left { left: 5px; }
.carousel-btn.right { right: 5px; }
/* Hover aumenta contraste */
.carousel-btn:hover {
background: rgba(0,0,0,0.85);
}
.farmland-carousel {
position: relative; /* Permite posicionar setas e elementos dentro */
width: 100%; /* Ocupa toda largura do container pai */
overflow: hidden; /* Esconde conteúdo que extrapola horizontalmente */
margin: 30px auto; /* Centraliza horizontalmente e adiciona espaçamento vertical */
}
/* Wrapper interno do carrossel */
.carousel-wrapper {
display: flex; /* Alinha os itens horizontalmente */
gap: 20px; /* Espaço entre os itens */
overflow-x: hidden; /* Oculta barra de rolagem, JS controla movimentação */
scroll-behavior: smooth; /* Rolagem suave ao usar setas via JS */
padding: 40px 0; /* Espaço vertical para que itens ativos (scale) não sejam cortados */
white-space: nowrap; /* Garante que os itens fiquem em linha única */
}
/* Cada item do carrossel */
.carousel-item {
flex: 0 0 auto; /* Impede que o item encolha ou cresça */
transition: transform 0.4s ease, opacity 0.4s ease; /* Suaviza zoom e opacidade */
}
/* Item ativo (em destaque) */
.carousel-item.active {
opacity: 1; /* Totalmente visível */
transform: scale(1.1); /* Leve zoom para destacar */
}
/* Título do item (abaixo da imagem) */
.carousel-title {
margin-top: 8px;
font-weight: bold;
}
/* Botões de navegação */
.nav-btn {
position: absolute; /* Fixa posição dentro do carrossel */
top: 50%; /* Centraliza verticalmente */
transform: translateY(-50%);
font-size: 30px;
cursor: pointer;
z-index: 10; /* Fica acima dos itens */
user-select: none; /* Impede seleção de texto */
padding: 10px;
}
/* Posições específicas das setas */
.left-btn { left: 0; }
.right-btn { right: 0; }
/* ================================================= */
/* CARD – CONTEÚDOS EXCLUSIVOS */
/* ================================================= */
/* (Sem regras específicas ainda, mas é placeholder para estilo dos cards) */
/* ================================================= */
/* HIDE – SEÇÕES DOBRÁVEIS (accordion) */
/* ================================================= */
/* Container da seção de classe */
.job-section {
margin-bottom: 15px;
border: 1px solid #ddd; /* Delimita a seção */
border-radius: 5px; /* Cantos arredondados */
overflow: hidden; /* Esconde conteúdo excedente */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Estilo do título da seção (summary da tag <details>) */
.job-section summary {
padding: 12px 15px;
cursor: pointer; /* Indica que é clicável */
font-weight: bold;
list-style: none; /* Remove a seta padrão do browser */
transition: background 0.3s; /* Suaviza mudança de cor no hover */
outline: none; /* Remove contorno padrão ao focar */
}
/* Hover no título da seção */
.job-section summary:hover {
filter: brightness(0.95); /* Leve escurecimento ao passar o mouse */
}
/* Cores específicas por categoria de classe */
.human-job summary { background-color: #fdf2d9; } /* Bege */
.expanded-job summary { background-color: #eef2ad; } /* Amarelo */
.doram-job summary { background-color: #e9f5e9; } /* Verde */
/* Container interno da seção (conteúdo que abre) */
.job-content {
display: flex; /* Alinha conteúdo horizontalmente */
align-items: center; /* Centraliza verticalmente */
justify-content: space-around; /* Espaço igual entre elementos */
background: #f9f9f9;
padding: 20px;
flex-wrap: wrap; /* Quebra linha em telas menores */
gap: 15px; /* Espaçamento entre elementos */
}
/* Estilo das transclasses (sub-classes) */
.trans-name {
color: #2e7d32; /* Verde destaque */
font-weight: bold;
}
//* ================================================= */
/* ÁRVORE DE CLASSE */
/* ================================================= */
/* Container geral da árvore de classes */
.job-container {
font-family: sans-serif; /* Fonte legível e neutra */
max-width: 649px; /* Limita largura do conteúdo */
margin: 10px auto; /* Centraliza horizontalmente e adiciona espaçamento vertical */
}
/* Cada seção da árvore (accordion) */
.job-section {
border: 1px solid #ddd; /* Borda discreta */
margin-bottom: 5px; /* Espaço entre seções */
border-radius: 4px; /* Cantos arredondados */
overflow: hidden; /* Esconde conteúdo que ultrapassa o container */
}
/* Título da seção (clicável) */
.job-section summary {
padding: 10px 15px; /* Espaçamento interno */
cursor: pointer; /* Indica que é clicável */
font-weight: bold;
background: #fdf2d9; /* Cor de fundo padrão (bege) */
color: #5a4a3a; /* Cor do texto */
list-style: none; /* Remove setinha padrão do browser */
outline: none; /* Remove contorno ao focar */
}
/* Hover no título */
.job-section summary:hover {
background: #f9e8bc; /* Leve escurecimento quando passa o mouse */
}
/* Seção aberta */
.job-section[open] summary {
border-bottom: 1px solid #ddd; /* Linha separadora */
background: #f4e6c5; /* Fundo diferenciado para aberto */
}
/* Headers diferenciados (cores por categoria ou evolução) */
.expand-header summary {
background: #eef2ad; /* Amarelo claro */
color: #4a4a2a; /* Texto mais escuro */
}
.expand-header summary:hover {
background: #e5eb8d; /* Alteração suave no hover */
}
/* Conteúdo interno da seção */
.content {
display: flex; /* Alinha os elementos em linha */
align-items: center; /* Centraliza verticalmente */
justify-content: center; /* Centraliza horizontalmente */
background: #fff; /* Fundo branco */
padding: 20px; /* Espaçamento interno */
flex-wrap: wrap; /* Permite quebra de linha em telas menores */
gap: 15px; /* Espaço entre elementos */
}
/* Caixa de evolução (sub-itens dentro da árvore) */
.evo-box {
border: 1px dashed #bbb; /* Borda tracejada */
padding: 12px; /* Espaçamento interno */
background: #fafafa; /* Fundo levemente cinza */
border-radius: 5px; /* Cantos arredondados */
display: flex;
flex-direction: column; /* Itens empilhados verticalmente */
gap: 10px; /* Espaçamento interno entre itens */
}
/* Linha horizontal dentro da caixa de evolução */
.row {
display: flex; /* Alinha itens horizontalmente */
align-items: center; /* Centraliza verticalmente */
gap: 10px; /* Espaçamento entre elementos da linha */
}
/* Nome de transclasses / sub-classes */
.trans {
color: #2e7d32; /* Verde para destaque */
font-weight: bold;
}
/* Setas indicativas */
.arrow {
color: #888; /* Cinza neutro */
font-weight: bold;
}
/* ================================================= */
/* CARROSSEL INFOBOX CLASSES */
/* ================================================= */
/* Container principal do carrossel da Infobox */
.carrossel-farmland {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto ; /* Centraliza o carrossel */
overflow: hidden; /* Esconde imagens fora do frame */
position: relative; /* Permite animação e posicionamento interno */
display: block;
}
/* Wrapper interno que desliza */
.carrossel-slider {
display: flex; /* Itens alinhados horizontalmente */
width: 400px; /* Largura total (2 imagens de 200px cada) */
animation: animaCarrossel 10s infinite ease-in-out; /* Animação automática do carrossel */
}
/* Cada item do carrossel */
.carrossel-item {
width: 200px; /* Largura fixa igual ao container */
flex-shrink: 0; /* Evita que encolha */
text-align: center; /* Centraliza imagem e título */
}
/* Imagem dentro do item */
.carrossel-item img {
max-width: 200px; /* Largura máxima */
height: auto; /* Mantém proporção */
margin: 0 auto; /* Centraliza horizontalmente */
}
/* Keyframes da animação do carrossel */
@keyframes animaCarrossel {
0%, 45% { transform: translateX(0); } /* Começa parado */
50%, 95% { transform: translateX(-200px); } /* Desliza para a próxima imagem */
100% { transform: translateX(0); } /* Retorna ao início */
}
/* ================================================= */
/* GUIA MARÉ INFERNAL */
/* ================================================= */
/* Container geral do guia */
.guia-mare {
background: #f9f9f9; /* Fundo neutro */
border: 1px solid #aaa; /* Borda clara */
padding: 15px; /* Espaçamento interno */
border-radius: 8px; /* Cantos arredondados */
}
/* Cabeçalho do guia */
.header-mare {
background: linear-gradient(90deg, #4b0082, #800000); /* Gradiente roxo/bermelo */
color: white; /* Texto branco */
padding: 10px; /* Espaçamento */
border-radius: 5px; /* Cantos arredondados */
font-weight: bold;
font-size: 1.2em; /* Texto maior */
text-align: center;
margin-bottom: 10px; /* Espaço abaixo do header */
}
/* Caixas de regra individual */
.regra-box {
border-left: 5px solid #800000; /* Barra lateral vermelha */
background: #fff5f5; /* Fundo rosa bem claro */
padding: 10px; /* Espaço interno */
margin: 10px 0; /* Espaço entre caixas */
}
/* Títulos de mapas ou seções internas */
.map-title {
font-weight: bold;
color: #800000; /* Vermelho */
border-bottom: 1px solid #ddd; /* Linha de separação */
margin-bottom: 5px;
display: block; /* Garante que fique em linha própria */
}
/* ================================================= */
/* CSS DOS COMANDOS */
/* ================================================= */
/* Cabeçalho de comandos */
.header-comandos {
background: linear-gradient(90deg, #333, #555); /* Gradiente escuro */
color: white;
padding: 10px;
border-radius: 5px;
font-weight: bold;
font-size: 1.2em;
text-align: center;
margin-bottom: 10px;
}
/* Código de comando */
.cmd-code {
color: #800000; /* Vermelho */
font-weight: bold;
background: #eee; /* Fundo claro */
padding: 2px 5px; /* Espaçamento interno */
border-radius: 3px;
font-family: monospace; /* Fonte de código */
}
/* Código VIP */
.vip-code {
color: #b8860b; /* Dourado */
font-weight: bold;
background: #fffdf5;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
border: 1px solid #daa520; /* Borda dourada */
}
/* ================================================= */
/* ÁRVORE DE HABILIDADES – DORAM */
/* ================================================= */
/* Container geral da árvore */
.doram-container {
position: relative; /* Permite posicionamento absoluto das caixas */
width: 100%;
max-width: 850px; /* Limita tamanho */
height: 900px; /* Altura fixa para a árvore */
background-color: #f9f9f9;
font-family: sans-serif;
margin: 0 auto; /* Centraliza horizontalmente */
overflow-x: auto; /* Scroll horizontal se ultrapassar largura */
}
/* Cada caixa de habilidade */
.doram-skill {
position: absolute; /* Posicionamento livre dentro do container */
display: flex;
align-items: center;
width: 170px;
height: 42px;
background: linear-gradient(180deg, #5baaff 0%, #3090f0 100%); /* Azul gradiente */
border: 1px solid #2b80dd;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
color: white;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
z-index: 10;
padding: 0 5px;
box-sizing: border-box;
}
/* Área do ícone da habilidade */
.doram-icon {
width: 32px;
height: 32px;
background: rgba(0,0,0,0.2);
border-radius: 4px;
margin-right: 8px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
/* Remove margens de imagens */
.doram-icon img {
margin: 0;
padding: 0;
background: none;
}
/* Nome da habilidade */
.doram-name {
line-height: 1.1;
flex: 1;
}
/* Etiquetas de nível */
.doram-lvl {
position: absolute;
background: white;
color: black;
font-size: 11px;
font-weight: bold;
padding: 1px 4px;
border-radius: 4px;
z-index: 11;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* Posições padrões das etiquetas */
.lvl-bottom { bottom: -22px; left: 50%; transform: translateX(-50%); } /* Centro embaixo */
.lvl-right { top: 12px; right: -40px; } /* Lateral direita */
/* ================================================= */
/* LINHAS CONECTORAS (CSS PURO) */
/* ================================================= */
/* Faz as colunas ficarem lado a lado */
.skill-grid-aprendiz {
display: flex;
gap: 30px; /* Espaço entre as colunas */
align-items: flex-start;
}
/* Estilo de cada linha de habilidade */
.skill-item {
display: flex;
align-items: center;
margin-bottom: 5px;
padding-left: 8px;
min-width: 200px;
}
/* Cores das barrinhas laterais (conforme Foto 2) */
.s-passiva { border-left: 5px solid #90EE90; } /* Verde */
.s-ofensiva { border-left: 5px solid #FFB6C1; } /* Vermelho/Rosa */
.s-suporte { border-left: 5px solid #B0E0E6; } /* Azul claro */
.s-outros { border-left: 5px solid #BEBEBE; } /* Cinza */
.skill-link {
margin-left: 10px;
font-size: 14px;
}
/* --- FIM DO CSS --- */
/* Container da Infobox à direita */
.skill-box-right {
float: right;
width: 350px;
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
margin: 0 0 1em 1em;
padding: 0;
font-family: sans-serif;
font-size: 90%;
}
/* Cabeçalhos cinzas da Infobox e da Tabela */
.skill-header-main {
background-color: #eaecf0;
border-bottom: 1px solid #aaaaaa;
padding: 5px;
text-align: center;
font-weight: bold;
}
.skill-table-subhead {
background-color: #d1d4d9;
font-weight: bold;
text-align: center;
}
/* Tabela de Níveis à esquerda */
.skill-levels-table {
border-collapse: collapse;
width: 50%;
float: left;
margin-bottom: 1em;
}
.skill-levels-table th, .skill-levels-table td {
border: 1px solid #aaaaaa;
padding: 4px 8px;
font-size: 13px;
}
.skill-levels-table th {
background-color: #eaecf0;
}
/* Ajustes de texto e imagem */
.skill-img-frame {
background: white;
padding: 10px;
text-align: center;
}
.skill-label {
background-color: #eaecf0;
font-weight: bold;
width: 30%;
border-top: 1px solid #aaaaaa;
}
.skill-value {
background-color: #fdfdfd;
border-top: 1px solid #aaaaaa;
}
/* Container para centralizar os cards principais */
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Centraliza horizontalmente */
align-items: center; /* Alinha verticalmente se houver alturas diferentes */
flex-wrap: wrap; /* Faz os cards pularem de linha em telas menores */
gap: 15px; /* Espaçamento entre os cards */
max-width: 1000px; /* MESMA LARGURA do seu hr-guides-wrapper */
margin: 20px auto; /* Centraliza o bloco na página e dá espaçamento vertical */
}
/* Garante que as imagens dentro dos cards fiquem responsivas */
.farmland-main-cards-container .img-hover img {
display: block;
height: auto;
border-radius: 4px; /* Opcional: deixa as bordas levemente arredondadas */
}
/* Container que agrupa o título e os cards de destaque */
.farmland-highlights-wrapper {
max-width: 1000px; /* Alinhado com o Painel de Conhecimento */
margin: 30px auto; /* Centraliza o bloco todo e dá espaçamento vertical */
}
/* Garante que o título "Destaques" alinhe à esquerda do bloco de 1000px ou centralize */
.farmland-highlights-wrapper .farmland-section-title {
text-align: left; /* Mantenha 'center' se preferir o título no meio */
margin-bottom: 15px;
padding-left: 5px;
}
/* Grid que centraliza os cards de destaque */
.farmland-highlights-grid {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center; /* ESTA LINHA FAZ A CENTRALIZAÇÃO */
}
/* Ajuste fino para os cards de destaque */
.farmland-highlights-grid .img-hover img {
border-radius: 6px;
transition: transform 0.3s ease;
}
.farmland-main-cards-container {
display: flex;
justify-content: center; /* Tenta centralizar primeiro */
flex-wrap: wrap;
gap: 20px;
max-width: 1000px;
margin: 20px 25%; /* O 'auto' centraliza o bloco inteiro na página */
/* AJUSTE FINO: Se ainda parecer para a esquerda,
aumente o padding-left abaixo para empurrar para a direita */
padding-left: 10px;
box-sizing: border-box;
}
/* --- BOTAO SUBIR TOPO DA PAGINA --- */
/* Botão Voltar ao Topo */
#back-to-top {
display: none; /* Escondido por padrão */
position: fixed;
bottom: 20px;
right: 20px;
z-index: 100;
padding: 10px 15px;
background-color: #3366cc;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
#back-to-top:hover {
background-color: #2a4b8d;
text-decoration: none;
}
.hr-guides-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 10px;
}
.hr-guide-item {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.25s ease;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
}
.hr-guide-item img {
transition: transform 0.25s ease;
}
.hr-guide-item a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
.hr-guide-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 25px rgba(0,0,0,0.6);
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
border: 1px solid rgba(255,255,255,0.1);
}
.hr-guide-item:hover img {
transform: scale(1.15) rotate(5deg);
}
.hr-guide-item:hover a {
color: #00bfff;
}
/* --- END - CONTINUA --- */
/* =========================
GUIAS – Farmland
========================= */
/* Container geral das guias */
.hr-guides-wrapper {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 25px auto; /* CENTRALIZA E MARGEM SUPERIOR */
background: #ffffff; /* FUNDO BRANCO */
}
/* Título das guias */
.hr-guides-title {
text-align: center; /* CENTRALIZA TEXTO */
font-weight: bold; /* NEGRITO */
font-size: 14px; /* TAMANHO DA FONTE */
letter-spacing: 1px; /* ESPAÇAMENTO ENTRE LETRAS */
padding: 6px 0; /* ESPAÇAMENTO INTERNO */
margin-bottom: 10px; /* MARGEM INFERIOR */
border-top: 1px solid #cfcfcf;
border-bottom: 1px solid #cfcfcf;
}
/* TESTE PAGINA TESTE SCRIPTS*/
.ro-wave-wrapper {
text-align: center;
width: 100%;
margin: 80px auto;
display: block;
}
.ro-item-wave {
display: inline-block ;
vertical-align: top ;
margin: 0 -8px ;
}
.ro-circle-wave {
width: 80px ;
height: 80px ;
border: 3px solid #f38d5f ;
border-radius: 50% ;
background: #fff ;
overflow: hidden ;
position: relative ;
display: block ;
}
.ro-circle-wave img {
width: 100% ;
height: 100% ;
object-fit: cover ;
}
/* Ajustes de altura para o efeito de onda */
.ro-pos-1, .ro-pos-9, .ro-pos-10 { margin-top: 110px ; }
.ro-pos-2, .ro-pos-8 { margin-top: 70px ; }
.ro-pos-3, .ro-pos-7 { margin-top: 30px ; }
.ro-pos-4, .ro-pos-6 { margin-top: -10px ; }
.ro-pos-5 { margin-top: -50px ; }
/* Container de largura total controlada */
.everlight-nav-container {
display: flex;
justify-content: center;
flex-wrap: wrap; /* Permite quebrar linha se a tela for pequena */
gap: 8px; /* Espaço menor entre botões */
margin: 10px 0;
width: 100%; /* Garante que não ultrapasse o limite do conteúdo */
box-sizing: border-box;
}
/* Card Profissional Compacto */
.nav-card-compact {
background: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
border: 1px solid #333;
border-radius: 4px;
padding: 6px 12px; /* Reduzido para ficar do tamanho do anterior */
flex: 1; /* Distribui o espaço igualmente */
min-width: 110px; /* Tamanho mínimo para não esmagar o texto */
max-width: 160px; /* Tamanho máximo para não vazar */
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.nav-card-compact a {
color: #efefef !important;
text-decoration: none !important;
font-weight: bold;
font-size: 0.85em; /* Fonte levemente menor para caber melhor */
display: block;
white-space: nowrap; /* Impede que o texto quebre linha dentro do botão */
}
/* Hover mais discreto para manter o profissionalismo */
.nav-card-compact:hover {
background: #252525;
transform: translateY(-2px);
border-color: #666;
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
/* ===========================
CARROSSEL FARMLAND - VERSÃO CORRIGIDA (1 IMAGEM POR VEZ)
=========================== */
#farmlandCarousel {
position: relative;
width: 100%;
max-width: 1280px;
margin: 30px auto;
background: transparent;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
user-select: none;
}
.carousel-wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-container {
display: flex;
transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
/* Cada slide ocupa 100% da largura */
.carousel-slide {
min-width: 100%; /* ← Isso é o mais importante */
flex-shrink: 0;
height: 480px; /* Altura wide - ajuste se precisar */
display: flex;
align-items: flex-end; /* Alinha na parte de baixo */
justify-content: center;
background: #0f0f0f;
overflow: hidden;
position: relative;
}
/* Imagem preenchendo totalmente + alinhada na base */
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom; /* Pé da imagem na base */
display: block;
}
/* =========================
SETAS
========================= */
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.85);
color: #1a1a1a;
border: none;
width: 55px;
height: 55px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.carousel-arrow:hover {
background: white;
transform: translateY(-50%) scale(1.08);
}
.carousel-arrow.left { left: 20px; }
.carousel-arrow.right { right: 20px; }
/* =========================
DOTS
========================= */
.carousel-dots {
text-align: center;
padding: 16px 0;
background: rgba(0, 0, 0, 0.5);
}
.carousel-dots .dot {
width: 12px;
height: 12px;
background: rgba(255,255,255,0.5);
margin: 0 7px;
display: inline-block;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.carousel-dots .dot.active {
background: #00eeff;
transform: scale(1.4);
}