MediaWiki:Common.css: mudanças entre as edições

Edição das 21h32min de 27 de abril de 2026

/* =====================================

   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:
MediaWiki:Common.css: mudanças entre as edições

Edição das 21h32min de 27 de abril de 2026

Menu de navegação

Pesquisa
