MediaWiki:Common.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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* ═══════════════════════════════════════════════════════════════════════
TimeRO Wiki — Unified Design System v2.0
───────────────────────────────────────────────────────────────────────
Pages covered:
Main_Page → .timero-wiki-root (full-bleed, no shell)
Beginner_Leveling_Guide→ #leveling-guide-root (full-bleed)
MVP_Hunting_Guide → #mvp-guide-root (full-bleed)
Farming_Guide → #farming-guide-root (full-bleed)
Card_System → #card-system-root (full-bleed)
Corrida_ao_99 → (inline sections, full-bleed)
All other wiki pages → dark article shell (auto)
Sections:
1 Font import
2 Design tokens (harmonises inline vars across all pages)
3 Global base — html, body, font
4 Vector chrome — header, sidebar, footer dark
5 Main Page overrides
6 Custom guide page overrides (full-bleed shell)
7 Generic article shell (non-custom pages)
8 Typography
9 Content flow — no paragraph balloons
10 Links
11 Lists / HR / blockquote / code
12 TOC
13 Wikitables
14 Forms / inputs / buttons
15 Categories / thumbs / messages
16 ── KEYFRAMES — all pages unified ──
17 Component tokens shared by guide roots
18 Guide root normalisations (headings, code, links)
19 Leveling Guide (leveling-guide-root)
20 MVP Hunting Guide (mvp-guide-root)
21 Farming Guide (farming-guide-root)
22 Card System (card-system-root)
23 Corrida ao 99 (corrida99 inline page)
24 Main Page component classes
25 Responsive
26 Print
═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
§1 FONT IMPORT
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700;1,800&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
/* ════════════════════════════════════════════════════════
§2 DESIGN TOKENS
Single source of truth. Guide pages reference these via
CSS variables so inline --c / --ok / --bad etc. resolve
to the same hues. Values reconciled across all pages.
════════════════════════════════════════════════════════ */
:root {
/* ── Backgrounds ── */
--timero-bg-0: #030508; /* deepest void */
--timero-bg-1: #050810; /* body base */
--timero-bg-2: #07101e; /* section alternates */
--timero-bg-3: #0a1628; /* raised panels */
--timero-panel: rgba(8,18,32,0.94);
--timero-panel-2: rgba(10,22,40,0.96);
--timero-panel-soft: rgba(255,255,255,0.03);
--timero-glass: rgba(6,12,22,0.88);
/* ── Text ── */
--timero-text: #e8eef8;
--timero-text-soft: #d2dded;
--timero-text-muted: #7ea0c8;
--timero-text-dim: #3d5570;
/* ── Accent colours (reconciled with guide inline vars) ── */
/* Cyan — guide pages call this --c */
--timero-cyan: #00d4ff;
--timero-cyan-soft: rgba(0,212,255,0.10);
--timero-cyan-line: rgba(0,212,255,0.20);
--timero-cyan-glow: rgba(0,212,255,0.28);
/* Gold — guide pages call this --g / --gold (farming = #f9c500) */
--timero-gold: #f9a826; /* standard gold */
--timero-gold-bright: #f9c500; /* farming/zeny gold */
--timero-gold-soft: rgba(249,168,38,0.10);
--timero-gold-line: rgba(249,168,38,0.22);
/* Green — guide pages call this --ok */
--timero-green: #00ff88;
--timero-green-soft: rgba(0,255,136,0.09);
--timero-green-line: rgba(0,255,136,0.20);
/* Red — guide pages call this --bad */
--timero-red: #ff3d5a;
--timero-red-soft: rgba(255,61,90,0.09);
--timero-red-line: rgba(255,61,90,0.22);
/* Purple — item DB (#b06cff) / card system (#7c6aff) / global (#8f63ff) */
--timero-purple: #8f63ff; /* global */
--timero-purple-item: #b06cff; /* item database */
--timero-purple-arcane: #7c6aff; /* card system */
--timero-purple-soft: rgba(143,99,255,0.10);
--timero-purple-line: rgba(143,99,255,0.22);
/* Fire — corrida ao 99 / MVP guide */
--timero-fire: #ff6b00;
--timero-fire2: #ff9500;
--timero-fire-soft: rgba(255,107,0,0.08);
--timero-fire-line: rgba(255,107,0,0.22);
/* Blue — misc accent */
--timero-blue: #4c89ff;
--timero-blue-soft: rgba(76,137,255,0.10);
/* Podium metals */
--timero-gold-medal: #f9c500;
--timero-silver: #c8d8e8;
--timero-bronze: #cd7f32;
/* ── Borders ── */
--timero-border: rgba(255,255,255,0.07);
--timero-border-mid: rgba(255,255,255,0.11);
--timero-border-bright: rgba(255,255,255,0.16);
/* ── Shadows ── */
--timero-shadow-xl: 0 35px 90px rgba(0,0,0,0.60);
--timero-shadow-lg: 0 24px 64px rgba(0,0,0,0.50);
--timero-shadow-md: 0 14px 36px rgba(0,0,0,0.35);
/* ── Radii ── */
--timero-radius-xs: 6px;
--timero-radius-sm: 10px;
--timero-radius-md: 14px;
--timero-radius-lg: 18px;
--timero-radius-xl: 22px;
--timero-radius-2xl: 28px;
/* ── Typography ── */
--timero-font-display: 'Barlow Condensed', 'Segoe UI', sans-serif;
--timero-font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
--timero-font-mono: 'Share Tech Mono', monospace;
--timero-font-racing: 'Bebas Neue', sans-serif; /* corrida ao 99 */
/* ── Article layout ── */
--timero-article-px: 32px;
--timero-article-py-top: 28px;
--timero-article-py-bottom: 34px;
}
/* ════════════════════════════════════════════════════════
§3 GLOBAL BASE
════════════════════════════════════════════════════════ */
html, body {
background:
radial-gradient(circle at 15% 10%, rgba(0,212,255,0.045), transparent 22%),
radial-gradient(circle at 85% 12%, rgba(143,99,255,0.045), transparent 22%),
linear-gradient(180deg,
var(--timero-bg-0) 0%,
var(--timero-bg-1) 45%,
var(--timero-bg-2) 100%) !important;
color: var(--timero-text) !important;
font-family: var(--timero-font-body) !important;
font-size: 16px;
}
html, body,
.mw-body, #content,
.mw-parser-output,
.vector-body,
.vector-body p, .vector-body li,
.vector-body dd, .vector-body dt,
.vector-body td, .vector-body th,
.vector-body input, .vector-body select,
.vector-body textarea, .vector-body button {
font-family: var(--timero-font-body) !important;
}
/* ════════════════════════════════════════════════════════
§4 VECTOR CHROME — header, sidebar, footer dark
════════════════════════════════════════════════════════ */
.vector-sticky-header,
.vector-header,
#mw-page-base,
#mw-head,
#mw-navigation,
.vector-page-toolbar,
.vector-pinnable-header,
.vector-pinnable-element {
background: linear-gradient(180deg, #07101e 0%, #0a1628 100%) !important;
color: var(--timero-text) !important;
border-color: var(--timero-border) !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.vector-header-container,
.vector-header-start,
.vector-header-end,
.vector-page-toolbar-container,
.vector-user-links,
.vector-user-menu,
#p-personal,
#p-vector-user-menu-overflow {
background: transparent !important;
box-shadow: none !important;
}
/* Header links */
.vector-header a,
.vector-sticky-header a,
.vector-page-toolbar a,
.vector-pinnable-header a,
#mw-head a,
#mw-navigation a {
color: #c8ecff !important;
text-decoration: none !important;
transition: color .15s;
}
.vector-header a:hover,
.vector-sticky-header a:hover,
.vector-page-toolbar a:hover,
#mw-head a:hover,
#mw-navigation a:hover {
color: #ffffff !important;
text-decoration: none !important;
}
/* Nav tabs */
.vector-menu-tabs .vector-menu-content-list,
.vector-menu-tabs-legacy .vector-menu-content-list,
.vector-page-toolbar-container { background: transparent !important; }
.vector-menu-tabs li,
.vector-menu-tabs-legacy li {
background: transparent !important;
border-color: var(--timero-border) !important;
}
.vector-menu-tabs li a,
.vector-menu-tabs-legacy li a { color: #d8efff !important; }
.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
color: #ffffff !important;
border-bottom: 2px solid var(--timero-cyan) !important;
}
/* Sidebar */
#mw-panel,
.vector-column-start,
.vector-sidebar,
.vector-sidebar-container,
.vector-menu,
.vector-menu-portal,
.vector-toc {
background: linear-gradient(180deg, #07101e 0%, #081423 100%) !important;
color: #dfe9f7 !important;
border-color: rgba(255,255,255,0.05) !important;
box-shadow: none !important;
}
.vector-menu-portal, .portal {
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
background: transparent !important;
}
.vector-menu-heading, #mw-panel h3, .portal h3 {
color: #ffffff !important;
font-family: var(--timero-font-display) !important;
letter-spacing: .04em;
text-transform: uppercase;
font-weight: 700;
}
#mw-panel a, .vector-column-start a,
.vector-sidebar a, .vector-menu a, .portal a {
color: #bfe8ff !important;
text-decoration: none !important;
transition: color .15s;
}
#mw-panel a:hover, .vector-column-start a:hover,
.vector-sidebar a:hover, .vector-menu a:hover, .portal a:hover {
color: #ffffff !important;
}
.vector-column-start, .vector-column-end { background: transparent !important; }
/* Logo */
.mw-wiki-logo,
.vector-header-container .mw-logo,
.vector-header-container .mw-logo-wordmark,
.vector-header-container .mw-logo-tagline {
filter: drop-shadow(0 0 10px rgba(0,212,255,0.18));
}
/* Footer */
#footer, .mw-footer,
.vector-footer-container, footer {
background: linear-gradient(180deg, #07101e 0%, #05080f 100%) !important;
color: #a9bfd8 !important;
border-top: 1px solid var(--timero-border) !important;
margin-top: 40px;
}
#footer a, .mw-footer a,
.vector-footer a, .vector-footer-container a {
color: #8fdfff !important;
text-decoration: none !important;
}
#footer a:hover, .mw-footer a:hover,
.vector-footer a:hover, .vector-footer-container a:hover {
color: #ffffff !important;
}
#footer ul, .mw-footer ul, .vector-footer ul { color: #a9bfd8 !important; }
/* ════════════════════════════════════════════════════════
§5 MAIN PAGE — full-bleed, no shell
════════════════════════════════════════════════════════ */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
padding: 0 !important; border: none !important;
background: transparent !important;
box-shadow: none !important; border-radius: 0 !important;
}
body.page-Main_Page #bodyContent,
body.page-Main_Page .mw-body-content,
body.page-Main_Page .mw-parser-output {
background: transparent !important;
padding: 0 !important; margin: 0 !important;
}
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #contentSub { display: none !important; }
/* ════════════════════════════════════════════════════════
§6 CUSTOM GUIDE PAGES — full-bleed inside article shell
All roots: leveling / mvp / farming / card / corrida
Pattern: zero out inner padding so root fills the shell.
════════════════════════════════════════════════════════ */
/* — Page list — each root class and its body.page-* trigger — */
body.page-Beginner_Leveling_Guide,
body.page-MVP_Hunting_Guide,
body.page-Farming_Guide,
body.page-Card_System,
body.page-Corrida_ao_99 {
/* nothing on body itself — handled per-section below */
}
/* article shell: keep the rounded panel but remove inner spacing */
body.page-Beginner_Leveling_Guide #bodyContent,
body.page-Beginner_Leveling_Guide .mw-body-content,
body.page-Beginner_Leveling_Guide .mw-parser-output,
body.page-MVP_Hunting_Guide #bodyContent,
body.page-MVP_Hunting_Guide .mw-body-content,
body.page-MVP_Hunting_Guide .mw-parser-output,
body.page-Farming_Guide #bodyContent,
body.page-Farming_Guide .mw-body-content,
body.page-Farming_Guide .mw-parser-output,
body.page-Card_System #bodyContent,
body.page-Card_System .mw-body-content,
body.page-Card_System .mw-parser-output,
body.page-Corrida_ao_99 #bodyContent,
body.page-Corrida_ao_99 .mw-body-content,
body.page-Corrida_ao_99 .mw-parser-output {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* Hide default h1 and subtitle on custom pages */
body.page-Beginner_Leveling_Guide #firstHeading,
body.page-Beginner_Leveling_Guide .mw-first-heading,
body.page-Beginner_Leveling_Guide #contentSub,
body.page-MVP_Hunting_Guide #firstHeading,
body.page-MVP_Hunting_Guide .mw-first-heading,
body.page-MVP_Hunting_Guide #contentSub,
body.page-Farming_Guide #firstHeading,
body.page-Farming_Guide .mw-first-heading,
body.page-Farming_Guide #contentSub,
body.page-Card_System #firstHeading,
body.page-Card_System .mw-first-heading,
body.page-Card_System #contentSub,
body.page-Corrida_ao_99 #firstHeading,
body.page-Corrida_ao_99 .mw-first-heading,
body.page-Corrida_ao_99 #contentSub { display: none !important; }
/* Article shell: keep rounded panel, hide overflow cleanly */
body.page-Beginner_Leveling_Guide #content,
body.page-Beginner_Leveling_Guide .mw-body,
body.page-MVP_Hunting_Guide #content,
body.page-MVP_Hunting_Guide .mw-body,
body.page-Farming_Guide #content,
body.page-Farming_Guide .mw-body,
body.page-Card_System #content,
body.page-Card_System .mw-body,
body.page-Corrida_ao_99 #content,
body.page-Corrida_ao_99 .mw-body { overflow: hidden !important; }
/* ── :has() fallback for future guide pages (modern browsers) ── */
body:not(.page-Main_Page):has(.timero-wiki-root) #bodyContent,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-body-content,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-parser-output,
body:not(.page-Main_Page):has(#leveling-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#mvp-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#farming-guide-root) #bodyContent,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-body-content,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-parser-output,
body:not(.page-Main_Page):has(#card-system-root) #bodyContent,
body:not(.page-Main_Page):has(#card-system-root) .mw-body-content,
body:not(.page-Main_Page):has(#card-system-root) .mw-parser-output {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body:not(.page-Main_Page):has(.timero-wiki-root) #firstHeading,
body:not(.page-Main_Page):has(.timero-wiki-root) .mw-first-heading,
body:not(.page-Main_Page):has(.timero-wiki-root) #contentSub,
body:not(.page-Main_Page):has(#leveling-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#leveling-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#leveling-guide-root) #contentSub,
body:not(.page-Main_Page):has(#mvp-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#mvp-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#mvp-guide-root) #contentSub,
body:not(.page-Main_Page):has(#farming-guide-root) #firstHeading,
body:not(.page-Main_Page):has(#farming-guide-root) .mw-first-heading,
body:not(.page-Main_Page):has(#farming-guide-root) #contentSub,
body:not(.page-Main_Page):has(#card-system-root) #firstHeading,
body:not(.page-Main_Page):has(#card-system-root) .mw-first-heading,
body:not(.page-Main_Page):has(#card-system-root) #contentSub { display: none !important; }
/* ════════════════════════════════════════════════════════
§7 GENERIC ARTICLE SHELL (non-custom pages)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body {
background: linear-gradient(180deg, rgba(10,22,40,0.94) 0%, rgba(7,16,29,0.96) 100%) !important;
color: var(--timero-text) !important;
border: 1px solid var(--timero-border) !important;
border-radius: var(--timero-radius-xl) !important;
box-shadow: var(--timero-shadow-lg);
margin-top: 16px !important;
overflow: hidden;
position: relative;
}
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) .mw-body::before,
body:not(.page-Main_Page):not(.page-Beginner_Leveling_Guide):not(.page-MVP_Hunting_Guide):not(.page-Farming_Guide):not(.page-Card_System):not(.page-Corrida_ao_99) #content::before {
content: "";
display: block;
height: 3px;
background: linear-gradient(90deg, transparent, var(--timero-cyan), var(--timero-purple), transparent);
opacity: .88;
}
body:not(.page-Main_Page) #bodyContent,
body:not(.page-Main_Page) .mw-body-content,
body:not(.page-Main_Page) .mw-parser-output {
color: var(--timero-text) !important;
background: transparent !important;
}
/* ════════════════════════════════════════════════════════
§8 TYPOGRAPHY
════════════════════════════════════════════════════════ */
.mw-body h1,.mw-body h2,.mw-body h3,
.mw-body h4,.mw-body h5,.mw-body h6,
#firstHeading,.mw-first-heading {
font-family: var(--timero-font-display) !important;
color: #ffffff !important;
letter-spacing: .02em;
line-height: 1;
}
body:not(.page-Main_Page) #firstHeading,
body:not(.page-Main_Page) .mw-first-heading {
margin-bottom: 18px !important;
padding-bottom: 12px;
border-bottom: 1px solid var(--timero-cyan-line);
text-shadow: 0 3px 12px rgba(0,0,0,.20);
}
body:not(.page-Main_Page) .mw-body h2,
body:not(.page-Main_Page) .mw-body h3 {
border-bottom: 1px solid rgba(0,212,255,0.12);
padding-bottom: 8px;
margin-top: 28px;
margin-bottom: 12px;
}
body:not(.page-Main_Page) .mw-body h2 { font-size: clamp(1.8rem,2.6vw,2.35rem); }
body:not(.page-Main_Page) .mw-body h3 { font-size: clamp(1.35rem,2.2vw,1.7rem); }
.mw-parser-output p { line-height: 1.8; color: var(--timero-text-soft); }
/* ════════════════════════════════════════════════════════
§9 CONTENT FLOW (no paragraph balloons)
════════════════════════════════════════════════════════ */
body:not(.page-Main_Page) .mw-parser-output > p,
body:not(.page-Main_Page) .mw-parser-output > ul,
body:not(.page-Main_Page) .mw-parser-output > ol,
body:not(.page-Main_Page) .mw-parser-output > table,
body:not(.page-Main_Page) .mw-parser-output > blockquote,
body:not(.page-Main_Page) .mw-parser-output > pre,
body:not(.page-Main_Page) .mw-parser-output > .toc,
body:not(.page-Main_Page) .mw-parser-output > #toc {
background: transparent !important;
border: 0 !important; border-radius: 0 !important;
padding: 0 !important; box-shadow: none !important;
}
body:not(.page-Main_Page) .mw-parser-output > * + * { margin-top: 14px; }
/* ════════════════════════════════════════════════════════
§10 LINKS
════════════════════════════════════════════════════════ */
.mw-body a,
.mw-parser-output a,
.vector-body a {
color: #66dfff !important;
text-decoration: none;
transition: color .18s, text-shadow .18s;
}
.mw-body a:hover,
.mw-parser-output a:hover,
.vector-body a:hover {
color: #ffffff !important;
text-decoration: none;
text-shadow: 0 0 14px rgba(0,212,255,.32);
}
.mw-body a:visited,
.mw-parser-output a:visited { color: #9adfff !important; }
/* Suppress external link arrows inside guide roots */
.timero-wiki-root a.external::after,
.timero-wiki-root a.extiw::after,
#leveling-guide-root a.external::after,
#leveling-guide-root a.extiw::after,
#mvp-guide-root a.external::after,
#mvp-guide-root a.extiw::after,
#farming-guide-root a.external::after,
#farming-guide-root a.extiw::after,
#card-system-root a.external::after,
#card-system-root a.extiw::after { display: none !important; }
/* Guide-root links inherit colour from their styled containers */
.timero-wiki-root a,
#leveling-guide-root a,
#mvp-guide-root a,
#farming-guide-root a,
#card-system-root a {
color: inherit !important;
text-decoration: none !important;
}
.timero-wiki-root a:hover,
#leveling-guide-root a:hover,
#mvp-guide-root a:hover,
#farming-guide-root a:hover,
#card-system-root a:hover {
color: inherit !important;
text-decoration: none !important;
filter: brightness(1.1);
}
/* ════════════════════════════════════════════════════════
§11 LISTS / HR / BLOCKQUOTE / CODE (article pages)
════════════════════════════════════════════════════════ */
.mw-parser-output ul,
.mw-parser-output ol { padding-left: 1.6rem; }
.mw-parser-output hr {
border: none;
border-top: 1px solid rgba(255,255,255,0.08);
margin: 28px 0;
}
.mw-parser-output blockquote {
background: linear-gradient(180deg, rgba(0,212,255,0.05), rgba(255,255,255,.02));
border-left: 3px solid rgba(0,212,255,.35);
padding: 14px 16px;
color: #d5e4f5;
border-radius: 12px;
}
.mw-parser-output code,
.mw-parser-output pre,
.mw-code {
background: rgba(0,0,0,.26) !important;
color: #d8f2ff !important;
border: 1px solid var(--timero-border);
border-radius: 10px;
font-family: var(--timero-font-mono) !important;
}
.mw-parser-output code { padding: 2px 6px; }
.mw-parser-output pre { padding: 14px; overflow: auto; }
/* ════════════════════════════════════════════════════════
§12 TOC
════════════════════════════════════════════════════════ */
#toc, .toc, .mw-parser-output .toc {
background: linear-gradient(180deg, rgba(8,18,32,.95), rgba(10,22,40,.90)) !important;
border: 1px solid var(--timero-cyan-line) !important;
border-radius: var(--timero-radius-md);
padding: 14px 16px;
color: var(--timero-text);
box-shadow: var(--timero-shadow-md);
}
#toc .toctitle, .toc .toctitle {
color: #ffffff;
font-family: var(--timero-font-display);
}
/* ════════════════════════════════════════════════════════
§13 WIKITABLES
════════════════════════════════════════════════════════ */
.wikitable, table.wikitable {
background: rgba(10,20,36,.94) !important;
color: var(--timero-text) !important;
border: 1px solid var(--timero-cyan-line) !important;
border-collapse: collapse;
border-radius: var(--timero-radius-md);
overflow: hidden;
}
.wikitable th, table.wikitable th {
background: linear-gradient(180deg, rgba(0,212,255,.12), rgba(0,212,255,.06)) !important;
color: #ffffff !important;
border: 1px solid var(--timero-border) !important;
font-weight: 700;
padding: 10px 12px;
font-family: var(--timero-font-display) !important;
letter-spacing: .04em;
}
.wikitable td, table.wikitable td {
background: rgba(255,255,255,.02) !important;
color: var(--timero-text-soft) !important;
border: 1px solid var(--timero-border) !important;
padding: 10px 12px;
}
.wikitable tr:nth-child(even) td,
table.wikitable tr:nth-child(even) td {
background: rgba(255,255,255,.032) !important;
}
/* ════════════════════════════════════════════════════════
§14 FORMS / INPUTS / BUTTONS
════════════════════════════════════════════════════════ */
input, select, textarea, button {
font-family: var(--timero-font-body);
}
input[type="text"],input[type="search"],input[type="password"],
input[type="email"],input[type="number"],
select, textarea,
.vector-search-box-input,
.cdx-text-input__input,
#searchInput {
background: rgba(12,18,28,.95) !important;
color: #eef6ff !important;
border: 1px solid var(--timero-border-mid) !important;
border-radius: var(--timero-radius-sm) !important;
box-shadow: none !important;
}
input:focus,select:focus,textarea:focus,
.vector-search-box-input:focus,
.cdx-text-input__input:focus,
#searchInput:focus {
outline: none;
border-color: var(--timero-cyan-line) !important;
box-shadow: 0 0 0 3px var(--timero-cyan-soft) !important;
}
button,
input[type="submit"],
input[type="button"],
.mw-htmlform input[type="submit"] {
background: linear-gradient(135deg, #00d4ff, #7a37ff) !important;
color: #fff !important;
border: none !important;
border-radius: var(--timero-radius-sm);
font-weight: 700;
transition: transform .2s, box-shadow .2s;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,212,255,.22);
}
/* ════════════════════════════════════════════════════════
§15 CATEGORIES / THUMBS / MESSAGES
════════════════════════════════════════════════════════ */
.catlinks {
background: rgba(10,20,36,.88) !important;
border: 1px solid var(--timero-border) !important;
border-radius: var(--timero-radius-sm);
padding: 10px 12px;
}
.thumbinner, div.thumbinner, .infobox {
background: rgba(255,255,255,.03) !important;
border: 1px solid var(--timero-border) !important;
border-radius: var(--timero-radius-sm);
}
.messagebox,.ambox,.tmbox,.cmbox,.ombox {
background: rgba(10,20,36,.90) !important;
color: #eef6ff !important;
border: 1px solid var(--timero-cyan-line) !important;
border-radius: var(--timero-radius-sm);
}
/* ════════════════════════════════════════════════════════
§16 KEYFRAMES — ALL PAGES UNIFIED
Canonical set: every animation used anywhere in the wiki.
════════════════════════════════════════════════════════ */
/* ── Universal ── */
@keyframes timero-fade-up {
from { opacity:0; transform:translateY(20px); filter:blur(3px); }
to { opacity:1; transform:none; filter:none; }
}
@keyframes timero-shimmer {
0% { background-position: -200% center; }
60%,100% { background-position: 200% center; }
}
@keyframes timero-blink {
0%,100% { opacity:1; }
50% { opacity:.22; }
}
@keyframes timero-grid-drift {
from { background-position: 0 0; }
to { background-position: 0 48px; }
}
@keyframes timero-pulse-ring {
0% { transform:scale(1); opacity:.55; }
100% { transform:scale(2.2); opacity:0; }
}
@keyframes timero-float {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-7px); }
}
@keyframes timero-halo-spin { to { transform:rotate(360deg); } }
@keyframes timero-spin { to { transform:rotate(360deg); } }
/* ── Leveling Guide ── */
@keyframes guide-phase-in {
from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:none; }
}
@keyframes guide-bar-fill {
from { width:0; opacity:0; }
}
@keyframes guide-hero-gradient {
0%,100% { background-position: 0 center; }
50% { background-position: 100% center; }
}
@keyframes guide-trophy-float {
0%,100% { transform:translateY(0) scale(1); }
50% { transform:translateY(-6px) scale(1.05); }
}
@keyframes guide-dot-pulse {
0%,100% { box-shadow: 0 0 12px rgba(0,255,136,.40); }
50% { box-shadow: 0 0 24px rgba(0,255,136,.65), 0 0 48px rgba(0,255,136,.18); }
}
/* ── MVP Guide ── */
@keyframes mvp-card-in {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:none; }
}
@keyframes respawn-pulse {
0% { opacity:1; }
100% { opacity:.35; }
}
@keyframes timer-blink {
0%,100% { opacity:1; box-shadow:0 0 8px var(--timero-cyan); }
50% { opacity:.28; box-shadow:none; }
}
/* ── Farming Guide ── */
@keyframes ticker-scroll {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
@keyframes method-in {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:none; }
}
@keyframes route-in {
from { opacity:0; transform:translateY(8px); }
to { opacity:1; transform:none; }
}
@keyframes fade-up { /* alias — same as timero-fade-up */
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:none; }
}
/* ── Card System ── */
@keyframes card-row-in {
from { opacity:0; transform:translateY(6px); }
to { opacity:1; transform:none; }
}
@keyframes detail-expand {
from { opacity:0; transform:translateY(-5px); }
to { opacity:1; transform:none; }
}
@keyframes rune-spin { to { transform:rotate(360deg); } }
/* ── Corrida ao 99 / Podium ── */
@keyframes fireRise {
0%,100% { transform:scaleY(1) translateY(0); }
50% { transform:scaleY(1.06) translateY(-3px); }
}
@keyframes podiumRise {
from { opacity:0; transform:translateY(40px) scale(.95); }
to { opacity:1; transform:none; }
}
@keyframes goldShine {
0% { background-position:-200% center; }
60%,100% { background-position: 200% center; }
}
@keyframes raceLines {
from { background-position:0 0; }
to { background-position:0 80px; }
}
@keyframes countFlip {
from { opacity:0; transform:translateY(-12px); }
to { opacity:1; transform:none; }
}
@keyframes haloSpin { to { transform:rotate(360deg); } }
@keyframes bgBreath {
0% { filter:brightness(1); }
100% { filter:brightness(1.07) saturate(1.10); }
}
@keyframes nebulaShift {
0% { filter:brightness(1); }
100% { filter:brightness(1.06) saturate(1.08); }
}
@keyframes revealUp {
from { opacity:0; transform:translateY(18px); filter:blur(3px); }
to { opacity:1; transform:none; filter:none; }
}
/* ════════════════════════════════════════════════════════
§17 COMPONENT TOKENS
Injected as CSS vars on every guide root so inline styles
that reference e.g. var(--c) resolve consistently.
════════════════════════════════════════════════════════ */
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root,
.timero-wiki-root {
/* map short-hand vars to canonical tokens */
--c: var(--timero-cyan);
--g: var(--timero-gold);
--ok: var(--timero-green);
--bad: var(--timero-red);
--txt: var(--timero-text);
--muted: var(--timero-text-muted);
--void: var(--timero-bg-0);
--panel: var(--timero-panel);
--ln: var(--timero-border);
--ln2: var(--timero-border-mid);
}
/* ════════════════════════════════════════════════════════
§18 GUIDE ROOT NORMALISATIONS (all five roots)
Applied uniformly: box-sizing, font, heading borders,
code neutralisation, link inheritance, dimensions.
════════════════════════════════════════════════════════ */
.timero-wiki-root,
#leveling-guide-root,
#mvp-guide-root,
#farming-guide-root,
#card-system-root {
display: block;
margin: 0 !important;
width: 100% !important; max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
font-family: var(--timero-font-body) !important;
color: var(--timero-text);
}
.timero-wiki-root > div,
#leveling-guide-root > div,
#mvp-guide-root > div,
#farming-guide-root > div,
#card-system-root > div {
width: 100% !important; max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* headings — strip wiki borders, use display font */
.timero-wiki-root h1, .timero-wiki-root h2, .timero-wiki-root h3,
.timero-wiki-root h4, .timero-wiki-root h5, .timero-wiki-root h6,
#leveling-guide-root h1, #leveling-guide-root h2, #leveling-guide-root h3,
#leveling-guide-root h4, #leveling-guide-root h5, #leveling-guide-root h6,
#mvp-guide-root h1, #mvp-guide-root h2, #mvp-guide-root h3,
#mvp-guide-root h4, #mvp-guide-root h5, #mvp-guide-root h6,
#farming-guide-root h1, #farming-guide-root h2, #farming-guide-root h3,
#farming-guide-root h4, #farming-guide-root h5, #farming-guide-root h6,
#card-system-root h1, #card-system-root h2, #card-system-root h3,
#card-system-root h4, #card-system-root h5, #card-system-root h6 {
font-family: var(--timero-font-display) !important;
border: none !important;
border-bottom: none !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
color: #fff !important;
}
/* code/pre — neutralise wiki styling completely */
.timero-wiki-root pre, .timero-wiki-root code, .timero-wiki-root .mw-code,
#leveling-guide-root pre, #leveling-guide-root code, #leveling-guide-root .mw-code,
#mvp-guide-root pre, #mvp-guide-root code, #mvp-guide-root .mw-code,
#farming-guide-root pre, #farming-guide-root code, #farming-guide-root .mw-code,
#card-system-root pre, #card-system-root code, #card-system-root .mw-code {
display: inline !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important;
border: 0 !important; box-shadow: none !important;
color: inherit !important;
font: inherit !important;
line-height: inherit !important;
white-space: normal !important;
overflow: visible !important;
}
/* ════════════════════════════════════════════════════════
§19 LEVELING GUIDE (#leveling-guide-root)
Accent: green #00ff88. Phase nav, bars, checklists.
════════════════════════════════════════════════════════ */
#leveling-guide-root {
background: #05080f;
}
/* Phase navigator — ensure it sits above the article shell header */
#phase-nav {
z-index: 9800 !important;
transition: background .15s;
}
#phase-nav a.pnav-item {
transition: background .15s, color .15s;
border-radius: 8px;
margin: 0 4px;
text-decoration: none !important;
}
#phase-nav a.pnav-item:hover { background: rgba(0,255,136,.09) !important; }
/* Class filter bar — sticky above content */
#leveling-guide-root > div:nth-child(4) {
position: sticky;
top: 0;
z-index: 200;
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
}
/* Phase blocks */
.phase-block {
animation: guide-phase-in .65s cubic-bezier(.22,1,.36,1) both;
}
#phase-1 { animation-delay:.05s; }
#phase-2 { animation-delay:.12s; }
#phase-3 { animation-delay:.19s; }
#phase-4 { animation-delay:.26s; }
#phase-5 { animation-delay:.33s; }
/* Class filter buttons */
.cf-btn {
transition: opacity .18s, transform .15s, background .18s;
cursor: pointer;
user-select: none;
}
.cf-btn:hover { transform: translateY(-2px); opacity: 1 !important; }
/* Monster entries */
.mob-entry {
transition: border-color .18s, box-shadow .18s;
cursor: pointer;
}
.mob-entry:hover { box-shadow: 0 4px 16px rgba(0,0,0,.36); }
/* Checklist items */
.check-item {
transition: background .15s, border-color .15s, transform .15s;
user-select: none;
cursor: pointer;
}
.check-item:hover {
background: rgba(0,255,136,.04) !important;
border-color: rgba(0,255,136,.20) !important;
transform: translateX(3px);
}
.check-item[data-checked="1"] {
background: rgba(0,255,136,.04) !important;
border-color: rgba(0,255,136,.16) !important;
}
/* Accordion */
.accord-head { transition: background .15s; cursor: pointer; }
.accord-head:hover { background: rgba(255,255,255,.068) !important; }
.accord-icon { transition: transform .22s cubic-bezier(.22,1,.36,1); }
/* Efficiency / progress bars (leveling progress strip) */
.eff-bar { transition: width .8s cubic-bezier(.22,1,.36,1); }
/* Guide bar-fill: animate on scroll via IntersectionObserver (JS handles it),
this just ensures the CSS transition is present as fallback */
[style*="animation:guide-bar-fill"] {
animation-play-state: paused;
}
/* Hero title shimmer */
#leveling-guide-root [style*="background:linear-gradient(90deg,#00ff88,#00d4ff)"] {
background-size: 200% auto;
animation: guide-hero-gradient 4s ease infinite;
}
/* Trophy float */
[style*="font-size:2.5rem;margin-bottom:8px"] {
display: inline-block;
animation: guide-trophy-float 3s ease-in-out infinite;
}
/* ════════════════════════════════════════════════════════
§20 MVP HUNTING GUIDE (#mvp-guide-root)
Accent: crimson #ff3d5a + fire #ff6b00.
════════════════════════════════════════════════════════ */
#mvp-guide-root {
background: #04060d;
}
/* Tier filter bar — sticky with high z-index */
#tier-filter-bar {
position: sticky;
top: 0;
z-index: 300;
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
}
/* Tier/sort buttons */
.tf-btn, .sort-btn {
transition: opacity .18s, background .18s, transform .15s;
cursor: pointer;
}
.tf-btn:hover, .sort-btn:hover { transform: translateY(-2px); }
/* Boss cards */
.boss-card {
animation: mvp-card-in .5s ease both;
transition: box-shadow .25s;
}
.boss-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.60) !important; }
/* Boss dossier expand */
.boss-dossier { animation: detail-expand .3s ease both; }
/* Boss chevron */
.boss-chevron {
transition: transform .22s cubic-bezier(.22,1,.36,1);
display: inline-block;
}
/* Respawn pulse bar */
[style*="animation:respawn-pulse"] {
animation: respawn-pulse 2s ease-in-out infinite alternate;
}
/* Timer blink dot */
[style*="animation:timer-blink"] {
animation: timer-blink 1.2s ease infinite;
}
/* Class MVP accordion */
.class-mvp-row { cursor: pointer; }
.class-chevron {
transition: transform .22s cubic-bezier(.22,1,.36,1);
display: inline-block;
}
/* Manual timer input fields */
#manual-mvp-name:focus,
#manual-mvp-respawn:focus {
border-color: rgba(0,212,255,.38) !important;
box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
outline: none;
}
/* ════════════════════════════════════════════════════════
§21 FARMING GUIDE (#farming-guide-root)
Accent: gold #f9c500. Ticker, method tabs, routes, calc.
════════════════════════════════════════════════════════ */
#farming-guide-root {
background: #030508;
}
/* Market ticker */
.ticker-track {
animation: ticker-scroll 38s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
/* Method tab hover */
#methods-section button {
transition: background .18s, color .18s, font-weight .1s;
}
/* Route pills */
.route-pill {
transition: transform .18s, box-shadow .18s, opacity .18s;
cursor: pointer;
}
.route-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.40); }
/* Route detail card */
.route-detail { animation: route-in .3s ease both; }
/* Method panel */
.method-panel { animation: method-in .3s ease both; }
/* Efficiency bars */
#farming-guide-root .eff-bar {
transition: width .8s cubic-bezier(.22,1,.36,1);
}
/* Loadout items */
.loadout-item {
transition: background .15s, border-color .15s, transform .15s;
cursor: pointer;
}
.loadout-item:hover { transform: translateX(3px); }
/* Calculator inputs */
#calc-method:focus {
border-color: rgba(0,212,255,.38) !important;
box-shadow: 0 0 0 3px rgba(0,212,255,.10) !important;
outline: none;
}
#card-search:focus {
border-color: rgba(124,106,255,.40) !important;
box-shadow: 0 0 0 3px rgba(124,106,255,.10) !important;
outline: none;
}
/* Related guide cards */
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"],
#card-system-root [style*="padding:18px 16px;border-radius:12px"] {
transition: transform .2s ease, box-shadow .2s ease;
}
#farming-guide-root [style*="padding:20px 18px;border-radius:14px"]:hover,
#card-system-root [style*="padding:18px 16px;border-radius:12px"]:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(0,0,0,.50);
}
/* ════════════════════════════════════════════════════════
§22 CARD SYSTEM (#card-system-root)
Accent: arcane violet #7c6aff + collection gold #f9c500.
════════════════════════════════════════════════════════ */
#card-system-root {
background: #030408;
}
/* Live search */
#card-search {
transition: border-color .18s, box-shadow .18s;
}
/* Category tabs */
#card-db-section button {
transition: background .16s, color .16s;
}
/* Table rows */
.card-row {
animation: card-row-in .25s ease both;
transition: background .14s;
cursor: pointer;
}
.card-row:hover { background: rgba(124,106,255,.07) !important; }
/* Sort indicators */
.th-cell.sortable {
cursor: pointer;
user-select: none;
transition: color .15s;
}
.th-cell.sortable:hover { color: #9d8fff !important; }
.sort-ind { transition: color .15s; }
/* Collection group cards */
.cg-card {
transition: box-shadow .2s;
cursor: pointer;
}
.cg-card:hover { box-shadow: 0 6px 28px rgba(0,0,0,.45); }
.cg-chevron {
transition: transform .22s cubic-bezier(.22,1,.36,1);
display: inline-block;
}
/* FAQ entries */
.faq-entry > div:first-child {
cursor: pointer;
transition: background .15s;
}
.faq-entry > div:first-child:hover { background: rgba(255,255,255,.06) !important; }
.faq-chev {
transition: transform .22s ease;
display: inline-block;
}
/* Rune spin ornament */
[style*="animation:rune-spin"] {
animation: rune-spin 18s linear infinite;
}
/* ════════════════════════════════════════════════════════
§23 CORRIDA AO 99 (body.page-Corrida_ao_99)
Accent: fire #ff6b00 + gold podium. Bebas Neue font.
════════════════════════════════════════════════════════ */
body.page-Corrida_ao_99 .page-wrap h1,
body.page-Corrida_ao_99 .page-wrap h2,
body.page-Corrida_ao_99 .page-wrap h3 {
font-family: 'Bebas Neue', var(--timero-font-display) !important;
}
/* Background animation */
[style*="animation:bgBreath"],
[style*="animation:nebulaShift"] {
animation-duration: 14s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
[style*="animation:raceLines"] {
animation: raceLines 1.5s linear infinite;
}
[style*="animation:haloSpin"] {
animation: haloSpin 58s linear infinite;
}
/* Podium animations */
.podium-slot { animation: podiumRise .8s cubic-bezier(.22,1,.36,1) both; }
.podium-slot.rank-1 { animation-delay: .10s; }
.podium-slot.rank-2 { animation-delay: .25s; }
.podium-slot.rank-3 { animation-delay: .40s; }
/* Podium hover sweep */
.podium-block-inner {
transition: box-shadow .25s;
overflow: hidden;
}
.podium-slot:hover .podium-block-inner {
box-shadow: 0 0 20px rgba(249,197,0,.22);
}
/* Prize badge shimmer */
.prize-badge { position: relative; overflow: hidden; }
.prize-badge::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
transform: translateX(-100%);
}
.prize-badge:hover::before {
transform: translateX(200%);
transition: transform .55s ease;
}
/* Countdown digit flip */
[style*="animation:countFlip"] { animation: countFlip .2s ease both; }
/* Fire button hover */
.btn-fire { transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
.btn-fire:hover { transform: translateY(-3px); }
/* Leaderboard rows */
.lb-row { transition: background .16s; }
/* FAQ accordion (Corrida uses same .faq-item pattern as leveling) */
.faq-item > .faq-q { cursor: pointer; transition: background .15s; }
.faq-item > .faq-q i { transition: transform .2s; }
.faq-item.open .faq-q i { transform: rotate(180deg); }
/* ════════════════════════════════════════════════════════
§24 MAIN PAGE COMPONENT CLASSES
All .timero-* and .timero-db2-* preserved exactly.
════════════════════════════════════════════════════════ */
/* ── Guide card section ── */
.timero-guides-section {
width: min(1180px, calc(100% - 42px));
margin: 0 auto;
padding: 72px 0 36px;
}
.timero-guides-head { text-align: center; margin-bottom: 38px; }
.timero-guides-kicker {
display: inline-flex; align-items: center; justify-content: center;
min-height: 32px; padding: 0 18px; border-radius: 999px;
border: 1px solid rgba(121,82,255,.35);
background: rgba(62,32,110,.22);
color: #9f73ff;
font-size: .68rem; font-weight: 800; letter-spacing: .22em;
text-transform: uppercase; margin-bottom: 18px;
box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.timero-guides-head h2 {
margin: 0 0 10px;
font-family: var(--timero-font-display) !important;
font-size: clamp(2.2rem,4vw,3.5rem);
line-height: 1; font-weight: 900; color: #fff !important;
letter-spacing: -.02em;
border: none !important;
text-shadow: 0 3px 12px rgba(0,0,0,.22);
}
.timero-guides-head p { margin:0; font-size:1rem; color:rgba(108,152,214,.88); letter-spacing:.02em; }
.timero-guides-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.timero-guide-card {
border-radius: 22px; overflow: hidden;
background: linear-gradient(180deg,#07111d 0%,#050b14 100%);
border: 1px solid rgba(0,212,255,.12);
box-shadow: 0 20px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.02) inset;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.timero-guide-card:hover { transform: translateY(-4px); }
.timero-guide-top {
min-height: 122px; padding: 26px 26px 20px;
border-bottom: 1px solid rgba(255,255,255,.06); position: relative;
}
.timero-guide-bottom { padding: 20px 22px 22px; background: rgba(3,9,16,.72); }
.timero-guide-icon { font-size:1.85rem; margin-bottom:12px; line-height:1; }
.timero-guide-label { font-size:.68rem; font-weight:900; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.timero-guide-title { font-family:var(--timero-font-display); font-size:1.75rem; line-height:1; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.2); }
.timero-guide-desc { color:rgba(103,146,208,.9); font-size:.98rem; line-height:1.85; margin-bottom:18px; }
.timero-guide-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.timero-guide-tags span {
display:inline-flex; align-items:center; justify-content:center;
min-height:28px; padding:0 12px; border-radius:999px;
font-size:.78rem; font-weight:800; letter-spacing:.02em;
border:1px solid currentColor; background:rgba(255,255,255,.02);
}
.timero-guide-link a {
font-family:var(--timero-font-display);
font-size:1.02rem; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; text-decoration:none !important;
}
.timero-guide-link a:hover { filter:brightness(1.08); text-decoration:none !important; }
/* Guide card colour variants */
.timero-guide-card-green {
border-color:rgba(0,199,122,.22);
box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(0,199,122,.06);
}
.timero-guide-card-green .timero-guide-top {
background:linear-gradient(135deg,rgba(0,112,77,.34) 0%,rgba(0,61,58,.22) 100%);
border-bottom-color:rgba(0,199,122,.18);
}
.timero-guide-card-green .timero-guide-icon,
.timero-guide-card-green .timero-guide-label,
.timero-guide-card-green .timero-guide-link a,
.timero-guide-card-green .timero-guide-tags span { color:#00ff88 !important; }
.timero-guide-card-green .timero-guide-tags span { background:rgba(0,255,136,.08); border-color:rgba(0,255,136,.28); }
.timero-guide-card-red {
border-color:rgba(255,47,92,.22);
box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,47,92,.05);
}
.timero-guide-card-red .timero-guide-top {
background:linear-gradient(135deg,rgba(70,17,40,.58) 0%,rgba(34,20,70,.30) 100%);
border-bottom-color:rgba(255,47,92,.16);
}
.timero-guide-card-red .timero-guide-icon,
.timero-guide-card-red .timero-guide-label,
.timero-guide-card-red .timero-guide-link a,
.timero-guide-card-red .timero-guide-tags span { color:#ff355e !important; }
.timero-guide-card-red .timero-guide-tags span { background:rgba(255,53,94,.08); border-color:rgba(255,53,94,.26); }
.timero-guide-card-gold {
border-color:rgba(255,176,32,.22);
box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 24px rgba(255,176,32,.05);
}
.timero-guide-card-gold .timero-guide-top {
background:linear-gradient(135deg,rgba(70,52,17,.42) 0%,rgba(36,36,36,.18) 100%);
border-bottom-color:rgba(255,176,32,.16);
}
.timero-guide-card-gold .timero-guide-icon,
.timero-guide-card-gold .timero-guide-label,
.timero-guide-card-gold .timero-guide-link a,
.timero-guide-card-gold .timero-guide-tags span { color:#ffb020 !important; }
.timero-guide-card-gold .timero-guide-tags span { background:rgba(255,176,32,.08); border-color:rgba(255,176,32,.24); }
/* ── Database section (main page) ── */
.timero-db2-section {
background:linear-gradient(180deg,#07101e 0%,#05080f 100%);
padding:72px 42px;
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
}
.timero-db2-head {
width:min(1220px,calc(100% - 40px));
margin:0 auto 28px; text-align:center;
}
.timero-db2-kicker {
display:inline-flex; align-items:center;
min-height:32px; padding:0 16px; border-radius:999px;
background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.18);
color:#00d4ff; font-size:.68rem; font-weight:800;
letter-spacing:.18em; text-transform:uppercase; margin-bottom:16px;
}
.timero-db2-head h2 {
margin:0 0 10px; color:#fff !important;
font-family:var(--timero-font-display) !important;
font-size:clamp(2rem,3.8vw,3rem); font-weight:900; line-height:1;
border:none !important;
}
.timero-db2-head p { margin:0; color:rgba(130,165,215,.82); font-size:1rem; line-height:1.8; }
.timero-db2-grid {
width:min(1220px,calc(100% - 40px));
margin:0 auto;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.timero-db2-quest-row {
width:min(1220px,calc(100% - 40px));
margin:16px auto 0; justify-content:center; align-items:center;
display:inline-flex;
}
.timero-db2-quest { max-width:calc((100% - 48px) / 4); }
.timero-db2-card {
border-radius:22px; overflow:hidden;
background:linear-gradient(180deg,rgba(8,18,32,.96),rgba(5,10,18,.98));
border:1px solid rgba(255,255,255,.08);
box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
.timero-db2-card:hover { transform:translateY(-4px); filter:brightness(1.03); }
.timero-db2-card > a { display:block; text-decoration:none !important; color:inherit !important; }
.timero-db2-link {
min-height:124px; padding:20px 22px;
display:flex; align-items:center; gap:16px;
text-decoration:none !important; color:inherit !important;
}
.timero-db2-icon {
width:56px; height:56px; border-radius:18px;
display:flex; align-items:center; justify-content:center;
font-size:1.45rem; flex:0 0 auto;
background:rgba(255,255,255,.04);
box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.timero-db2-copy { display:flex; flex-direction:column; min-width:0; }
.timero-db2-title {
color:#fff; font-family:var(--timero-font-display);
font-size:1.6rem; font-weight:800; line-height:1; margin-bottom:6px;
}
.timero-db2-sub { font-size:.84rem; font-weight:700; letter-spacing:.04em; line-height:1.4; }
/* DB card colour variants */
.timero-db2-red { border-color:rgba(255,53,94,.24); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,53,94,.06); }
.timero-db2-red .timero-db2-icon { color:#ff6a8a; } .timero-db2-red .timero-db2-sub { color:#ff355e; }
.timero-db2-gold { border-color:rgba(255,176,32,.24); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(255,176,32,.06); }
.timero-db2-gold .timero-db2-icon { color:#dff6ff; } .timero-db2-gold .timero-db2-sub { color:#ffb020; }
.timero-db2-cyan { border-color:rgba(0,212,255,.24); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,212,255,.06); }
.timero-db2-cyan .timero-db2-icon { color:#63e9ff; } .timero-db2-cyan .timero-db2-sub { color:#00d4ff; }
.timero-db2-purple { border-color:rgba(143,99,255,.24); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(143,99,255,.06); }
.timero-db2-purple .timero-db2-icon { color:#ffe45f; } .timero-db2-purple .timero-db2-sub { color:#ab84ff; }
.timero-db2-green { border-color:rgba(0,255,136,.24); box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.02) inset,0 0 28px rgba(0,255,136,.06); }
.timero-db2-green .timero-db2-icon { color:#f2dfcb; } .timero-db2-green .timero-db2-sub { color:#00ff88; }
/* Nav cards */
.timero-nav-card { cursor:pointer; }
.timero-nav-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.28) !important; filter:brightness(1.04); }
/* ── Timero card (general) ── */
.timero-card {
background:linear-gradient(160deg,rgba(10,20,36,.9),rgba(6,12,24,.95));
border:1px solid rgba(0,212,255,.16);
border-radius:var(--timero-radius-lg);
padding:28px 22px;
position:relative; overflow:hidden;
transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
.timero-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,212,255,.18); }
/* Timero hero */
.timero-hero {
position:relative;
background:linear-gradient(160deg,#02040a 0%,#071020 40%,#0a1628 70%,#06101e 100%);
padding:64px 48px 52px; text-align:center; overflow:hidden;
border-bottom:1px solid rgba(0,212,255,.15);
animation:timero-fade-up .8s cubic-bezier(.22,1,.36,1) both;
}
.timero-hero > div:first-child { animation:timero-grid-drift 8s linear infinite; }
/* Grid helpers */
.timero-grid { display:grid; gap:16px; }
.timero-grid-2 { grid-template-columns:repeat(2,1fr); }
.timero-grid-3 { grid-template-columns:repeat(3,1fr); }
.timero-grid-4 { grid-template-columns:repeat(4,1fr); }
.timero-section { background:#07101e; padding:56px 48px; border-bottom:1px solid rgba(255,255,255,.06); }
/* Timero button */
.timero-btn {
display:inline-flex; align-items:center; justify-content:center;
gap:8px; padding:12px 18px; border-radius:var(--timero-radius-sm);
background:linear-gradient(135deg,#00d4ff,#7a37ff);
color:#fff !important; text-decoration:none !important;
font-weight:800; letter-spacing:.04em; text-transform:uppercase;
box-shadow:0 12px 36px rgba(0,212,255,.25);
transition:transform .2s,box-shadow .2s;
}
.timero-btn:hover { transform:translateY(-3px); box-shadow:0 18px 50px rgba(0,212,255,.35); text-decoration:none !important; color:#fff !important; }
/* ════════════════════════════════════════════════════════
§25 RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
.timero-db2-grid { grid-template-columns:repeat(2,1fr); }
.timero-db2-quest { max-width:100%; }
}
@media (max-width: 980px) {
.timero-guides-grid { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
/* Leveling guide: hide fixed phase nav */
#phase-nav { display:none !important; }
.timero-grid-4 { grid-template-columns:repeat(2,1fr); }
.timero-grid-3 { grid-template-columns:repeat(2,1fr); }
.timero-grid-2 { grid-template-columns:1fr; }
/* Boss grid: 1 column */
#boss-grid { grid-template-columns:1fr !important; }
/* Table header + rows: collapse to 3 cols on MVP */
#tier-filter-bar { padding:12px 16px !important; }
/* Farming: 1-col grids */
#methods-section [style*="grid-template-columns:1fr 1fr"],
#routes-section [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns:1fr !important;
}
/* Card system table: simplified columns on tablet */
#table-header,
.card-row {
grid-template-columns:60px 1fr 90px !important;
}
#table-header > div:nth-child(4),
#table-header > div:nth-child(5),
.card-row > div:nth-child(4),
.card-row > div:nth-child(5) { display:none !important; }
/* Corrida: podium simplified */
.podium-name { font-size:1.1rem; }
.podium-medal { font-size:2.5rem; }
}
@media (max-width: 640px) {
/* Global padding normalisation for guide pages */
#leveling-guide-root [style*="padding:52px 80px"],
#leveling-guide-root [style*="padding:56px 80px"],
#mvp-guide-root [style*="padding:52px 64px"],
#mvp-guide-root [style*="padding:56px 64px"],
#mvp-guide-root [style*="padding:60px 64px"],
#farming-guide-root [style*="padding:52px 64px"],
#farming-guide-root [style*="padding:48px 64px"],
#farming-guide-root [style*="padding:28px 64px"],
#card-system-root [style*="padding:52px 64px"],
#card-system-root [style*="padding:48px 64px"],
#card-system-root [style*="padding:56px 64px"] {
padding-left: 18px !important;
padding-right: 18px !important;
}
/* Global grids → 1 col */
.timero-grid-4,
.timero-grid-3,
.timero-grid-2 { grid-template-columns:1fr; }
.timero-db2-grid { grid-template-columns:1fr; }
.timero-db2-link { min-height:96px; padding:16px 18px; }
.timero-db2-title { font-size:1.65rem; }
.timero-db2-sub { font-size:.80rem; }
/* Corrida */
.hero-race-num { font-size:clamp(4rem,22vw,8rem) !important; }
.prizes-grid { grid-template-columns:1fr !important; }
.countdown-units { gap:10px; }
.cd-num { font-size:2.4rem !important; }
/* Farming methods metrics grid */
[style*="grid-template-columns:1fr 1fr"]:not(#farming-guide-root [style*="gap:16px"]) {
/* Careful not to collapse all 2-col grids — only safe targets */
}
/* Card system table: further collapse */
#table-header,
.card-row { grid-template-columns:56px 1fr !important; }
#table-header > div:nth-child(3),
.card-row > div:nth-child(3) { display:none !important; }
/* Card detail panel: stack columns */
.card-row + div [style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns:1fr !important;
}
/* Loadout grid */
#loadout-items { grid-template-columns:1fr 1fr !important; }
/* Hero CTAs */
.timero-hero [style*="display:flex;gap:12px;justify-content:center"] {
flex-direction:column !important; align-items:center !important;
}
}
/* ════════════════════════════════════════════════════════
§26 PRINT
════════════════════════════════════════════════════════ */
@media print {
.timero-hero [style*="position:absolute"],
#phase-nav,
#tier-filter-bar,
.ticker-track,
.bg-nebula,.bg-track,.bg-grid,.bg-scan,
.bg-halo,.db-bg,.db-grid,.db-scan,
#bgCanvas,#dbCanvas { display:none !important; }
/* Force readable light colours */
html,body { background:#fff !important; color:#111 !important; }
.mw-body,#content { background:#fff !important; color:#111 !important; border:none !important; }
/* Ensure accordion / dossier content is visible */
.accord-body,
.boss-dossier,
.method-panel,
.route-detail,
.faq-body,
.cg-detail,
.class-mvp-detail { display:block !important; max-height:none !important; }
/* Navigation links unnecessary in print */
#footer, .catlinks { display:none; }
}
/* TimeRO monster chips */
.monster-link-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
vertical-align: middle !important;
overflow: visible !important;
}
.monster-link-chip .monster-gif-wrap {
width: 54px !important;
height: 54px !important;
flex: 0 0 54px !important;
min-width: 54px !important;
max-width: 54px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
line-height: 0 !important;
}
.monster-link-chip .monster-gif-wrap img {
display: block !important;
max-width: 50px !important;
max-height: 50px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
vertical-align: middle !important;
image-rendering: auto !important;
}
.monster-link-chip .monster-name-wrap,
.monster-link-chip .monster-name-wrap a {
display: inline-flex !important;
align-items: center !important;
line-height: 1.1 !important;
color: #73d9ff !important;
text-decoration: none !important;
}
/* Daily quest table alignment */
.wikitable td,
.wikitable th {
vertical-align: middle !important;
}
.wikitable td .monster-link-chip {
margin-top: 4px !important;
margin-bottom: 4px !important;
}
/* Daily Quest table layout */
.daily-task-cell,
.daily-reward-cell {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
min-height: 70px !important;
}
.daily-task-label {
color: #d8e8ff !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.daily-reward-cell {
justify-content: center !important;
}
.daily-reward-extra {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 13px !important;
border-radius: 12px !important;
background: rgba(0,0,0,0.30) !important;
border: 1px solid rgba(120,190,255,0.18) !important;
color: #d8f3ff !important;
font-weight: 800 !important;
letter-spacing: 0.03em !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.daily-reward-plus {
color: #73d9ff !important;
font-weight: 900 !important;
}
/* Keep table cells vertically centered */
.wikitable td,
.wikitable th {
vertical-align: middle !important;
}
/* Monster chip inside daily tables */
.wikitable .monster-link-chip {
margin: 0 !important;
}