MediaWiki:FairyGodm.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.container {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
/* Header Section */
.header {
text-align: center;
margin-bottom: 32px;
padding: 32px;
background: linear-gradient(135deg, var(--heading-gradient-start) 0%, var(--heading-gradient-end) 100%);
border-radius: 20px;
box-shadow: 0 4px 20px var(--shadow-soft);
color: var(--text-strong);
}
.header h1 {
font-size: 3rem;
margin-bottom: 16px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.header p {
font-size: 1.2rem;
opacity: 0.95;
max-width: 800px;
margin: 0 auto;
}
.npc-info {
background: var(--bg-1);
padding: 24px;
border-radius: 14px;
margin: 24px 0;
box-shadow: 0 2px 8px var(--shadow-soft);
border-left: 4px solid var(--primary);
max-width: 2000px;
}
/* Hair Dye Cards */
.hair-dyes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 24px;
}
/* Quando dentro das nested tabs, ocupar a largura total da grade */
.tab-content .nested-content .hair-dyes-grid {
grid-column: 1 / -1;
width: 100%;
}
.hair-dye-card {
background: var(--bg-1);
border-radius: 14px;
padding: 24px;
box-shadow: 0 2px 8px var(--shadow-soft);
transition: 0.3s ease;
border: 1px solid var(--border);
}
.hair-dye-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px var(--shadow-medium);
border-color: var(--border-strong);
}
.card-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 2px solid var(--border);
}
.exchange-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--heading-gradient-start) 0%, var(--heading-gradient-end) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-strong);
font-weight: bold;
font-size: 0.8rem;
}
.card-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading);
}
.dye-items {
display: block;
}
.dye-item, .quest-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px;
background: var(--bg-1);
border-radius: 10px;
transition: 0.15s ease;
text-align: center;
}
.dye-item:hover, .quest-section:hover {
background: var(--bg-1);
}
.dye-info {
flex: 1;
}
.dye-name {
font-weight: 500;
color: var(--heading);
margin-bottom: 2px;
}
.dye-preview {
font-size: 0.9rem;
color: var(--text-muted);
}
.class-header {
text-align: center;
margin-bottom: 24px;
padding: 24px;
background: var(--bg-1);
border-radius: 14px;
border: 1px solid var(--border);
}
.class-title {
font-size: 2rem;
color: var(--heading);
margin-bottom: 8px;
}
.class-description {
color: var(--text-muted);
font-style: italic;
}
/* Image Container Styles - Adapted from ImageContainer.css */
.image-container {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: 12px;
padding: 15px;
margin-bottom: 12px;
box-shadow: 0 2px 10px var(--shadow-soft);
text-align: center;
font-size: 0.9em;
line-height: 1.4;
max-width: 100%;
overflow: hidden;
}
.image-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 8px;
}
.dye-preview img {
max-width: 150px;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: block;
margin: 0 auto;
}
/* Grid layout for quest sections inside nested tabs (apenas quando ativo) */
.tab-content.active .nested-content.active {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
/* ========================================
TABS SYSTEM
======================================== */
.tab-content {
display: none;
background: var(--bg-1);
border-radius: 20px;
border: 2px solid var(--border);
box-shadow: 0 6px 24px var(--shadow-soft);
padding: 30px 20px;
}
.tab-content.active {
margin: 0 auto;
max-width: 1000px;
width: 90%;
background: var(--bg-1);
border-radius: 16px;
box-shadow: 0 4px 10px var(--shadow-soft);
padding: 20px 40px;
box-sizing: border-box;
display: block;
animation: fadeIn .35s ease;
}
.nav-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px 8px;
padding: 12px 20px;
list-style: none;
border-bottom: none;
justify-content: center;
margin-bottom: 12px;
}
.nav-tab {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 14px;
border-color: var(--border);
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
display: inline-block;
}
.nav-tab:hover {
background: var(--surface);
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--shadow-soft);
}
.nav-tab.active {
background: var(--primary);
border-color: var(--border-strong);
color: var(--text-strong);
box-shadow: 0 4px 12px var(--shadow-medium);
position: relative;
animation: floatUpDown 2.5s ease-in-out infinite;
}
.nav-tab .short-text {
display: none;
}
.nav-tab .full-text {
display: inline;
}
.tab-footer {
display: flex;
justify-content: center;
}
/* ========================================
TABS RESPONSIVE DESIGN
======================================== */
/* Desktop médio: 992px - 1199px */
@media (max-width: 1199px) {
.tab-content {
padding: 25px 18px;
border-radius: 18px;
}
.tab-content.active {
padding: 18px 35px;
border-radius: 14px;
}
.nav-tabs {
padding: 10px 18px;
gap: 6px 6px;
margin-bottom: 10px;
}
.nav-tab {
padding: 10px 18px;
border-radius: 12px;
font-size: 0.9rem;
}
.nav-tab.active {
padding: 10px 18px;
}
}
/* Desktop pequeno: 768px - 991px */
@media (max-width: 991px) {
.tab-content {
padding: 20px 15px;
border-radius: 16px;
}
.tab-content.active {
padding: 15px 30px;
border-radius: 12px;
width: 95%;
}
.nav-tabs {
padding: 8px 15px;
gap: 5px 5px;
margin-bottom: 8px;
}
.nav-tab {
padding: 8px 15px;
border-radius: 10px;
font-size: 0.85rem;
}
.nav-tab.active {
padding: 8px 15px;
}
}
/* Tablet: 576px - 767px */
@media (max-width: 767px) {
.tab-content {
padding: 18px 12px;
border-radius: 14px;
}
.tab-content.active {
padding: 12px 25px;
border-radius: 10px;
width: 98%;
}
.nav-tabs {
padding: 6px 12px;
gap: 4px 4px;
margin-bottom: 6px;
flex-direction: column;
align-items: center;
}
.nav-tab {
padding: 6px 12px;
border-radius: 8px;
font-size: 0.8rem;
width: 100%;
text-align: center;
max-width: 200px;
}
.nav-tab.active {
padding: 6px 12px;
}
.nav-tab:hover {
transform: translateY(-1px);
}
/* Ensure quest sections stack to one column on tablet */
.tab-content.active .nested-content.active { grid-template-columns: 1fr; min-width: 0; }
}
/* Mobile: até 575px */
@media (max-width: 575px) {
.tab-content {
padding: 15px 10px;
border-radius: 12px;
}
.tab-content.active {
padding: 10px 20px;
border-radius: 8px;
width: 100%;
}
.nav-tabs {
padding: 4px 10px;
gap: 3px 3px;
margin-bottom: 4px;
flex-direction: column;
align-items: center;
}
.nav-tab {
padding: 5px 10px;
border-radius: 6px;
font-size: 0.75rem;
width: 100%;
text-align: center;
max-width: 180px;
}
.nav-tab.active {
padding: 5px 10px;
}
.nav-tab:hover {
transform: none;
}
/* Mobile: single column and allow shrinking */
.tab-content.active .nested-content.active { grid-template-columns: 1fr; min-width: 0; }
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
/* Special styling for Paula class */
.paula-note {
background: #fff0f6;
border: 1px solid #ffb3cf;
border-radius: 10px;
padding: 16px;
margin-top: 16px;
color: #666666;
font-style: italic;
}
/* ========================================
TRICKSTER ONLINE CLASS COLORS
======================================== */
/* Bunny - Rosa/Pink */
.nav-tab[data-tab="bunny"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: white;
}
.nav-tab[data-tab="bunny"]:hover {
background: linear-gradient(135deg, #84cbe7, #169ecc);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}
.nav-tab[data-tab="bunny"].active {
background: linear-gradient(135deg, #84cbe7, #169ecc);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}
/* Buffalo - Marrom/Brown */
.nav-tab[data-tab="buffalo"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: white;
}
.nav-tab[data-tab="buffalo"]:hover {
background: linear-gradient(135deg, #ac5a34, #ff2a2a);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}
.nav-tab[data-tab="buffalo"].active {
background: linear-gradient(135deg, #ac5a34, #ff2a2a);
border-color: rgba(255, 0, 0, 0.9);
color: white;
}
/* Paula - Azul claro/Light Blue */
.nav-tab[data-tab="paula"] {
background: linear-gradient(135deg, #ff6b6b, #a01e1e);
border-color: rgba(255, 0, 0, 0.7);
color: #333;
}
.nav-tab[data-tab="paula"]:hover {
background: linear-gradient(135deg, #f8f8f8, #d4d4d4);
border-color: rgba(255, 0, 0, 0.9);
color: #333;
}
.nav-tab[data-tab="paula"].active {
background: linear-gradient(135deg, #f8f8f8, #d4d4d4);
border-color: rgba(255, 0, 0, 0.9);
color: #333;
}
/* Sheep - Branco/White */
.nav-tab[data-tab="sheep"] {
background: linear-gradient(135deg, #414fcc, #2532a5);
border-color: rgba(38, 0, 255, 0.7);
color: #333;
}
.nav-tab[data-tab="sheep"]:hover {
background: linear-gradient(135deg, #ff7bbd, #ff54a9);
border-color: rgba(38, 0, 255, 0.9);
color: #333;
}
.nav-tab[data-tab="sheep"].active {
background: linear-gradient(135deg, #ff7bbd, #ff54a9);
border-color: rgba(38, 0, 255, 0.9);
color: #333;
}
/* Dragon - Vermelho/Red */
.nav-tab[data-tab="dragon"] {
background: linear-gradient(135deg, #414fcc, #2532a5);
border-color: rgba(38, 0, 255, 0.7);
color: white;
}
.nav-tab[data-tab="dragon"]:hover {
background: linear-gradient(135deg, #8c2bfc, #6107c9);
border-color: rgba(38, 0, 255, 0.9);
color: white;
}
.nav-tab[data-tab="dragon"].active {
background: linear-gradient(135deg, #8c2bfc, #6107c9);
border-color: rgba(38, 0, 255, 0.9);
color: white;
}
/* Fox - Laranja/Orange */
.nav-tab[data-tab="fox"] {
background: linear-gradient(135deg, #9370DB, #BA55D3);
border-color: rgba(212, 0, 255, 0.7);
color: white;
}
.nav-tab[data-tab="fox"]:hover {
background: linear-gradient(135deg, #ad56ff, #cd07ff);
border-color: rgba(212, 0, 255, 0.9);
color: white;
}
.nav-tab[data-tab="fox"].active {
background: linear-gradient(135deg, #ad56ff, #cd07ff);
border-color: rgba(212, 0, 255, 0.9);
color: white;
}
/* Lion - Dourado/Gold */
.nav-tab[data-tab="lion"] {
background: linear-gradient(135deg, #9370DB, #BA55D3);
border-color: rgba(212, 0, 255, 0.7);
color: #333;
}
.nav-tab[data-tab="lion"]:hover {
background: linear-gradient(135deg, #f3cd23, #d3a201);
border-color: rgba(212, 0, 255, 0.9);
color: #333;
}
.nav-tab[data-tab="lion"].active {
background: linear-gradient(135deg, #f3cd23, #d3a201);
border-color: rgba(212, 0, 255, 0.9);
color: #333;
}
/* Cat - Roxo/Purple */
.nav-tab[data-tab="cat"] {
background: linear-gradient(135deg, #FF8C00, #FFA500);
border-color: rgba(255, 136, 0, 0.7);
color: white;
}
.nav-tab[data-tab="cat"]:hover {
background: linear-gradient(135deg, #ffd727, #f3bb02);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}
.nav-tab[data-tab="cat"].active {
background: linear-gradient(135deg, #ffd727, #f3bb02);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}
/* Raccoon - Cinza/Gray */
.nav-tab[data-tab="raccoon"] {
background: linear-gradient(135deg, #FF8C00, #FFA500);
border-color: rgba(255, 136, 0, 0.7);
color: white;
}
.nav-tab[data-tab="raccoon"]:hover {
background: linear-gradient(135deg, #c77931, #884302);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}
.nav-tab[data-tab="raccoon"].active {
background: linear-gradient(135deg, #c77931, #884302);
border-color: rgba(255, 136, 0, 0.9);
color: white;
}
.fashion-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: linear-gradient(135deg, #ff6b9d, #ff8c6b);
color: #ffffff;
border-radius: 999px;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.35);
border: 1px solid rgba(255, 107, 157, 0.35);
}
.card-header .fashion-badge {
margin-left: auto;
}