/* MELA Wiki - shared styles (loaded by all pages). Must sit alongside the HTML files (and the fonts/ folder). */ /* Theme grounded in MELA's in-game "Class Board": warm wood-toned palette, pixel/arcade headers, clean panels. */ @font-face{font-family:"RoundHead";src:url("fonts/baloo2-bold.woff2") format("woff2");font-weight:700;font-display:swap;} @font-face{font-family:"RoundHead";src:url("fonts/baloo2-semibold.woff2") format("woff2");font-weight:600;font-display:swap;} :root{ /* Pixel font for short Latin chrome; rounded warm fallback covers translated (CJK/Thai) text. */ --font-display:"RoundHead",ui-rounded,"Segoe UI",system-ui,sans-serif; --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace; /* Warm board accents sampled from the game */ --cyan:#5cc8f0; --cool-line:rgba(92,200,240,.22); /* Design tokens — single source of truth (was duplicated across every page's inline :root) */ --bg:#070a12; --panel:#141c2c; --panel2:#0e1622; --text:#e9eefc; --muted:#a9b4d6; --border:rgba(120,160,210,.16); --shadow:0 12px 30px rgba(0,0,0,.45); --accent:#5cc8f0; --gold:#f3cd6b; --purple:#c49bff; --tab-tank:#80c3d4; --tab-healer:#96ea6e; --tab-attacker:#eb6e74; --nav-w:180px; --kw-skill:#f5c542; --kw-buff:#6beeaa; --kw-debuff:#ff9b6b; --kw-proj:#d4a0ff; --kw-elem:#ff8888; --heading-size:16px; } html,body{height:100%;overflow:hidden;font-family:var(--font-body);color:var(--text); background: radial-gradient(1000px 520px at 14% -6%,#16243f 0%,var(--bg) 58%), var(--bg); } .shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh} /* Title — pixel arcade lettering, like "CLASS BOARD" */ .sideTitle{padding:14px 12px 16px;border-bottom:1px solid var(--border);position:relative;text-align:center} .sideTitle img{display:block;width:100%;max-width:160px;margin:0 auto; filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))} .sideTitle span{display:block;margin-top:9px;font-family:var(--font-display);font-weight:700;font-size:13px; letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;color:var(--cyan);opacity:.85} .sideTitle::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:54px;height:3px; background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 7px rgba(92,200,240,.5)} .navLinks{flex:1;overflow-y:auto;padding:12px 10px} .navLinks a{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em; padding:9px 13px;color:var(--muted);text-decoration:none;transition:color .15s,background .15s; margin-bottom:3px;border-left:3px solid transparent;border-radius:0 7px 7px 0} .navLinks a:hover{background:rgba(92,200,240,.06);color:var(--text)} .navLinks a.active{background:linear-gradient(90deg,rgba(92,200,240,.16),transparent);color:var(--cyan); border-left-color:var(--cyan)} .navLinks a.disabled{opacity:.3;pointer-events:none} .sideLang{padding:11px 10px;border-bottom:1px solid var(--border)} .langBtn{font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px 0;border:1px solid transparent; border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;opacity:.5; flex:1 1 0;min-width:0;text-align:center} .langBtn:hover{opacity:.85} .langBtn.active{opacity:1;color:#04101a;background:var(--cyan);box-shadow:0 2px 0 rgba(0,0,0,.3)} .mainContent{flex:1;min-width:0} @media(max-width:800px){:root{--nav-w:0px}.shell{grid-template-columns:1fr}.sidebar{display:none!important}.main{padding:58px 8px 40px!important}} @media(max-width:800px){.shell>.sidebarToggle{display:flex;position:fixed;top:0;left:0;right:0;width:auto;height:48px;border-radius:0;border:none;border-bottom:1px solid var(--border);justify-content:flex-start;align-items:center;padding:0 18px;font-size:22px;background:var(--panel);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.4);z-index:200;cursor:pointer}} @media(max-width:800px){.detailWrap .detailQuick{grid-column:1 / -1;flex-wrap:wrap;justify-content:flex-start;margin-top:4px}.detailWrap .detailHeader>.quickStat{grid-column:1 / -1;justify-self:start;margin-top:4px}} .sidebar.overlay{display:flex!important;position:fixed;top:0;left:0;z-index:300;width:200px;height:100vh;box-shadow:6px 0 26px rgba(0,0,0,.6)} .sidebarBackdrop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:250;background:rgba(8,5,3,.55)} .sidebarBackdrop.show{display:block} @keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}} .detailPanel.visible{display:block;animation:fadeIn .22s ease forwards} .detailMeta h2{font-family:var(--font-display);font-weight:700;font-size:var(--heading-size,19px);letter-spacing:.01em;margin:0} .detailMeta .badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap} /* Filters — rounded warm pills with a soft inset, arcade label */ .filterLabel{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em; color:var(--muted);opacity:.6;margin-top:7px;text-align:center;width:100%} .filterLabel:first-child{margin-top:0} .filterBtnGroup{display:flex;flex-direction:column;gap:4px} .filterBtn{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.01em; padding:5px 13px;border-radius:999px;cursor:pointer;transition:all .16s;border:1.5px solid;opacity:.55;background:transparent} .filterBtn:hover{opacity:.92} .filterBtn.active{opacity:1;background:var(--fb-bg);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)} .filterSep{height:1px;width:100%;background:var(--border);margin:3px 0} .filterClear{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;padding:4px 13px; border:1.5px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer; transition:all .15s;opacity:.55;align-self:center;margin-top:5px} .filterClear:hover{opacity:.9;color:var(--cyan);border-color:var(--cool-line)} .searchBox{width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:9px;background:rgba(12,7,5,.5); color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;box-sizing:border-box;margin-top:5px; transition:border-color .15s,box-shadow .15s} .searchBox::placeholder{color:var(--muted);opacity:.5} .searchBox:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(92,200,240,.14)} /* Keyword inline colors (game-meaningful — unchanged) */ .kw{cursor:pointer;border-bottom:1px dotted;transition:all .15s;white-space:nowrap} .kw:hover{filter:brightness(1.4)} .kw.t-skill{color:var(--kw-skill);border-bottom-color:rgba(245,197,66,.4)} .kw.t-buff{color:var(--kw-buff);border-bottom-color:rgba(107,238,170,.4)} .kw.t-debuff{color:var(--kw-debuff);border-bottom-color:rgba(255,155,107,.4)} .kw.t-proj{color:var(--kw-proj);border-bottom-color:rgba(212,160,255,.4)} .kw.t-holy{color:#fff4b0;border-bottom-color:rgba(255,244,176,.4)} .kw.t-impact{color:#ffa05a;border-bottom-color:rgba(255,160,90,.4)} .kw.t-fire{color:#ff7b5a;border-bottom-color:rgba(255,123,90,.4)} .kw.t-ice{color:#5ae1ff;border-bottom-color:rgba(90,225,255,.4)} .kw.t-lightning{color:#ffe05a;border-bottom-color:rgba(255,224,90,.4)} .kwp{white-space:nowrap} .kwp.t-skill{color:var(--kw-skill)} .kwp.t-buff{color:var(--kw-buff)} .kwp.t-debuff{color:var(--kw-debuff)} .kwp.t-proj{color:var(--kw-proj)} .kwp.t-holy{color:#fff4b0} .kwp.t-impact{color:#ffa05a} .kwp.t-fire{color:#ff7b5a} .kwp.t-ice{color:#5ae1ff} .kwp.t-lightning{color:#ffe05a} /* Tooltip — warm frame, rounded title */ .tooltip.visible{opacity:1} .tooltip .tt-top{display:flex;align-items:center;gap:8px;margin-bottom:6px} .tooltip .tt-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0} .tooltip .tt-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--cyan)} /* ── Consolidated from per-page inline