|
|
| Linha 1: |
Linha 1: |
| <!-- ================================================= -->
| |
| <!-- SISTEMA DE CLASSES - WIKI EVERLIGHT -->
| |
| <!-- ================================================= -->
| |
|
| |
|
| <!-- INÍCIO DO SISTEMA -->
| |
| <div class="everlight-classes-system">
| |
|
| |
| <!-- TÍTULO PRINCIPAL -->
| |
| <div class="everlight-page-title">
| |
| <h1>Classes do Ragnarök Online</h1>
| |
| <p>Em Ragnarök, você sempre começa com um personagem Aprendiz e vai evoluindo. É possível escolher sua classe e evoluções, montar sua própria árvore de habilidades e definir o seu estilo de luta! Confira abaixo a relação de caminhos que poderão ser seguidos no jogo:</p>
| |
| </div>
| |
|
| |
| <!-- GRADE PRINCIPAL DE CLASSES (EXATAMENTE IGUAL AO SITE) -->
| |
| <div class="everlight-main-grid">
| |
|
| |
| <!-- APREDIZ -->
| |
| <div class="everlight-class-card" data-class="aprendiz" onclick="everlightExpandClass('aprendiz')">
| |
| <div class="everlight-class-image">
| |
| [[File:Novice_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Novice_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Aprendiz</span>
| |
| <span class="everlight-class-subtitle">Classe Inicial</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- ESPADACHIM -->
| |
| <div class="everlight-class-card" data-class="espadachim" onclick="everlightExpandClass('espadachim')">
| |
| <div class="everlight-class-image">
| |
| [[File:Swordman_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Swordman_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Espadachim</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- MAGO -->
| |
| <div class="everlight-class-card" data-class="mago" onclick="everlightExpandClass('mago')">
| |
| <div class="everlight-class-image">
| |
| [[File:Mage_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Mage_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Mago</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- ARQUEIRO -->
| |
| <div class="everlight-class-card" data-class="arqueiro" onclick="everlightExpandClass('arqueiro')">
| |
| <div class="everlight-class-image">
| |
| [[File:Archer_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Archer_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Arqueiro</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- MERCADOR -->
| |
| <div class="everlight-class-card" data-class="mercador" onclick="everlightExpandClass('mercador')">
| |
| <div class="everlight-class-image">
| |
| [[File:Merchant_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Merchant_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Mercador</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- GATUNO -->
| |
| <div class="everlight-class-card" data-class="gatuno" onclick="everlightExpandClass('gatuno')">
| |
| <div class="everlight-class-image">
| |
| [[File:Thief_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Thief_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Gatuno</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- NOVICO -->
| |
| <div class="everlight-class-card" data-class="novico" onclick="everlightExpandClass('novico')">
| |
| <div class="everlight-class-image">
| |
| [[File:Acolyte_M.png|180px|link=|class=everlight-img-hover]]
| |
| [[File:Acolyte_F.png|180px|link=|class=everlight-img-hover]]
| |
| </div>
| |
| <div class="everlight-class-name">
| |
| <span class="everlight-class-title">Noviço</span>
| |
| <span class="everlight-class-subtitle">Classe 1</span>
| |
| </div>
| |
| </div>
| |
|
| |
| </div><!-- FIM DA GRADE PRINCIPAL -->
| |
|
| |
| <!-- ================================================= -->
| |
| <!-- ÁREAS DE EXPANSÃO (EXATAMENTE IGUAL AO SITE) -->
| |
| <!-- ================================================= -->
| |
|
| |
| <!-- EXPANSÃO APRENDIZ -->
| |
| <div id="everlight-aprendiz" class="everlight-expansion-area">
| |
| <div class="everlight-expansion-content">
| |
| <h2 class="everlight-expansion-title">Aprendiz</h2>
| |
| <p class="everlight-expansion-description">Aprendizes não possuem nenhum tipo de especialidade, além da determinação de se tornarem melhores e mais fortes. Todos em Rune-Midgard já foram aprendizes no início de suas aventuras e escolheram caminhos diferentes, tornando cada habitante deste mundo fantástico um ser único, seja pela escolha do cabelo, a distribuição dos atributos ou os equipamentos usados.</p>
| |
|
| |
| <div class="everlight-subclasses-grid">
| |
| <!-- SUPER APRENDIZ -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Super_Aprendiz">[[File:SuperNovice_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Super_Aprendiz">Super Aprendiz</a></h3>
| |
| <p>Aprendiz que aprendeu habilidades de várias classes</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- INVOCADOR -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Invocador">[[File:Doram_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Invocador">Invocador</a></h3>
| |
| <p>Especialista em invocar criaturas para ajudar em batalha</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- EXPANSÃO ESPADACHIM -->
| |
| <div id="everlight-espadachim" class="everlight-expansion-area">
| |
| <div class="everlight-expansion-content">
| |
| <h2 class="everlight-expansion-title">Espadachim</h2>
| |
| <p class="everlight-expansion-description">Espadachins podem usar as melhores armaduras de Rune-Midgard, que combinadas com o seu alto vigor e capacidade de se curarem rapidamente, os tornam a frente de ataque em qualquer tipo de combate.</p>
| |
|
| |
| <div class="everlight-subclasses-grid">
| |
| <!-- CAVALEIRO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Cavaleiro">[[File:Knight_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Cavaleiro">Cavaleiro</a></h3>
| |
| <p>Especialista em combate corpo a corpo com espadas</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- TEMPLÁRIO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Templário">[[File:Crusader_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Templário">Templário</a></h3>
| |
| <p>Defensor sagrado especializado em proteção</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- LORD -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Lorde">[[File:LordKnight_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Lorde">Lorde</a></h3>
| |
| <p>Evolução transcendental do Cavaleiro</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- PALADINO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Paladino">[[File:Paladin_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Paladino">Paladino</a></h3>
| |
| <p>Evolução transcendental do Templário</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- EXPANSÃO MAGO -->
| |
| <div id="everlight-mago" class="everlight-expansion-area">
| |
| <div class="everlight-expansion-content">
| |
| <h2 class="everlight-expansion-title">Mago</h2>
| |
| <p class="everlight-expansion-description">Magos dominam os elementos da natureza para lançar poderosas magias de ataque e controle.</p>
| |
|
| |
| <div class="everlight-subclasses-grid">
| |
| <!-- BRUXO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Bruxo">[[File:Wizard_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Bruxo">Bruxo</a></h3>
| |
| <p>Especialista em magias ofensivas elementais</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- SÁBIO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Sábio">[[File:Sage_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Sábio">Sábio</a></h3>
| |
| <p>Conhecedor de magias de suporte e pesquisa</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- ARQUIMAGO -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Arquimago">[[File:HighWizard_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Arquimago">Arquimago</a></h3>
| |
| <p>Evolução transcendental do Bruxo</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- PROFESSOR -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Professor">[[File:Professor_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Professor">Professor</a></h3>
| |
| <p>Evolução transcendental do Sábio</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- EXPANSÃO NOVICO -->
| |
| <div id="everlight-novico" class="everlight-expansion-area">
| |
| <div class="everlight-expansion-content">
| |
| <h2 class="everlight-expansion-title">Noviço</h2>
| |
| <p class="everlight-expansion-description">Noviços são abençoados com o poder de curar e aumentar a força e a determinação de si próprios, e de seus companheiros de batalha.</p>
| |
|
| |
| <div class="everlight-subclasses-grid">
| |
| <!-- SACERDOTE -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Sacerdote">[[File:Priest_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Sacerdote">Sacerdote</a></h3>
| |
| <p>Especialista em cura e bênçãos divinas</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- MONGE -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Monge">[[File:Monk_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Monge">Monge</a></h3>
| |
| <p>Mestre das artes marciais espirituais</p>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- SUMO SACERDOTE -->
| |
| <div class="everlight-subclass-card">
| |
| <div class="everlight-subclass-image">
| |
| <a href="/wiki/Sumo_Sacerdote">[[File:HighPriest_M.png|120px|link=|class=everlight-subclass-img]]</a>
| |
| </div>
| |
| <div class="everlight-subclass-info">
| |
| <h3><a href="/wiki/Sumo_Sacerdote">Sumo Sacerdote</a></h3>
| |
| <p>Evolução transcendental do Sacerdote</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| </div><!-- FIM DO SISTEMA -->
| |
|
| |
| <!-- ================================================= -->
| |
| <!-- CSS INLINE (ESTILOS EXATOS DO SITE) -->
| |
| <!-- ================================================= -->
| |
| <style>
| |
| /* RESET E CONTAINER */
| |
| .everlight-classes-system {
| |
| max-width: 1000px;
| |
| margin: 20px auto;
| |
| padding: 0 15px;
| |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
| |
| }
| |
|
| |
| /* TÍTULO DA PÁGINA */
| |
| .everlight-page-title {
| |
| text-align: center;
| |
| margin-bottom: 40px;
| |
| padding-bottom: 20px;
| |
| border-bottom: 2px solid #e0e0e0;
| |
| }
| |
|
| |
| .everlight-page-title h1 {
| |
| color: #2c3e50;
| |
| font-size: 32px;
| |
| margin-bottom: 15px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .everlight-page-title p {
| |
| color: #666;
| |
| font-size: 16px;
| |
| line-height: 1.6;
| |
| max-width: 800px;
| |
| margin: 0 auto;
| |
| }
| |
|
| |
| /* GRADE PRINCIPAL (EXATO DO SITE) */
| |
| .everlight-main-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 25px;
| |
| margin-bottom: 40px;
| |
| }
| |
|
| |
| @media (max-width: 900px) {
| |
| .everlight-main-grid {
| |
| grid-template-columns: repeat(2, 1fr);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 600px) {
| |
| .everlight-main-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
|
| |
| /* CARD DA CLASSE (EXATO DO SITE) */
| |
| .everlight-class-card {
| |
| background: white;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| box-shadow: 0 4px 12px rgba(0,0,0,0.08);
| |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
| |
| cursor: pointer;
| |
| border: 2px solid transparent;
| |
| position: relative;
| |
| }
| |
|
| |
| .everlight-class-card:hover {
| |
| transform: translateY(-8px);
| |
| box-shadow: 0 12px 24px rgba(0,0,0,0.15);
| |
| border-color: #3498db;
| |
| }
| |
|
| |
| .everlight-class-card.active {
| |
| border-color: #2980b9;
| |
| background: #f8fafc;
| |
| }
| |
|
| |
| .everlight-class-image {
| |
| height: 220px;
| |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 10px;
| |
| padding: 20px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| .everlight-img-hover {
| |
| transition: all 0.4s ease;
| |
| filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
| |
| max-height: 180px;
| |
| object-fit: contain;
| |
| }
| |
|
| |
| .everlight-class-card:hover .everlight-img-hover {
| |
| transform: scale(1.08);
| |
| filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2));
| |
| }
| |
|
| |
| .everlight-class-name {
| |
| padding: 20px;
| |
| text-align: center;
| |
| background: white;
| |
| border-top: 1px solid #f1f1f1;
| |
| }
| |
|
| |
| .everlight-class-title {
| |
| display: block;
| |
| color: #2c3e50;
| |
| font-size: 20px;
| |
| font-weight: 700;
| |
| margin-bottom: 5px;
| |
| }
| |
|
| |
| .everlight-class-subtitle {
| |
| display: block;
| |
| color: #7f8c8d;
| |
| font-size: 14px;
| |
| font-weight: 500;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| }
| |
|
| |
| /* ÁREA DE EXPANSÃO (EXATO DO SITE) */
| |
| .everlight-expansion-area {
| |
| display: none;
| |
| background: white;
| |
| border-radius: 12px;
| |
| margin: 20px 0 40px;
| |
| box-shadow: 0 6px 20px rgba(0,0,0,0.1);
| |
| border: 1px solid #e0e0e0;
| |
| animation: everlightSlideDown 0.4s ease-out;
| |
| }
| |
|
| |
| .everlight-expansion-area.active {
| |
| display: block;
| |
| }
| |
|
| |
| @keyframes everlightSlideDown {
| |
| from {
| |
| opacity: 0;
| |
| transform: translateY(-15px);
| |
| }
| |
| to {
| |
| opacity: 1;
| |
| transform: translateY(0);
| |
| }
| |
| }
| |
|
| |
| .everlight-expansion-content {
| |
| padding: 30px;
| |
| }
| |
|
| |
| .everlight-expansion-title {
| |
| color: #2c3e50;
| |
| font-size: 28px;
| |
| margin-bottom: 15px;
| |
| padding-bottom: 15px;
| |
| border-bottom: 2px solid #3498db;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .everlight-expansion-description {
| |
| color: #555;
| |
| font-size: 16px;
| |
| line-height: 1.7;
| |
| margin-bottom: 30px;
| |
| padding-bottom: 20px;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
|
| |
| /* GRADE DE SUB-CLASSES (EXATO DO SITE) */
| |
| .everlight-subclasses-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
| |
| gap: 25px;
| |
| margin-top: 20px;
| |
| }
| |
|
| |
| .everlight-subclass-card {
| |
| background: #f8fafc;
| |
| border-radius: 10px;
| |
| padding: 20px;
| |
| transition: all 0.3s ease;
| |
| border: 1px solid #e2e8f0;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 20px;
| |
| }
| |
|
| |
| .everlight-subclass-card:hover {
| |
| background: white;
| |
| border-color: #3498db;
| |
| box-shadow: 0 6px 12px rgba(52, 152, 219, 0.15);
| |
| transform: translateY(-3px);
| |
| }
| |
|
| |
| .everlight-subclass-image {
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| .everlight-subclass-img {
| |
| width: 100px;
| |
| height: 100px;
| |
| object-fit: contain;
| |
| transition: transform 0.3s ease;
| |
| filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
| |
| }
| |
|
| |
| .everlight-subclass-card:hover .everlight-subclass-img {
| |
| transform: scale(1.1);
| |
| }
| |
|
| |
| .everlight-subclass-info {
| |
| flex-grow: 1;
| |
| }
| |
|
| |
| .everlight-subclass-info h3 {
| |
| margin: 0 0 8px 0;
| |
| font-size: 18px;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .everlight-subclass-info h3 a {
| |
| color: #2c3e50;
| |
| text-decoration: none;
| |
| transition: color 0.2s;
| |
| }
| |
|
| |
| .everlight-subclass-info h3 a:hover {
| |
| color: #3498db;
| |
| }
| |
|
| |
| .everlight-subclass-info p {
| |
| color: #666;
| |
| font-size: 14px;
| |
| line-height: 1.5;
| |
| margin: 0;
| |
| }
| |
|
| |
| /* BOTÃO DE FECHAR */
| |
| .everlight-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;
| |
| }
| |
|
| |
| .everlight-close-btn:hover {
| |
| background: #c0392b;
| |
| }
| |
| </style>
| |
|
| |
| <!-- ================================================= -->
| |
| <!-- JAVASCRIPT (FUNCIONALIDADES DO SITE) -->
| |
| <!-- ================================================= -->
| |
| <script>
| |
| // FUNÇÃO PRINCIPAL PARA EXPANDIR CLASSE
| |
| function everlightExpandClass(className) {
| |
| // Fecha todas as expansões
| |
| document.querySelectorAll('.everlight-expansion-area').forEach(area => {
| |
| area.classList.remove('active');
| |
| });
| |
|
| |
| // Remove classe active de todos os cards
| |
| document.querySelectorAll('.everlight-class-card').forEach(card => {
| |
| card.classList.remove('active');
| |
| });
| |
|
| |
| // Expande a classe selecionada
| |
| const expansion = document.getElementById(`everlight-${className}`);
| |
| if (expansion) {
| |
| expansion.classList.add('active');
| |
|
| |
| // Adiciona classe active ao card clicado
| |
| event.currentTarget.classList.add('active');
| |
|
| |
| // Rola suavemente para a expansão
| |
| expansion.scrollIntoView({
| |
| behavior: 'smooth',
| |
| block: 'start'
| |
| });
| |
| }
| |
| }
| |
|
| |
| // Fecha expansão ao clicar fora
| |
| document.addEventListener('click', function(event) {
| |
| if (!event.target.closest('.everlight-class-card') &&
| |
| !event.target.closest('.everlight-expansion-area') &&
| |
| !event.target.closest('.everlight-subclass-card')) {
| |
|
| |
| document.querySelectorAll('.everlight-expansion-area').forEach(area => {
| |
| area.classList.remove('active');
| |
| });
| |
|
| |
| document.querySelectorAll('.everlight-class-card').forEach(card => {
| |
| card.classList.remove('active');
| |
| });
| |
| }
| |
| });
| |
|
| |
| // Inicializa com a primeira classe expandida
| |
| document.addEventListener('DOMContentLoaded', function() {
| |
| // Expande a primeira classe (Aprendiz)
| |
| everlightExpandClass('aprendiz');
| |
|
| |
| // Adiciona efeito de hover nas imagens
| |
| document.querySelectorAll('.everlight-img-hover').forEach(img => {
| |
| img.addEventListener('mouseenter', function() {
| |
| this.style.transform = 'scale(1.1)';
| |
| });
| |
|
| |
| img.addEventListener('mouseleave', function() {
| |
| if (!this.closest('.everlight-class-card.active')) {
| |
| this.style.transform = 'scale(1)';
| |
| }
| |
| });
| |
| });
| |
| });
| |
|
| |
| // Fecha expansão com ESC
| |
| document.addEventListener('keydown', function(event) {
| |
| if (event.key === 'Escape') {
| |
| document.querySelectorAll('.everlight-expansion-area').forEach(area => {
| |
| area.classList.remove('active');
| |
| });
| |
|
| |
| document.querySelectorAll('.everlight-class-card').forEach(card => {
| |
| card.classList.remove('active');
| |
| });
| |
| }
| |
| });
| |
| </script>
| |