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 !important; /* Ajuste essa largura para caber na sua barra lateral */
height: auto !important;
display: block !important;
margin: 10px auto !important;
padding: 0 !important;
}
/* Força a imagem dentro do logo a não estourar */
#p-logo a, .mw-wiki-logo img {
background-size: contain !important;
width: 100% !important;
height: 140px !important; /* Ajuste a altura proporcional aqui */
}
/* Se o logo estiver como imagem fixa na tag <img> */
#p-logo img {
max-width: 140px !important;
height: auto !important;
}
/* -----------------------------
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
----------------------------- */
.farm-land-container {
max-width: 1200px; /* LARGURA MÁXIMA IGUAL AO PRINT */
margin: 0 auto; /* CENTRALIZA CONTAINER */
padding: 10px; /* ESPAÇAMENTO INTERNO PADRÃO */
}
/* =========================
BARRA SUPERIOR DE LINKS
========================= */
.farm-land-top-links {
text-align: center; /* CENTRALIZA TEXTO IGUAL AO PRINT */
font-size: 14px; /* TAMANHO DE FONTE IGUAL AO PRINT */
margin-bottom: 15px; /* ESPAÇAMENTO INFERIOR IGUAL AO PRINT */
}
.farm-land-top-links a {
color: #2a4bd7; /* COR DO LINK IGUAL AO PRINT */
text-decoration: none; /* REMOVE SUBLINHADO PADRÃO */
margin: 0 6px; /* ESPAÇAMENTO ENTRE LINKS IGUAL AO PRINT */
}
.farm-land-top-links a:hover {
text-decoration: underline; /* SUBLINHADO AO PASSAR O MOUSE */
}
/* =========================
BANNER PRINCIPAL
========================= */
.farm-land-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
========================= */
.farm-land-event-button {
text-align: center; /* CENTRALIZA O BOTÃO */
margin-bottom: 25px; /* ESPAÇAMENTO ABAIXO DO BOTÃO */
}
.farm-land-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 */
}
.farm-land-event-button a:hover {
background: #a11f1f; /* COR DE FUNDO AO PASSAR O MOUSE */
}
/* =========================
CARDS PRINCIPAIS
========================= */
/* =====================================
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 */
.farm-land-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
========================= */
.farm-land-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
========================= */
.farm-land-guide {
display: flex; /* FLEX PARA ÍCONES + TEXTO */
align-items: center; /* CENTRALIZA VERTICALMENTE */
font-size: 14px; /* TAMANHO DA FONTE PADRÃO */
}
/* Ícones dentro das guias */
.farm-land-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 */
}
/* =========================
DESTAQUES
========================= */
/* Container de destaques em grid */
.farm-land-highlights {
display: grid; /* GRID PARA CARDS */
grid-template-columns: repeat(4, 1fr); /* 4 COLUNAS IGUAIS */
gap: 12px; /* ESPAÇAMENTO ENTRE CARDS */
}
/* Imagem do destaque */
.farm-land-highlight .img {
height: 120px; /* ALTURA IGUAL AO PRINT */
background: #ddd; /* FUNDO CINZA CLARO */
}
/* Título do destaque */
.farm-land-highlight .title {
padding: 8px; /* ESPAÇAMENTO INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
font-weight: bold; /* TEXTO EM NEGRITO */
}
/* =========================
ANIMAÇÕES - CARDS PRINCIPAIS
========================= */
/* Card container */
.farm-land-card {
transition: transform 0.25s ease, box-shadow 0.25s ease; /* TRANSIÇÃO SUAVE */
cursor: pointer; /* CURSOR DE MÃO */
}
/* Efeito hover do card */
.farm-land-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 */
.farm-land-card .img {
transition: transform 0.25s ease; /* TRANSIÇÃO SUAVE */
}
/* Efeito hover na imagem do card */
.farm-land-card:hover .img {
transform: scale(1.05); /* LEVE AMPLIAÇÃO */
}
/* =========================
CONTEÚDOS EXCLUSIVOS
========================= */
/* Container geral */
.farm-land-exclusive-wrapper {
margin-top: 30px; /* MARGEM SUPERIOR */
}
/* Grid dos conteúdos exclusivos */
.farm-land-exclusive-grid {
display: grid; /* GRID PARA ITENS */
grid-template-columns: repeat(3, 1fr); /* 3 COLUNAS IGUAIS */
gap: 15px; /* ESPAÇAMENTO ENTRE ITENS */
}
/* Item individual */
.farm-land-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 */
.farm-land-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 */
.farm-land-exclusive-img {
height: 140px; /* ALTURA IGUAL AO PRINT */
background: #dcdcdc; /* FUNDO CINZA CLARO */
}
/* Título do item exclusivo */
.farm-land-exclusive-title {
padding: 10px; /* ESPAÇAMENTO INTERNO */
font-weight: bold; /* TEXTO EM NEGRITO */
text-align: center; /* CENTRALIZA TEXTO */
background: #ffffff; /* FUNDO BRANCO */
}
/* =========================
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;
}
/* =========================
CARDS
========================= */
/* Container geral de cards */
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-card a {
display: block;
padding: 8px 4px; /* PADDING INTERNO */
font-weight: bold; /* TEXTO NEGRITO */
color: #0033cc; /* COR DO LINK */
text-decoration: none; /* REMOVE SUBLINHADO */
}
.farm-land-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
----------------------------- */
.farm-land-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
----------------------------- */
.farm-land-page-title {
text-align: center; /* CENTRALIZA TEXTO */
margin-bottom: 40px; /* MARGEM INFERIOR */
padding-bottom: 20px; /* PADDING INFERIOR */
border-bottom: 2px solid #e0e0e0; /* LINHA SEPARADORA */
}
.farm-land-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 */
}
.farm-land-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)
----------------------------- */
.farm-land-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) {
.farm-land-main-grid {
grid-template-columns: repeat(2, 1fr); /* 2 COLUNAS EM TELAS MÉDIAS */
}
}
@media (max-width: 600px) {
.farm-land-main-grid {
grid-template-columns: 1fr; /* 1 COLUNA EM TELAS PEQUENAS */
}
}
/* -----------------------------
CARD DA CLASSE (ESTILO SITE)
----------------------------- */
.farm-land-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 */
}
.farm-land-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 */
}
.farm-land-class-card.active {
border-color: #2980b9; /* BORDA AZUL ESCURO */
background: #f8fafc; /* FUNDO LEVE DIFERENCIADO */
}
/* -----------------------------
IMAGEM DO CARD
----------------------------- */
.farm-land-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
----------------------------- */
.farm-land-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 */
}
.farm-land-class-card:hover .farm-land-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
----------------------------- */
.farm-land-class-name {
padding: 20px; /* PADDING INTERNO */
text-align: center; /* CENTRALIZA TEXTO */
background: white; /* FUNDO BRANCO */
border-top: 1px solid #f1f1f1; /* LINHA SEPARADORA */
}
.farm-land-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 */
}
.farm-land-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 */
.farm-land-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) */
.farm-land-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 */
.farm-land-expansion-content {
padding: 30px; /* PADDING INTERNO */
}
/* Título da expansão */
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-subclass-image {
flex-shrink: 0; /* NÃO REDUZIR */
}
.farm-land-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 */
.farm-land-subclass-card:hover .farm-land-subclass-img {
transform: scale(1.1); /* LEVE AMPLIAÇÃO */
}
/* Informações da sub-classe */
.farm-land-subclass-info {
flex-grow: 1; /* OCUPA ESPAÇO RESTANTE */
}
/* Título da sub-classe */
.farm-land-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 */
.farm-land-subclass-info h3 a {
color: #2c3e50; /* COR PADRÃO */
text-decoration: none; /* SEM SUBLINHADO */
transition: color 0.2s; /* TRANSIÇÃO DE COR */
}
.farm-land-subclass-info h3 a:hover {
color: #3498db; /* AZUL AO PASSAR O MOUSE */
}
/* Descrição da sub-classe */
.farm-land-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
----------------------------- */
.farm-land-class-image {
position: relative; /* Necessário para pseudo-elemento de shimmer */
}
.farm-land-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
----------------------------- */
.farm-land-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)
----------------------------- */
.farm-land-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;
}
.farm-land-close-btn:hover {
background: #c0392b;
}
/* ================================================= */
/* RESPONSIVIDADE ADICIONAL */
/* ================================================= */
/* TABLETS MENORES */
@media (max-width: 768px) {
.farm-land-class-image {
height: 180px;
padding: 15px;
}
.farm-land-img-hover {
max-height: 150px;
}
.farm-land-expansion-content {
padding: 20px;
}
.farm-land-subclass-card {
flex-direction: column;
text-align: center;
gap: 15px;
}
}
/* CELULARES */
@media (max-width: 480px) {
.farm-land-classes-system {
padding: 0 10px;
}
.farm-land-page-title h1 {
font-size: 24px;
}
.farm-land-page-title p {
font-size: 14px;
}
.farm-land-main-grid {
gap: 15px;
}
.farm-land-class-image {
height: 150px;
}
.farm-land-img-hover {
max-height: 120px;
}
.farm-land-class-name {
padding: 15px;
}
.farm-land-class-title {
font-size: 18px;
}
.farm-land-subclasses-grid {
grid-template-columns: 1fr;
}
}
/* DARK MODE SUPPORT (OPCIONAL) */
@media (prefers-color-scheme: dark) {
.farm-land-classes-system {
background: transparent;
}
.farm-land-class-card,
.farm-land-expansion-area,
.farm-land-subclass-card {
background: #2d3748;
border-color: #4a5568;
}
.farm-land-class-name,
.farm-land-expansion-content {
background: #2d3748;
}
.farm-land-class-title,
.farm-land-expansion-title,
.farm-land-subclass-info h3 a {
color: #e2e8f0;
}
.farm-land-class-subtitle,
.farm-land-expansion-description,
.farm-land-subclass-info p {
color: #a0aec0;
}
.farm-land-class-image {
background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}
.farm-land-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 */
/* ================================================= */
.farm-land-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}
.farm-land-attr-table th {
background: #f2ea8c;
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farm-land-attr-table td {
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
/* Hover nas linhas da tabela */
.farm-land-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 */
/* ================================================= */
.farm-land-attr-table {
width: 100%;
border-collapse: collapse;
background: #ffffff;
margin: 20px 0 30px;
font-size: 14px;
}
.farm-land-attr-table th {
background: #f2ea8c;
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farm-land-attr-table td {
border: 1px solid #cfcfcf;
padding: 8px;
text-align: center;
}
.farm-land-attr-table tbody tr:hover {
background: #f9f9f9;
}
/* ================================================= */
/* CARDS PRINCIPAIS */
/* ================================================= */
.farm-land-cards {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* Card individual */
.farm-land-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 */
.farm-land-card-img {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Imagem do MediaWiki */
.farm-land-card-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain; /* Mantém proporção e centraliza */
}
/* Texto do card */
.farm-land-card a {
display: block;
padding: 6px 4px;
font-weight: bold;
color: #0033cc;
text-decoration: none;
}
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-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 */
.farm-land-carousel-track::-webkit-scrollbar {
display: none;
}
/* Imagens dentro do track */
.farm-land-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);
}
.farm-land-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-farm-land {
width: 200px; /* Largura do container */
height: 300px; /* Altura ideal para artes de Ragnarok */
margin: 0 auto !important; /* 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:
/* Botões animados para Mediatext */
.animated-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
padding: 15px 0;
margin: 20px 0;
flex-wrap: wrap;
}
.btn-animated {
display: inline-block;
padding: 12px 24px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
color: white;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
z-index: 1;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-animated::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: -1;
}
.btn-animated:hover::before {
width: 300px;
height: 300px;
}
.btn-animated:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
color: white;
}
.btn-animated:active {
transform: translateY(1px);
}
/* Cores variadas */
.btn-primary { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.btn-success { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.btn-warning { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.btn-info { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.btn-dark { background: linear-gradient(135deg, #434343 0%, #000000 100%); }
/* Efeito de pulsação */
.btn-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}
/* Efeito de brilho */
.btn-shine {
position: relative;
overflow: hidden;
}
.btn-shine::after {
content: '';
position: absolute;
top: -50%;
left: -60%;
width: 200%;
height: 200%;
background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%);
transform: rotate(45deg);
animation: shine 3s infinite;
}
@keyframes shine {
0% { transform: translateX(-100%) rotate(45deg); }
20%, 100% { transform: translateX(100%) rotate(45deg); }
}
/* Responsivo */
@media (max-width: 768px) {
.animated-buttons { gap: 12px; }
.btn-animated { padding: 8px 16px; font-size: 13px; }
}