/* splicing.gg — design system Dark-glass / void aesthetic, faithful to the brand caderno + DESIGN_NOTES. Self-hosted OFL fonts (Space Grotesk 500/700, Inter 400/500/600). */ /* ----------------------------- fonts ----------------------------- */ @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/space-grotesk-500.woff2') format('woff2'); } @font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/space-grotesk-700.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-600.woff2') format('woff2'); } /* ----------------------------- tokens ----------------------------- */ :root{ --void:#0E2129; --void-deep:#0A1820; --surface:#15463F; --surface-2:#1E5A52; --bone:#EEF4F2; --muted:#7FA9AC; --cyan:#35E0E6; --cyan-deep:#13899A; --lime:#A8D24E; --violet:#7A3FB0; --amber:#FF9A3D; --blue:#2E78C0; --magenta:#D38FB4; /* ── SEMANTIC COLOURS — UMA VERDADE (ver docs/COLORS.md). Mudar uma cor = mudar aqui. ── */ /* elements (fiéis ao jogo) */ --el-cryo:#48e3f9; --el-pyro:#e3a136; --el-organic:#61fb2d; --el-cyber:#e8fa22; --el-plasma:#d964aa; --el-neutral:#7FA9AC; /* factions (fiéis ao jogo) */ --fac-lesionspawns:#9c48e5; --fac-genbots:#f8e134; --fac-ancients:#57dba2; --fac-crystallines:#d247b8; /* effectiveness (matchups) */ --eff-highly:#e6f47c; --eff-effective:#bcd7c4; /* golden egg */ --gold:#F4C84B; /* leaderboard medals (gold reuses --gold) + abyss/floor accent — single source for rankings + build badges */ --medal-silver:#C7D0D6; --medal-bronze:#CD8A55; --floor:#b58fe0; /* supporter (donations) accent — warm rose heart */ --supporter:#e86a9c; /* catalyzer rarity */ --rc-weak:#999999; --rc-common:#4ea552; --rc-potent:#4657cc; --rc-strong:#9941bf; --rc-corrupted:#983061; /* evolution / game rarity tiers */ --evo-common:#7d8f7f; --evo-rare:#678cd3; --evo-superior:#de64d3; --evo-exotic:#f2bf08; --evo-mutated:#f6a32e; --evo-spliced:#caf2f8; /* attribute bonus sources */ --attr-base:#c9e2cd; --attr-modules:#e6f47c; --attr-nature:#48d8bf; --radius:12px; --radius-sm:8px; --radius-lg:18px; /* layered surfaces (glass) */ --bg:var(--void-deep); --panel: rgba(255,255,255,.03); --hover: rgba(255,255,255,.07); /* interactive hover fill — stronger than the card surface so hovers read clearly */ --panel-2: rgba(255,255,255,.08); /* raised surface (buttons, chips) — stronger than the card --panel */ --panel-solid:#103039; --line: color-mix(in srgb, var(--muted) 22%, transparent); --line-strong: color-mix(in srgb, var(--muted) 38%, transparent); --text:var(--bone); --text-dim:var(--muted); --accent:var(--cyan); /* default interactive accent */ /* analytics dataviz — maps onto the base palette, no new colours (see docs/COLORS.md) */ --chart-views:var(--cyan); --chart-visitors:var(--amber); --ch-direct:var(--muted); --ch-organic:var(--lime); --ch-social:var(--violet); --ch-referral:var(--blue); --action:var(--lime); /* selection / likes / progress */ --space:1rem; --shadow: 0 10px 40px -18px rgba(0,0,0,.7); --shadow-lg: 0 24px 70px -28px rgba(0,0,0,.8); --maxw:1180px; --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body:'Inter', ui-sans-serif, system-ui, sans-serif; } /* element accent mapping → semantic tokens (docs/COLORS.md) */ [data-el="ORGANIC"]{ --accent:var(--el-organic); } [data-el="PYRO"]{ --accent:var(--el-pyro); } [data-el="CRYO"]{ --accent:var(--el-cryo); } [data-el="CYBER"]{ --accent:var(--el-cyber); } [data-el="PLASMA"]{ --accent:var(--el-plasma); } [data-el="NEUTRAL"]{ --accent:var(--el-neutral); } /* faction accent → semantic tokens (game colours) */ [data-fac="LESIONSPAWNS"]{ --accent:var(--fac-lesionspawns); } [data-fac="GENBOTS"]{ --accent:var(--fac-genbots); } [data-fac="ANCIENTS"]{ --accent:var(--fac-ancients); } [data-fac="CRYSTALLINES"]{ --accent:var(--fac-crystallines); } /* ----------------------------- reset ----------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font-body); color:var(--text); background:var(--bg); line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; display:flex; flex-direction:column; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; cursor:pointer; } input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.12; margin:0 0 .4em; letter-spacing:-.01em; } h1{ font-size:clamp(1.9rem,4vw,2.9rem); } h2{ font-size:clamp(1.4rem,2.6vw,2rem); } h3{ font-size:1.18rem; } p{ margin:0 0 1em; } small{ font-size:.82rem; } ::selection{ background:color-mix(in srgb,var(--cyan) 40%,transparent); } /* background ambience: subtle void glow + slow bokeh */ body::before{ content:""; position:fixed; inset:-10%; z-index:-2; pointer-events:none; background: radial-gradient(1100px 680px at 50% -8%, color-mix(in srgb,var(--surface) 55%,transparent), transparent 60%), radial-gradient(900px 600px at 92% 8%, color-mix(in srgb,var(--violet) 12%,transparent), transparent 55%), var(--void-deep); animation: nebula-drift 46s ease-in-out infinite alternate; /* living nebula — very slow; killed by prefers-reduced-motion */ } @keyframes nebula-drift{ from{ transform:translate3d(-1.2%, 1%, 0) scale(1.04); } to{ transform:translate3d(1.6%, -1.4%, 0) scale(1.1); } } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image: radial-gradient(2px 2px at 12% 30%, color-mix(in srgb,var(--cyan) 50%,transparent), transparent 60%), radial-gradient(2px 2px at 78% 18%, color-mix(in srgb,var(--bone) 30%,transparent), transparent 60%), radial-gradient(3px 3px at 64% 72%, color-mix(in srgb,var(--cyan) 22%,transparent), transparent 60%), radial-gradient(2px 2px at 33% 84%, color-mix(in srgb,var(--lime) 22%,transparent), transparent 60%); } /* home: animated spore layer (canvas) — fixed, behind content, over the static ambience. See public/js/bg.js */ #bg-canvas{ position:fixed; inset:0; z-index:-1; pointer-events:none; } /* ----------------------------- layout ----------------------------- */ .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,28px); } main{ flex:1 0 auto; padding-block:clamp(24px,5vw,52px); } .section{ margin-bottom:clamp(36px,6vw,64px); } .stack{ display:flex; flex-direction:column; gap:1rem; } .row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; } .between{ justify-content:space-between; } .grid{ display:grid; gap:clamp(14px,2vw,22px); } .muted{ color:var(--text-dim); } .center{ text-align:center; } .eyebrow{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--cyan); margin-bottom:.5em; } .label{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--muted); } .lead{ font-size:1.1rem; color:color-mix(in srgb,var(--bone) 86%,var(--muted)); max-width:62ch; } hr{ border:0; border-top:1px solid var(--line); margin:1.6rem 0; } /* ----------------------------- header ----------------------------- */ .site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--void-deep) 78%,transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line); } .site-header .container{ position:relative; display:flex; align-items:center; gap:1.2rem; min-height:64px; } .brand{ display:flex; align-items:center; gap:.2rem; flex-shrink:0; } .brand svg{ height:30px; width:auto; } .brand:hover{ filter:drop-shadow(0 0 8px color-mix(in srgb,var(--cyan) 35%,transparent)); } /* 3-zone navbar: brand (left) · primary nav (centered) · account cluster (right) */ .nav-collapse{ display:contents; } .nav-center{ position:absolute; left:50%; top:0; height:100%; transform:translateX(-50%); display:flex; align-items:center; gap:.3rem; } .nav-center a{ padding:.5rem .8rem; border-radius:var(--radius-sm); color:var(--muted); font-weight:500; font-size:.94rem; transition:color .15s, background .15s; } .nav-center a:hover{ color:var(--bone); background:var(--hover); } .nav-center a.active{ color:var(--bone); } .nav-center a.active::after{ content:""; display:block; height:2px; margin-top:3px; border-radius:2px; background:var(--cyan); } .nav-right{ margin-left:auto; display:flex; align-items:center; gap:.55rem; flex-shrink:0; } .nav-build{ background:var(--lime); color:#16320b !important; font-weight:600 !important; padding:.5rem .95rem; border-radius:var(--radius-sm); font-size:.94rem; } .nav-build:hover{ filter:brightness(1.06); } .nav-signin{ padding:.5rem .9rem; border-radius:var(--radius-sm); color:var(--bone); border:1px solid var(--line-strong); font-weight:500; font-size:.92rem; } .nav-signin:hover{ background:var(--hover); } .menu-toggle{ display:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.45rem .6rem; } /* account dropdown (avatar + name) */ .user-menu{ position:relative; } .user-trigger{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:500; color:var(--bone); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.26rem .55rem .26rem .3rem; transition:border-color .15s; } .user-trigger:hover{ border-color:var(--line-strong); } /* ── user avatar: single component (public/js/avatar.js renders `.avatar`, sized via --av) ── */ .avatar{ --av:32px; position:relative; flex:0 0 auto; width:var(--av); height:var(--av); border-radius:50%; overflow:hidden; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:calc(var(--av) * .4); line-height:1; color:var(--void-deep); background:linear-gradient(135deg,var(--cyan),var(--lime)); } .avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--panel-solid); } .user-name{ max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-trigger .chev{ color:var(--muted); transition:transform .15s; } .user-trigger[aria-expanded="true"] .chev{ transform:rotate(180deg); } .user-dropdown{ position:absolute; top:100%; right:0; margin-top:8px; min-width:206px; z-index:60; padding:6px; background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lg); } .user-dropdown[hidden]{ display:none; } .user-dropdown a, .user-dropdown .menu-signout{ display:block; width:100%; text-align:left; box-sizing:border-box; padding:.55rem .7rem; border-radius:var(--radius-sm); color:var(--text); font-size:.9rem; font-weight:500; } .user-dropdown .menu-signout{ background:none; border:0; cursor:pointer; font-family:inherit; color:var(--muted); } .user-dropdown a:hover, .user-dropdown .menu-signout:hover{ background:var(--hover); color:var(--bone); } .user-dropdown a.active{ color:var(--cyan); } .menu-sep{ height:1px; background:var(--line); margin:6px 4px; } /* settings — language options */ .lang-options{ display:flex; flex-direction:column; gap:8px; margin-top:14px; max-width:380px; } .lang-option{ display:flex; align-items:center; gap:12px; padding:.7rem .9rem; border:1px solid var(--line); border-radius:12px; color:var(--text); } .lang-option:hover{ border-color:var(--line-strong); background:var(--hover); } .lang-option.active{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 10%,transparent); } .lang-option .lang-code{ font-family:var(--font-display); font-weight:700; font-size:.78rem; min-width:28px; color:var(--cyan); letter-spacing:.04em; } .lang-option .lang-name{ font-weight:500; color:var(--bone); } .lang-option .lang-check{ margin-left:auto; color:var(--cyan); font-weight:700; } /* compact language switch (footer + reused elsewhere) */ .lang-switch{ display:inline-flex; align-items:center; gap:2px; } .lang-switch a{ padding:.3rem .5rem; border-radius:6px; font-size:.78rem; font-weight:600; color:var(--muted); letter-spacing:.04em; } .lang-switch a:hover{ color:var(--bone); } .lang-switch a.active{ color:var(--void-deep); background:var(--cyan); } /* ----------------------------- footer ----------------------------- */ .site-footer{ flex-shrink:0; border-top:1px solid var(--line); background:var(--void-deep); margin-top:32px; } .site-footer .container{ padding-block:24px; display:grid; gap:16px; } .footer-top{ display:flex; gap:clamp(32px,6vw,72px); flex-wrap:wrap; justify-content:space-between; align-items:flex-start; } .footer-brand{ max-width:340px; } .footer-tagline{ margin-top:12px; max-width:38ch; font-size:.88rem; } .footer-social{ display:flex; gap:16px; margin-top:18px; } .social-ico{ display:inline-flex; color:var(--muted); transition:color .15s, transform .15s; } .social-ico:hover{ color:var(--cyan); transform:translateY(-1px); } .social-ico svg{ width:22px; height:22px; } .footer-lang{ display:flex; align-items:center; gap:10px; } .footer-lang .lang-label{ font-size:.82rem; } .footer-cols{ display:flex; gap:clamp(40px,7vw,72px); flex-wrap:wrap; } .footer-col{ display:flex; flex-direction:column; gap:10px; } .footer-col-h{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--muted); margin-bottom:2px; } .footer-col a{ color:color-mix(in srgb,var(--bone) 74%,var(--muted)); font-size:.9rem; } .footer-col a:hover{ color:var(--bone); } .footer-col a.footer-support{ color:var(--supporter); } /* gentle nudge — the only coloured footer link */ .footer-col a.footer-support:hover{ color:color-mix(in srgb,var(--supporter) 80%,white); } /* support page (donations) */ .support-cost{ margin:12px 0 0; font-weight:600; color:var(--bone); } .support-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; } /* support page: the Supporter badge sits beside the donate button, badge above its "you get this" label */ .support-badge-cta{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:5px; } .support-badge-note{ font-size:.85rem; color:var(--muted); } .support-tip{ margin-top:20px; line-height:1.55; } .support-btn{ display:inline-flex; align-items:center; gap:9px; font-size:1.12rem; font-weight:700; padding:.72rem 1.6rem; } .support-btn .support-heart svg{ width:19px; height:19px; } .support-btn.btn-ghost .support-heart{ color:var(--supporter); } /* keep the heart warm on the secondary button */ .support-wall{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:8px; } .support-patron{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); } .support-patron .support-heart svg{ width:14px; height:14px; color:var(--supporter); } .support-patron a{ color:var(--bone); } .support-patron a:hover{ color:var(--supporter); } .support-wall-empty{ margin-top:12px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px; } .disclaimer{ font-size:.8rem; color:var(--muted); max-width:74ch; margin:0; flex:1 1 280px; } /* ----------------------------- panels & cards ----------------------------- */ .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,2.2vw,24px); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .panel.solid{ background:var(--panel-solid); } .panel.tight{ padding:14px 16px; } .card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .16s, border-color .16s, box-shadow .16s; display:flex; flex-direction:column; } .card:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow); } /* ----------------------------- buttons ----------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem 1.05rem; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--panel-2); color:var(--bone); font-weight:600; font-size:.94rem; transition:transform .12s, background .15s, border-color .15s, filter .15s; white-space:nowrap; } .btn:hover{ transform:translateY(-1px); border-color:var(--muted); } .btn:active{ transform:translateY(0); } .btn-primary{ background:var(--cyan); color:#04222a; border-color:transparent; } .btn-primary:hover{ filter:brightness(1.07); } .btn-action{ background:var(--lime); color:#16320b; border-color:transparent; } .btn-action:hover{ filter:brightness(1.06); } .btn-ghost{ background:transparent; } .btn-sm{ padding:.4rem .7rem; font-size:.85rem; } .btn-block{ width:100%; } .btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; } /* ----------------------------- chips & badges ----------------------------- */ .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem; border-radius:var(--radius-sm); background:var(--panel-2); border:1px solid var(--line); font-size:.8rem; font-weight:500; color:var(--bone); } .chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); } .chip.pv-perk{ background:var(--void); } /* preview perk chips use the darker badge bg (like element/catalyzer badges) */ .chip.chip-gold{ border-color:color-mix(in srgb,var(--gold) 48%,transparent); } /* Golden Egg perk = gold border only (no dot/icon) */ /* shared badge — the ONE look across the site (element badge, role tags, role-chip picker): a rounded rectangle (radius-sm), matching the buttons. */ .el-badge, .tag, .role-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .72rem; border-radius:var(--radius-sm); font-weight:500; font-size:.8rem; line-height:1; color:var(--text); background:var(--void); border:1px solid var(--line-strong); } .el-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); } /* self-reported Abyss depth — a chip in the tag family + depth icon, sits right after the element badge. `floor-lead` adds a subtle violet accent so it reads above the role tags. */ .floor-tag{ display:inline-flex; align-items:center; gap:.34rem; } .floor-tag svg{ width:13px; height:13px; color:var(--floor); } .floor-lead{ border-color:color-mix(in srgb,var(--violet) 48%,var(--line-strong)); background:color-mix(in srgb,var(--violet) 11%,transparent); color:var(--bone); } .badge-ph{ display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber) 32%,transparent); padding:.16rem .5rem; border-radius:var(--radius-sm); font-weight:600; } .badge-golden{ color:var(--gold); background:color-mix(in srgb,var(--gold) 14%,transparent); border-color:color-mix(in srgb,var(--gold) 48%,transparent); } .badge-ph .badge-ico, .badge-golden .badge-ico{ width:13px; height:13px; } .todo{ color:var(--muted); font-style:italic; } /* gene chip (signature circular slot) */ .gene-chip{ --size:54px; width:var(--size); height:var(--size); border-radius:50%; position:relative; display:grid; place-items:center; background:var(--void); border:2px solid var(--line); color:var(--muted); flex-shrink:0; transition:border-color .15s, box-shadow .15s, color .15s; } .gene-chip.filled{ border-color:var(--accent); color:var(--bone); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent), 0 0 14px -2px color-mix(in srgb,var(--accent) 45%,transparent); } .gene-chip .swatch{ width:60%; height:60%; border-radius:50%; } /* ----------------------------- pills / segmented ----------------------------- */ .segmented{ display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px; gap:2px; } .segmented a{ padding:.4rem .9rem; border-radius:calc(var(--radius-sm) - 3px); font-size:.86rem; font-weight:500; color:var(--muted); } .segmented a.active{ background:var(--panel-2); color:var(--bone); } /* ----------------------------- hero ----------------------------- */ .hero{ position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(22px,3.4vw,38px) clamp(20px,5vw,48px); border:1px solid var(--line); background: radial-gradient(120% 120% at 50% -20%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), color-mix(in srgb,var(--void-deep) 60%,transparent)); } .hero::after{ /* portal vignette */ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 160px 30px rgba(7,16,20,.75); border-radius:inherit; } .hero .hero-symbol{ height:56px; margin:0 auto 12px; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--cyan) 28%,transparent)); } .rail-ico{ display:inline-flex; align-items:center; color:var(--cyan); } .rail-ico svg{ width:1.15em; height:1.15em; } .hero .eyebrow{ margin-bottom:6px; } .hero h1{ max-width:20ch; font-size:clamp(1.55rem,3.4vw,2.3rem); line-height:1.1; margin:0 auto; } .hero .lead{ margin:12px auto 0; font-size:1.02rem; max-width:54ch; } .hero-actions{ margin-top:20px; justify-content:center; } .stat-row{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:22px; } .stat{ text-align:center; } .stat b{ font-family:var(--font-display); font-size:1.4rem; display:block; color:var(--bone); } .stat span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } /* home hero — symbol + text as ONE centred unit (content-sized cols, generous gap), not a full-width stretch */ .hero-2col{ padding:clamp(26px,3.6vw,44px) clamp(24px,5vw,52px); } .hero-2col .hb-grid{ display:grid; grid-template-columns:auto auto; gap:clamp(34px,6vw,76px); align-items:center; justify-content:center; } .hero-2col .hero-symbol{ height:clamp(96px,13vw,168px); margin:0; } .hero-2col .hb-text{ text-align:left; max-width:44ch; } .hero-2col h1{ margin:0; max-width:22ch; } .hero-2col .hero-sub{ margin:12px 0 0; font-size:1.05rem; color:color-mix(in srgb,var(--bone) 80%,var(--muted)); } .hero-2col .hero-actions{ justify-content:flex-start; } .hero-2col .stat-row{ justify-content:flex-start; gap:30px; } @media (max-width:680px){ .hero-2col .hb-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; } .hero-2col .hb-text{ text-align:center; } .hero-2col h1{ margin-inline:auto; } .hero-2col .hero-actions, .hero-2col .stat-row{ justify-content:center; } } /* ----------------------------- build card ----------------------------- */ .build-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .build-card{ border-top:3px solid var(--accent); } .build-card .bc-head{ padding:16px 18px 12px; } .build-card .bc-title{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--bone); margin:0; } .build-card .bc-species{ font-size:.85rem; color:var(--muted); margin-top:2px; } .build-card .bc-body{ padding:0 18px 14px; display:flex; flex-direction:column; gap:10px; flex:1; } .build-card .bc-tags{ display:flex; gap:6px; flex-wrap:wrap; } /* role tags — de-emphasised vs the element/abyss essentials; on their own line, shared by the build card + build page */ .role-tags{ display:flex; flex-wrap:wrap; gap:5px; } .role-tag{ font-size:.74rem; padding:.24rem .6rem; color:var(--muted); border-color:var(--line); } .role-tag-ph{ visibility:hidden; } /* placeholder chip reserving the line height when a build has no role tags (cards stay equal height) */ /* leaderboard badges — live recognition (Top/Trending/Abyss/New) on the card + build page; one component, single source */ .bc-badges{ display:flex; flex-wrap:wrap; gap:6px; } .lb-badge{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:3px 9px 3px 7px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent; color:var(--bone); white-space:nowrap; } .lb-badge svg{ width:13px; height:13px; flex:0 0 auto; } .lb-badge .r{ opacity:.85; } .lb-badge.bc-badges-ph{ visibility:hidden; } /* reserve the row height when a build has no badges (cards stay equal height) */ /* podium tiers (rank 1-3) — colour says the rank, icon says the leaderboard */ .lb-badge.m1{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 50%,transparent); } .lb-badge.m2{ color:var(--medal-silver); border-color:color-mix(in srgb,var(--medal-silver) 50%,transparent); } .lb-badge.m3{ color:var(--medal-bronze); border-color:color-mix(in srgb,var(--medal-bronze) 50%,transparent); } /* generic ranks (4-10) — Top/Trending/Wrangler share one neutral look; Abyss keeps its violet, New its lime */ .lb-badge.g-top, .lb-badge.g-trending, .lb-badge.g-wrangler{ color:var(--muted); border-color:var(--line-strong); } .lb-badge.g-abyss{ color:var(--floor); border-color:color-mix(in srgb,var(--floor) 35%,var(--line)); } .lb-badge.lb-new{ color:var(--lime); border-color:color-mix(in srgb,var(--lime) 40%,transparent); } .lb-badge.lb-ace{ color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 40%,transparent); } /* species champion (Top {species}) */ .lb-badge.lb-supporter{ color:var(--bone); border-color:color-mix(in srgb,var(--supporter) 45%,transparent); } /* thank-you for donating: bone text, supporter-coloured heart */ .lb-badge.lb-supporter svg{ color:var(--supporter); } .build-card .bc-foot{ display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line); margin-top:auto; } .build-card .bc-foot .by{ font-size:.82rem; color:var(--muted); } .likes{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--bone); } .likes svg{ width:16px; height:16px; } .rank-num{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--muted); min-width:2ch; } /* like button = the shared .btn (ghost) + a `liked` active state (no bespoke box styling) */ .like-btn svg{ width:19px; height:19px; } .like-btn{ font-size:.98rem; } .like-btn.liked{ color:var(--lime); border-color:color-mix(in srgb,var(--lime) 50%,transparent); background:color-mix(in srgb,var(--lime) 12%,transparent); } .like-btn.liked svg{ fill:var(--lime); } /* share button (build detail) — native share on mobile, copy-link fallback on desktop */ .share-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.62rem .68rem; } .share-btn svg{ width:19px; height:19px; } .share-btn.copied{ color:var(--lime); border-color:color-mix(in srgb,var(--lime) 45%,transparent); } /* ----------------------------- codex grid ----------------------------- */ /* species carousel — infinite rotation; degrades to a horizontal scroll row without JS */ .species-carousel{ position:relative; display:flex; align-items:center; gap:10px; } .carousel-viewport{ flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; } .carousel-viewport::-webkit-scrollbar{ display:none; } .species-carousel.is-carousel .carousel-viewport{ overflow:hidden; } .carousel-track{ display:flex; gap:14px; will-change:transform; } .carousel-track > .codex-card{ flex:0 0 auto; width:clamp(158px,17vw,196px); } .carousel-arrow{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--bone); font-size:1.35rem; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .15s, border-color .15s; } .carousel-arrow:hover{ background:color-mix(in srgb,var(--cyan) 14%,transparent); border-color:var(--cyan); } .species-carousel:not(.is-carousel) .carousel-arrow{ display:none; } /* no JS → scroll instead of dead arrows */ /* species card = profile card: rounded-square avatar (cover, face-biased) + name + elements */ .codex-card{ padding:12px; text-align:center; } .codex-card .sp-avatar{ aspect-ratio:1/1; width:100%; border-radius:14px; overflow:hidden; position:relative; display:grid; place-items:center; background:radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.05), transparent 65%), var(--void); } .codex-card .sp-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%; } /* object-position overridden per species (inline, see species-card.ejs) */ .codex-card .sp-avatar .glyph{ font-family:var(--font-display); font-weight:700; font-size:2.2rem; color:color-mix(in srgb,var(--bone) 70%,var(--muted)); } .codex-card .sp-avatar.unknown .glyph{ color:color-mix(in srgb,var(--muted) 60%,transparent); } .codex-card .meta{ padding:10px 4px 2px; } .codex-card .meta .name{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; } .codex-card .meta .sub{ font-size:.78rem; color:var(--muted); margin-top:2px; } .codex-card .meta .sub.el-tags{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:6px; } /* codex modules — accordion (species → body part → modules) */ .mod-acc-list{ display:flex; flex-direction:column; gap:10px; } .mod-acc{ border:1px solid var(--line); border-radius:12px; background:var(--panel); } .mod-acc-sum{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; list-style:none; } .mod-acc-sum::-webkit-details-marker{ display:none; } .mod-acc-sum::after{ content:"▾"; font-size:1.35rem; line-height:1; color:var(--muted); transition:transform .15s; flex:0 0 auto; padding:2px 2px 2px 6px; margin-left:auto; } .mod-acc[open] .mod-acc-sum::after{ transform:rotate(180deg); } /* the species block (thumb + name + sub) is itself a link to the species page; the rest of the summary toggles */ .mod-sp-id{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; padding:6px 8px; margin:-6px -8px; border-radius:10px; transition:background .15s, color .15s; } .mod-sp-id:hover{ background:rgba(255,255,255,.045); } .mod-sp-id:hover .mod-sp-name{ color:var(--cyan); } .mod-sp-id:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; } .mod-sp-thumb{ width:40px; height:40px; border-radius:10px; overflow:hidden; flex:0 0 auto; display:grid; place-items:center; background:var(--panel-solid); } .mod-sp-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; } .mod-sp-thumb .glyph{ font-family:var(--font-display); font-weight:700; font-size:.78rem; color:var(--muted); } .mod-sp-meta{ min-width:0; } .mod-sp-name{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; display:block; transition:color .15s; } .mod-sp-sub{ font-size:.82rem; color:var(--muted); } /* hint revealed on hover/focus so it reads as a link without cluttering the resting state */ .mod-sp-cue{ flex:0 0 auto; font-size:.82rem; font-weight:600; color:var(--cyan); white-space:nowrap; opacity:0; transition:opacity .15s; } .mod-sp-id:hover .mod-sp-cue,.mod-sp-id:focus-visible .mod-sp-cue{ opacity:1; } .mod-acc-body{ padding:8px 16px 18px; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; } /* Build page reuses the body-part / module-row look (one module per body part). */ .mod-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-top:14px; } .mod-grid .mod-bp{ padding:12px 14px; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--line); } .mod-bp-h{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px; } .mod-bp-h .cnt{ background:color-mix(in srgb,var(--muted) 18%,transparent); border-radius:20px; padding:0 7px; font-size:.7rem; } .mod-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); } .mod-row:last-child{ border-bottom:0; } .mod-name{ font-size:.9rem; } .mod-bonus{ display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:600; color:var(--attr-modules); white-space:nowrap; } .mod-bonus img{ width:15px; height:15px; } .mod-bonus.none{ color:var(--muted); opacity:.45; font-weight:400; } /* abilities accordion body — reuses the species summary; fixed signature kit (cards) + Primary/Secondary pools (dense rows) */ .ab-body{ padding:6px 18px 22px; border-top:1px solid var(--line); } /* section header: strong title + count chip / note + a divider rule across the row */ .ab-h{ display:flex; align-items:center; gap:12px; margin:24px 0 12px; } .ab-h h3{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bone); margin:0; white-space:nowrap; } .ab-h .cnt{ font-size:.71rem; font-weight:700; color:var(--cyan); background:color-mix(in srgb,var(--cyan) 16%,transparent); border-radius:20px; padding:2px 9px; } .ab-h .note{ font-size:.74rem; color:var(--muted); font-weight:400; letter-spacing:.01em; white-space:nowrap; } .ab-h .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); min-width:18px; } /* signature kit — the 3 fixed abilities, as compact cards */ .ab-kit{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .ab-kit-card{ border:1px solid var(--line); border-radius:11px; padding:11px 13px; background:rgba(255,255,255,.022); } .ab-kit-slot{ font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--cyan); margin-bottom:5px; } .ab-kit-name{ font-family:var(--font-display); font-weight:600; font-size:.97rem; margin-bottom:4px; } .ab-kit-desc{ font-size:.82rem; color:var(--muted); line-height:1.45; } /* primary / secondary — dense two-column rows (name + unlock | description) */ .ab-list{ display:flex; flex-direction:column; } .ab-row{ display:grid; grid-template-columns:minmax(150px,196px) 1fr; gap:22px; padding:9px 2px; border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); align-items:baseline; } .ab-row:first-child{ border-top:0; } .ab-name{ font-weight:600; font-size:.9rem; } .ab-unlock{ display:block; min-height:16px; line-height:16px; font-size:.71rem; color:var(--muted); margin-top:3px; } /* min-height reserves the line even when empty, so base abilities match the unlocked rows' height */ .ab-unlock .ab-rico{ display:inline-block; width:13px; height:13px; vertical-align:-2px; margin-right:4px; } .ab-unlock .ab-egg-ico{ display:inline-block; width:12px; height:12px; vertical-align:-1px; margin-right:4px; } .ab-desc{ font-size:.85rem; color:var(--muted); line-height:1.5; } @media (max-width:640px){ .ab-kit{ grid-template-columns:1fr; } .ab-row{ grid-template-columns:1fr; gap:3px; } } /* perks page — Golden Egg perks get a gold name; rows reuse .ab-row, the unlock reuses .ab-unlock[data-tier=golden] */ .ab-row.gold .ab-name{ color:var(--gold); } /* shared Codex search + toggle filter (perks Golden-Egg, catalyzers Corrupted) over an accordion — JS-revealed, progressive enhancement */ .pk-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0 6px; } .pk-controls[hidden]{ display:none; } /* the [hidden] attr alone loses to display:flex — force it so no-JS hides the controls */ .pk-search{ flex:1 1 280px; min-width:200px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 13px; color:var(--bone); font-size:.9rem; font-family:inherit; } .pk-search::placeholder{ color:var(--muted); } .pk-search:focus{ outline:none; border-color:color-mix(in srgb,var(--cyan) 50%,transparent); } .pk-chip{ border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:var(--radius-sm); padding:6px 13px; font-size:.8rem; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; transition:color .12s, border-color .12s, background .12s; } .pk-chip:hover{ color:var(--bone); border-color:var(--muted); } .pk-chip.is-on{ background:color-mix(in srgb,var(--gold) 16%,transparent); color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,transparent); } .pk-chip .ab-egg-ico{ display:inline-block; width:12px; height:12px; margin:0; } .pk-count{ font-size:.8rem; color:var(--muted); margin:6px 2px 2px; min-height:1em; } /* create: perk picker = searchable list (name + description), click to toggle, Golden-Egg filter */ .perk-selected{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; } .perk-selected:empty{ display:none; } .perk-sel{ cursor:pointer; } .perk-pick{ max-height:440px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius-sm); } .perk-opt{ display:grid; grid-template-columns:minmax(130px,210px) 1fr auto; gap:14px; align-items:center; width:100%; text-align:left; padding:9px 12px; background:transparent; border:0; border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent); color:var(--bone); cursor:pointer; font-family:inherit; transition:background .12s; } .perk-opt:first-child{ border-top:0; } .perk-opt:hover{ background:color-mix(in srgb,var(--lime) 5%,transparent); } .perk-opt.selected{ background:color-mix(in srgb,var(--lime) 11%,transparent); } .perk-opt-name{ font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:6px; } .perk-opt.gold .perk-opt-name{ color:var(--gold); } .perk-opt-name .egg-ico{ width:13px; height:13px; flex:0 0 auto; } .perk-opt-desc{ font-size:.84rem; color:var(--muted); line-height:1.4; margin:0; } .perk-opt-mark{ width:18px; height:18px; color:var(--lime); opacity:0; flex:0 0 auto; } .perk-opt.selected .perk-opt-mark{ opacity:1; } .perk-opt-mark svg{ width:18px; height:18px; } @media (max-width:560px){ .perk-opt{ grid-template-columns:1fr auto; } .perk-opt-desc{ grid-column:1 / -1; } } /* catalyzers — category accordion header (no species portrait) */ .cat-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--bone); } .cat-cnt{ font-size:.72rem; font-weight:700; color:var(--cyan); background:color-mix(in srgb,var(--cyan) 16%,transparent); border-radius:var(--radius-sm); padding:2px 9px; } /* Corrupted marker BELOW the name; non-corrupted rows get an empty spacer of equal height → uniform rows */ .cat-mark{ display:flex; align-items:center; gap:5px; margin-top:4px; min-height:14px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--rc-corrupted); } .cat-mark .dot{ width:8px; height:8px; border-radius:50%; background:var(--rc-corrupted); display:inline-block; flex:0 0 auto; } /* Corrupted filter chip — its own dot + a corrupted-tinted "on" state (overrides the gold .pk-chip.is-on) */ .pk-chip-cor .dot{ width:9px; height:9px; border-radius:50%; background:var(--rc-corrupted); display:inline-block; } .pk-chip-cor.is-on{ background:color-mix(in srgb,var(--rc-corrupted) 20%,transparent); color:color-mix(in srgb,var(--rc-corrupted) 55%,var(--bone)); border-color:color-mix(in srgb,var(--rc-corrupted) 55%,transparent); } /* Top matches — community co-occurrence rank at the bottom of each Codex page (shared) */ .tm.section{ margin-top:30px; } .tm-h{ display:flex; align-items:center; gap:12px; margin:0 0 8px; } .tm-h h3{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bone); margin:0; } .tm-h .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); } .tm-trend{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 8px; } .tm-cap{ font-size:.8rem; color:var(--muted); margin:0 0 6px; } .tm-empty{ font-size:.85rem; color:var(--muted); padding:14px 2px; } .tm-list[hidden]{ display:none; } .tm-el-toggle{ border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:var(--radius-sm); padding:5px 11px; font-size:.76rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:inherit; transition:color .12s, border-color .12s; } .tm-el-toggle[hidden]{ display:none; } /* the [hidden] attr alone loses to display:inline-flex */ .tm-el-toggle:hover{ color:var(--bone); border-color:var(--muted); } .tm-el-toggle .sw{ width:24px; height:14px; border-radius:8px; background:var(--line); position:relative; transition:background .15s; flex:0 0 auto; } .tm-el-toggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--muted); transition:transform .15s, background .15s; } .tm-el-toggle.on{ color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 40%,transparent); } .tm-el-toggle.on .sw{ background:color-mix(in srgb,var(--cyan) 55%,transparent); } .tm-el-toggle.on .sw::after{ transform:translateX(10px); background:var(--cyan); } .tm-list{ display:flex; flex-direction:column; } .tm-row{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; padding:10px 2px; border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent); } .tm-row:first-child{ border-top:0; } .tm-pair{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.92rem; } .tm-a,.tm-b{ font-weight:600; } .tm-arrow{ color:var(--muted); font-size:1.05rem; } .tm-sp{ font-size:.68rem; color:var(--muted); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1px 7px; margin-left:2px; } .tm-el{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); margin-left:4px; white-space:nowrap; } .tm-stat{ display:flex; align-items:center; gap:12px; white-space:nowrap; } .tm-bar{ width:84px; height:6px; background:var(--line); border-radius:3px; overflow:hidden; } .tm-bar span{ display:block; height:100%; background:var(--cyan); border-radius:3px; } .tm-count{ font-size:.82rem; color:var(--muted); min-width:62px; text-align:right; } .tm-count b{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--cyan); margin-right:3px; } .tm-cond{ font-size:.78rem; color:var(--muted); min-width:34px; text-align:right; } @media (max-width:600px){ .tm-row{ grid-template-columns:1fr; gap:6px; } .tm-stat{ justify-content:flex-start; } } /* Codex — Natures: rarity legend + the 5×5 attribute matrix (singles on the diagonal, duals at the crossings) */ .nat-rars{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px; } .nat-rar{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px 12px; font-size:.84rem; color:var(--bone); } .nat-rar b{ font-family:var(--font-display); color:var(--attr-nature); } .nat-rar.r2{ border-color:color-mix(in srgb,var(--attr-nature) 35%,var(--line)); } .nat-rar.r3{ border-color:color-mix(in srgb,var(--attr-nature) 55%,var(--line)); background:color-mix(in srgb,var(--attr-nature) 8%,transparent); } .nat-matrix{ border-collapse:separate; border-spacing:0; } .nat-matrix th, .nat-matrix td{ background:var(--panel); border:1px solid var(--line); padding:7px 9px; text-align:center; font-size:.8rem; } .nat-matrix thead th, .nat-matrix th.rowh{ color:var(--muted); font-weight:600; } .nat-matrix th.rowh{ text-align:right; white-space:nowrap; } .nat-ico{ display:inline-flex; align-items:center; gap:5px; justify-content:center; } .nat-ico img{ width:15px; height:15px; } .nat-matrix td.diag{ background:color-mix(in srgb,var(--attr-nature) 16%,var(--panel)); font-weight:700; color:var(--bone); } .nat-matrix td.dual{ color:var(--bone); } .nat-matrix td.mirror{ color:var(--muted); opacity:.28; } .species-portrait{ width:120px; height:120px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); } .build-hero .hero-portrait{ width:104px; height:104px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.45)); } /* build cover image: same footprint as the portrait but cropped to fill (it's the user's voidling) */ .hero-portrait-wrap{ position:relative; flex:0 0 auto; width:104px; height:104px; } .hero-portrait-wrap .hero-portrait{ width:104px; height:104px; } .hero-portrait.is-cover{ object-fit:cover; border-radius:12px; } .hero-portrait.is-zoomable{ cursor:zoom-in; } .hero-portrait-empty{ display:block; border:1px dashed var(--line-strong); border-radius:12px; background:var(--void); } .cover-ctrls{ position:absolute; right:-4px; bottom:-4px; display:flex; gap:4px; } .cover-btn{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--panel-solid); border:1px solid var(--line-strong); color:var(--bone); cursor:pointer; font-size:1rem; line-height:1; padding:0; } .cover-btn:hover{ border-color:var(--muted); } .cover-btn svg{ width:15px; height:15px; } .cover-flag{ position:absolute; left:0; top:0; font-size:.62rem; font-weight:700; padding:.1rem .3rem; border-radius:6px; background:color-mix(in srgb,var(--rc-corrupted) 80%,#000); color:#fff; } .build-card .bc-thumb{ width:48px; height:48px; flex:0 0 auto; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid var(--line); } .build-card .bc-thumb img{ width:100%; height:100%; object-fit:contain; } .build-card .bc-thumb.is-cover img{ object-fit:cover; } /* uploaded cover = a photo → fill, not contain */ .build-card .bc-thumb .glyph{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:color-mix(in srgb,var(--bone) 65%,var(--muted)); } /* evolution tree — horizontal binary tree per element branch (wiki style): root on the left, branches out to the right, leaves stacked. Default trees are balanced (complete to depth 4), so the elbow connectors are symmetric (children centres at 25%/75% of the kids block). */ .evo-base{ margin:14px 0 6px; } .evo-branch{ margin-top:18px; } .evo-branch-h{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:4px; } .evo-scroll{ overflow-x:auto; overflow-y:hidden; padding:8px 2px 14px; } .evo-scroll > .evo-tree-wrap{ width:max-content; margin-inline:auto; } /* centre the tree + golden row (scrolls together if too wide) */ .et-node{ display:flex; align-items:center; } .et-kids{ display:flex; flex-direction:column; margin-left:34px; position:relative; } .et-kids > .et-node{ position:relative; padding:8px 0; } /* connectors — balanced binary tree: children centred at 25%/75% of the kids block. trunk (parent→spine), spine (between the 2 children), stub (spine→each child). */ .et-kids::after{ content:""; position:absolute; left:-34px; top:50%; width:18px; height:2px; background:var(--line); } .et-kids::before{ content:""; position:absolute; left:-17px; top:25%; bottom:25%; width:2px; background:var(--line); } .et-kids > .et-node::before{ content:""; position:absolute; left:-17px; top:50%; width:18px; height:2px; background:var(--line); } /* compact vertical node (wiki style): image on top, name + tier centred below */ .evo-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; width:148px; min-height:158px; box-sizing:border-box; flex:0 0 auto; padding:10px 9px; border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--cyan) 6%,transparent); } .evo-card[data-el]{ border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); } .evo-card > img{ width:80px; height:80px; object-fit:contain; flex:0 0 auto; } .evo-card .evo-meta{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; } .evo-card .evo-name{ font-family:var(--font-display); font-weight:600; font-size:.76rem; color:var(--bone); line-height:1.14; } .evo-card .evo-tier{ display:inline-flex; align-items:center; gap:5px; font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } /* evolution rarity tiers — coloured per tier (docs/COLORS.md) */ /* rarity tier → colour. Single source of the mapping, shared by the evolution tree tags and the "unlocked by" evolution name on the abilities page (.ab-unlock). */ .evo-tier[data-tier="common"],.ab-unlock[data-tier="common"]{ color:var(--evo-common); } .evo-tier[data-tier="rare"],.ab-unlock[data-tier="rare"]{ color:var(--evo-rare); } .evo-tier[data-tier="superior"],.ab-unlock[data-tier="superior"]{ color:var(--evo-superior); } .evo-tier[data-tier="exotic"],.ab-unlock[data-tier="exotic"]{ color:var(--evo-exotic); } .evo-tier[data-tier="mutated"],.ab-unlock[data-tier="mutated"]{ color:var(--evo-mutated); } .evo-tier[data-tier="spliced"],.ab-unlock[data-tier="spliced"]{ color:var(--evo-spliced); } .ab-unlock[data-tier="golden"]{ color:var(--gold); } /* Golden Egg unlocks — not obtainable by evolution */ .rarity-ico{ width:14px; height:14px; object-fit:contain; flex:0 0 auto; } .evo-card.is-base{ box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); } .evo-card.broken img{ display:none; } .evo-el{ font-size:.56rem; padding:2px 6px; gap:4px; letter-spacing:.04em; } .evo-el .badge-ico{ width:12px; height:12px; } .evo-el .dot{ width:6px; height:6px; } /* lightweight element label (icon/dot + uppercase muted text) = tier-tag look; species list + evo tree */ .el-tag{ display:inline-flex; align-items:center; gap:5px; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .el-tag .badge-ico{ width:14px; height:14px; object-fit:contain; flex:0 0 auto; } .el-tag .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--accent); box-shadow:0 0 7px color-mix(in srgb,var(--accent) 55%,transparent); } .evo-card .el-tag{ font-size:.58rem; } .evo-card .el-tag .badge-ico{ width:12px; height:12px; } .evo-card .el-tag .dot{ width:6px; height:6px; } /* golden egg variants — Mutated-tier exclusives at the end of the tree, on a straight connector */ .golden-hint{ color:var(--gold); } .evo-golden{ display:flex; flex-direction:column; gap:14px; margin-top:6px; width:100%; } /* width:100% of the tree wrap → cards align with the Mutated column */ .evo-golden-node{ display:flex; align-items:center; } .evo-golden-line{ flex:1 1 auto; min-width:30px; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--gold) 50%,var(--line-strong))); } .evo-card.golden{ flex:0 0 auto; border-color:color-mix(in srgb,var(--gold) 42%,var(--line-strong)); } .evo-card .evo-glyph{ width:80px; height:80px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:color-mix(in srgb,var(--bone) 58%,var(--muted)); text-transform:uppercase; } .evo-card .golden-tier{ color:var(--gold); } /* out-specify .evo-card .evo-tier (muted) → gold egg icon + text */ .golden-tier svg, .golden-tier .badge-ico{ width:12px; height:12px; } /* species biology facts */ .bio-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px; } .bio-item{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--panel); } .bio-k{ display:flex; align-items:center; gap:6px; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } .bio-ico{ width:15px; height:15px; flex:0 0 auto; color:var(--cyan); opacity:.9; } /* community stats (popular-from-builds, overframe/pikalytics style) */ .stat-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px 30px; margin-top:14px; } .stat-col > h4.ab-group{ margin:0 0 8px; } .stat-cols .stat-row{ display:grid; grid-template-columns:1fr 52px 30px; align-items:center; gap:8px; margin:7px 0; font-size:.84rem; } .stat-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .stat-label .el-badge{ padding:.12rem .45rem; font-size:.6rem; } .stat-label .el-badge .badge-ico, .stat-label .el-badge .dot{ width:11px; height:11px; } .stat-bar{ height:6px; border-radius:4px; background:color-mix(in srgb,var(--muted) 22%,transparent); overflow:hidden; } .stat-bar > span{ display:block; height:100%; background:var(--cyan); border-radius:4px; } .stat-pct{ text-align:right; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; } .bio-v{ font-family:var(--font-display); font-weight:600; color:var(--bone); margin-top:3px; font-size:.92rem; } /* official icons inside badges / boosts (optional assets) */ .el-badge{ display:inline-flex; align-items:center; gap:6px; } /* faction badge — icon + name in the faction's colour (data-fac drives --accent) */ .fac-badge{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent); } .fac-badge .badge-ico{ width:16px; height:16px; } .badge-ico{ width:16px; height:16px; object-fit:contain; flex:0 0 auto; display:inline-block; } .boost{ display:inline-flex; align-items:center; gap:6px; } .boost .badge-ico{ width:16px; height:16px; } /* grouped ability tables */ .ab-group{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:16px 0 6px; font-family:var(--font-display); } .ab-group:first-of-type{ margin-top:8px; } /* grid-auto-rows:1fr → every row the same height, so all 6 cards are uniform */ .codex-hub{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); grid-auto-rows:1fr; } .count-pill{ font-family:var(--font-display); font-size:.78rem; color:var(--muted); } /* Codex hub cards — per-category accent colour (--cat) + custom icon + big count */ .codex-hub-card{ --cat:var(--cyan); position:relative; overflow:hidden; } .codex-hub-card .cc-inner{ padding:20px; } .codex-hub-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--cat); opacity:.7; } .codex-hub-card .ico{ display:flex; align-items:center; color:var(--cat); } .codex-hub-card .ico svg{ width:30px; height:30px; } .codex-hub-card .cc-count{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; line-height:1; color:var(--cat); font-variant-numeric:tabular-nums; } .codex-hub-card:hover{ border-color:color-mix(in srgb,var(--cat) 45%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--cat) 22%,transparent), var(--shadow); } .codex-hub-card h3{ font-size:1.1rem; } /* ---------- rankings — ONE shared row component for every leaderboard ---------- */ .rank-h{ display:flex; align-items:center; gap:.55rem; } .rank-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .rank-row{ display:grid; align-items:center; gap:14px; padding:8px 14px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .rank-row:hover{ border-color:var(--line-strong); } /* per-list column layouts (same skeleton, different right-hand columns) */ .rank-row.r-build{ grid-template-columns:32px 44px minmax(0,1fr) auto auto; } .rank-row.r-species{ grid-template-columns:32px 44px minmax(0,1fr) minmax(80px,150px) 44px auto; } .rank-row.r-wrangler{ grid-template-columns:32px 44px minmax(0,1fr) auto; } /* shared pieces */ .rank-pos{ text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--muted); font-variant-numeric:tabular-nums; } .rank-pos.medal-1{ color:var(--gold); } .rank-pos.medal-2{ color:var(--medal-silver); } .rank-pos.medal-3{ color:var(--medal-bronze); } /* top-3 rows get a coloured left edge matching the podium number */ .rank-row.medal-1{ box-shadow:inset 3px 0 0 var(--gold); } .rank-row.medal-2{ box-shadow:inset 3px 0 0 var(--medal-silver); } .rank-row.medal-3{ box-shadow:inset 3px 0 0 var(--medal-bronze); } .rank-thumb{ width:44px; height:44px; border-radius:9px; overflow:hidden; display:grid; place-items:center; background:color-mix(in srgb,var(--cyan) 8%,transparent); border:1px solid var(--line); } .rank-thumb img{ width:100%; height:100%; object-fit:contain; } .rank-thumb .glyph{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--muted); } .rank-main{ min-width:0; display:flex; flex-direction:column; gap:1px; } .rank-name{ font-family:var(--font-display); font-weight:600; color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.rank-main:hover .rank-name{ color:var(--cyan); } .rank-badges{ display:flex; flex-wrap:wrap; gap:5px; margin:3px 0 1px; } .rank-sub{ display:flex; align-items:center; gap:.25rem; font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rank-sub svg{ width:12px; height:12px; flex:0 0 auto; color:var(--action); } .rank-bar{ height:8px; border-radius:5px; background:color-mix(in srgb,var(--muted) 20%,transparent); overflow:hidden; } .rank-bar > span{ display:block; height:100%; border-radius:5px; background:var(--cyan); min-width:3px; } .rank-pct{ text-align:right; font-weight:600; font-family:var(--font-display); font-variant-numeric:tabular-nums; color:var(--bone); } .rank-metric{ text-align:right; font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums; color:var(--bone); white-space:nowrap; } .rank-metric small{ display:block; font-weight:500; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .rank-metric.like{ display:inline-flex; align-items:center; justify-content:flex-end; gap:.3rem; } .rank-metric.like svg{ color:var(--action); } @media (max-width:560px){ .rank-row{ gap:10px; padding:8px 10px; } .rank-row.r-species{ grid-template-columns:26px 44px minmax(0,1fr) auto; } .rank-row.r-species .rank-bar, .rank-row.r-species .rank-pct{ display:none; } .rank-row.r-build{ grid-template-columns:26px 44px minmax(0,1fr) auto; } .rank-row.r-build .el-badge{ display:none; } .rank-row.r-wrangler{ grid-template-columns:26px 44px minmax(0,1fr) auto; } } /* ----------------------------- tables ----------------------------- */ .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); } table{ width:100%; border-collapse:collapse; font-size:.92rem; } th,td{ padding:.7rem .9rem; text-align:left; border-bottom:1px solid var(--line); } thead th{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--muted); background:var(--panel); } tbody tr:last-child td{ border-bottom:0; } tbody tr:hover{ background:var(--hover); } td .yes{ color:var(--lime); } td .no{ color:color-mix(in srgb,var(--muted) 70%,transparent); } /* ----------------------------- forms ----------------------------- */ .field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; } /* subtle rule to separate sections inside a wizard step (same look as the preview card dividers) */ .step-divide{ border-top:1px solid var(--line); padding-top:16px; } .field label{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--muted); } .input,select.input,textarea.input{ width:100%; padding:.7rem .85rem; background:var(--void); border:1px solid var(--line-strong); border-radius:var(--radius-sm); color:var(--bone); transition:border-color .15s, box-shadow .15s; } .input:focus,select.input:focus,textarea.input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent); } textarea.input{ resize:vertical; min-height:96px; } .hint{ font-size:.8rem; color:var(--muted); } .form-narrow{ max-width:440px; margin-inline:auto; } .alert{ padding:.8rem 1rem; border-radius:var(--radius-sm); border:1px solid; margin-bottom:1rem; font-size:.9rem; } .alert-error{ color:#ffd9d2; background:color-mix(in srgb,#ff6b53 14%,transparent); border-color:color-mix(in srgb,#ff6b53 40%,transparent); } .alert-info{ color:var(--bone); background:var(--panel-2); border-color:var(--line-strong); } .alert-ok{ color:#cdebb6; background:color-mix(in srgb,var(--lime) 14%,transparent); border-color:color-mix(in srgb,var(--lime) 40%,transparent); } /* account settings: avatar preset gallery */ .settings-grid{ display:flex; flex-direction:column; } .av-group-label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--muted); margin:12px 0 6px; } .avatar-pick{ display:flex; flex-wrap:wrap; gap:8px; } .av-opt{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid var(--line); border-radius:10px; background:var(--panel); cursor:pointer; overflow:hidden; transition:border-color .12s, transform .12s; } .av-opt:hover{ border-color:var(--line-strong); transform:translateY(-1px); } .av-opt input{ position:absolute; opacity:0; width:0; height:0; } .av-opt img{ width:40px; height:40px; object-fit:contain; } .av-opt:has(input:checked){ border-color:var(--cyan); box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 45%,transparent); } .av-opt:focus-within{ border-color:var(--cyan); } .av-glyph{ font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--cyan); } .av-none .av-glyph{ letter-spacing:.04em; } /* ----------------------------- filters bar ----------------------------- */ .filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .filters select.input{ width:auto; min-width:150px; padding:.5rem .7rem; } .filters .filter-search{ width:auto; flex:1 1 220px; min-width:200px; max-width:340px; padding:.5rem .7rem; } /* ----------------------------- pagination ----------------------------- */ .pager{ display:flex; gap:10px; justify-content:center; margin-top:30px; } /* ----------------------------- helix bar (creator steps) ----------------------------- */ .helix{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; } .helix .step{ display:flex; align-items:center; gap:.55rem; padding:.5rem .85rem; border-radius:var(--radius-sm); background:var(--panel); border:1px solid var(--line); color:var(--muted); font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; cursor:pointer; } .helix .step .n{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--void); font-size:.72rem; border:1px solid var(--line); } .helix .step.active{ color:var(--bone); border-color:var(--cyan); } .helix .step.active .n{ background:var(--cyan); color:#04222a; border-color:transparent; } .helix .step.done .n{ background:var(--lime); color:#16320b; border-color:transparent; } /* creator layout */ .creator{ display:grid; grid-template-columns:1fr 360px; gap:26px; align-items:start; } .creator .preview{ position:sticky; top:84px; } /* Preview card groups Preview + Attributes + Affinity in one panel, divided by subtle rules */ .pv-block{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); } .creator-step h3{ display:flex; align-items:center; gap:.6rem; } .opt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } .opt-grid .opt-group-head{ grid-column:1/-1; font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--muted); margin:8px 0 -2px; } .opt-grid .opt-group-head:first-child{ margin-top:0; } .opt{ text-align:left; padding:.7rem .8rem; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--line-strong); transition:.14s; } .opt:hover{ border-color:var(--muted); } .opt.selected{ border-color:var(--lime); box-shadow:0 0 0 1px color-mix(in srgb,var(--lime) 35%,transparent); background:color-mix(in srgb,var(--lime) 8%,transparent); } .opt .opt-name{ font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .opt .opt-sub{ font-size:.76rem; color:var(--muted); margin-top:2px; } .opt.corrupted{ border-color:color-mix(in srgb,#d6357f 45%,var(--line-strong)); } /* species option = portrait (official render, glyph fallback) + name */ .opt-species{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:.6rem; } .opt-species .opt-name{ justify-content:center; font-size:.9rem; } .sp-thumb{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:var(--void-deep); display:grid; place-items:center; } .sp-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; } .sp-thumb .glyph{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--muted); } /* wizard cover image picker — preview + choose/clear (the file uploads when the build is saved) */ .cover-pick{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; } .cover-preview{ width:124px; height:92px; border-radius:var(--radius-sm); overflow:hidden; flex:0 0 auto; display:grid; place-items:center; background:var(--void); border:1px solid var(--line-strong); } .cover-preview.empty{ border-style:dashed; } .cover-preview img{ width:100%; height:100%; object-fit:cover; } .cover-preview span{ font-size:.78rem; color:var(--muted); } .cover-pick-actions{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; } .cover-err, .cover-msg{ font-size:.8rem; color:#ffb9ad; margin:8px 0 0; } /* module bonus sub-line: attribute icon + "+1 Agility" */ .opt .opt-sub.mod-bonus-sub{ display:inline-flex; align-items:center; gap:4px; color:var(--attr-modules); font-weight:600; } .mod-bonus-sub .attr-ico{ opacity:.7; flex:0 0 auto; } .opt.corrupted.selected{ border-color:var(--lime); } /* catalyzer rarity = neutral .tag pill (white text) + a colour-carrying dot (like .el-badge) */ .rarity-weak{ --rc:var(--rc-weak); } .rarity-common{ --rc:var(--rc-common); } .rarity-potent{ --rc:var(--rc-potent); } .rarity-strong{ --rc:var(--rc-strong); } .rarity-corrupted{ --rc:var(--rc-corrupted); } .rarity-weak .dot, .rarity-common .dot, .rarity-potent .dot, .rarity-strong .dot, .rarity-corrupted .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--rc); box-shadow:0 0 7px color-mix(in srgb,var(--rc) 55%,transparent); } .cat-card.corrupted{ border-color:color-mix(in srgb,#d6357f 42%,var(--line-strong)); background:color-mix(in srgb,#d6357f 5%,transparent); } .swatch-sm{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; } /* ordered catalyzer selection (Splicing Simulator) */ .cat-row{ display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; } /* per-build catalyzer rarity picker = compact dropdown (Weak/Common/Potent/Strong); Corrupted = fixed tag */ .cat-rarity{ flex:0 0 auto; } /* catalyzer name chip = same look as the element badge: dark bg + rarity-coloured border + ring + dot */ .cat-chip{ background:var(--void); border-color:var(--rc); box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent); } /* Corrupted badge in the catalog grid: match the new badge box size, keep the neutral (.tag) border */ .cat-rarity-grid{ padding:.32rem .6rem; line-height:1.55; } .cat-dd{ position:relative; display:inline-block; } /* mirror the selected .el-badge look: neutral text/bg, the rarity colour lives on the border (+ subtle ring) + dot */ .cat-dd-btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .6rem; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--rc); color:var(--text); cursor:pointer; font-size:.8rem; font-weight:500; box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent); } .cat-dd-btn .dot{ width:9px; height:9px; border-radius:50%; background:var(--rc); flex:0 0 auto; } .cat-dd-btn .caret{ color:var(--muted); margin-left:2px; } .cat-dd-menu{ position:absolute; z-index:6; top:calc(100% + 4px); left:0; min-width:150px; background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:4px; display:none; box-shadow:0 8px 24px rgba(0,0,0,.4); } .cat-dd-menu.open{ display:block; } .cat-dd-item{ display:flex; align-items:center; gap:8px; padding:.4rem .5rem; border-radius:6px; cursor:pointer; font-size:.82rem; color:var(--bone); } .cat-dd-item .dot{ width:9px; height:9px; border-radius:50%; background:var(--rc); flex:0 0 auto; } .cat-dd-item:hover{ background:var(--void); } .cat-dd-item.on{ color:var(--rc); font-weight:600; } .cat-row .cat-pos{ color:var(--muted); font-variant-numeric:tabular-nums; } .cat-ctrls{ display:inline-flex; gap:4px; flex-shrink:0; margin-left:auto; } .cat-move{ width:28px; height:28px; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--line-strong); color:var(--bone); cursor:pointer; line-height:1; transition:.14s; } .cat-move:hover:not(:disabled){ border-color:var(--muted); } .cat-move:disabled{ opacity:.35; cursor:default; } .attr-row{ display:flex; justify-content:space-between; padding:.3rem 0; border-bottom:1px solid var(--line); font-size:.9rem; } .attr-row:last-child{ border-bottom:0; } /* editable Attributes panel — layered bars (base/modules/nature) + −/+ steppers */ .attr-edit{ display:flex; align-items:center; gap:8px; padding:5px 0; } .attr-edit .attr-name{ width:116px; flex-shrink:0; font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; } .attr-edit .attr-name .attr-ico{ width:15px; height:15px; flex-shrink:0; opacity:.7; } .attr-step{ width:22px; height:22px; flex-shrink:0; border-radius:6px; background:var(--void); border:1px solid var(--line-strong); color:var(--bone); cursor:pointer; line-height:1; font-size:1rem; transition:.14s; } .attr-step:hover{ border-color:var(--muted); } .attr-bar{ flex:1; display:flex; height:9px; min-width:40px; background:var(--void); border:1px solid var(--line); border-radius:999px; overflow:hidden; } .attr-bar .seg{ height:100%; } .attr-bar .seg-base{ background:var(--attr-base); } .attr-bar .seg-mod{ background:var(--attr-modules); } .attr-bar .seg-nat{ background:var(--attr-nature); } .attr-edit .attr-total{ width:26px; flex-shrink:0; text-align:right; font-variant-numeric:tabular-nums; font-size:.9rem; } /* Nature summary line (build page) — labelled, not a flat dotted list. */ .nature-line{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 14px; font-size:.9rem; } .nature-line .nl-k{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); } .nature-line .nl-name{ color:var(--cyan); font-weight:700; font-size:1rem; } .nature-line .nl-rarity{ font-size:.75rem; padding:.12rem .5rem; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--void); color:var(--bone); } .nature-line .nl-rarity-notably{ border-color:var(--attr-nature); color:var(--attr-nature); } .nature-line .nl-rarity-exceptional{ border-color:var(--cyan); color:var(--cyan); } .nature-line .nl-boost{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); } .nature-line .nl-boost b{ display:inline-flex; align-items:center; gap:5px; color:var(--bone); font-weight:600; } .nature-line .nl-boost img{ width:15px; height:15px; opacity:.7; } .nature-line .nl-plus{ color:var(--muted); } .nature-pick .rarity-row{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .rarity-btn{ flex:1; padding:.35rem .4rem; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--line-strong); color:var(--muted); cursor:pointer; font-size:.76rem; white-space:nowrap; transition:.14s; } .rarity-btn:hover{ color:var(--bone); border-color:var(--muted); } .rarity-btn.selected{ color:var(--bone); background:var(--void); border-color:var(--cyan); box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent); font-weight:600; } .affinity{ display:flex; flex-direction:column; gap:6px; } .affinity .fac{ display:flex; align-items:center; justify-content:space-between; font-size:.86rem; } .affinity .fac .ok{ color:var(--lime); font-weight:600; } .affinity .fac .na{ color:var(--muted); } .err-list{ list-style:none; padding:0; margin:.4rem 0 0; display:flex; flex-direction:column; gap:4px; } .err-list li{ font-size:.82rem; color:#ffb9ad; } /* live requirement checklist — each item turns green with a check when satisfied (vs. errors vanishing) */ .chk-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; } .chk{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--muted); } .chk svg{ width:16px; height:16px; flex:0 0 auto; } .chk:not(.ok) svg{ color:var(--line-strong); } .chk.ok{ color:var(--bone); } .chk.ok svg{ color:var(--lime); } .chk-ready{ display:flex; align-items:center; gap:8px; color:var(--lime); font-weight:700; font-size:.92rem; margin:0 0 10px; } .chk-ready svg{ width:18px; height:18px; flex:0 0 auto; } /* report dialog (pick a reason tag + optional note) */ .report-overlay{ position:fixed; inset:0; z-index:50; background:color-mix(in srgb,var(--void-deep) 78%,transparent); display:flex; align-items:center; justify-content:center; padding:20px; } .report-box{ background:var(--panel-solid); border:1px solid var(--line-strong); border-radius:12px; padding:18px; width:100%; max-width:360px; box-shadow:0 12px 40px rgba(0,0,0,.5); } .report-h{ font-weight:600; margin-bottom:12px; } .report-reasons{ display:flex; flex-direction:column; gap:6px; } .report-reason{ text-align:left; padding:.5rem .7rem; border-radius:var(--radius-sm); background:var(--void); border:1px solid var(--line-strong); color:var(--bone); cursor:pointer; font-size:.86rem; font-family:inherit; transition:border-color .12s; } .report-reason:hover{ border-color:var(--muted); } .report-reason.on{ border-color:var(--cyan); box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent); } .report-note{ width:100%; margin-top:10px; min-height:58px; resize:vertical; } .report-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; } /* a comment hidden by moderation (author + staff still see it, dimmed, with a marker) */ .comment.is-hidden{ opacity:.6; } .cmt-hidden-note{ font-size:.74rem; color:var(--rc-corrupted); font-weight:600; } /* build video — play button + click-to-load modal (youtube-nocookie, no contact with Google until play) */ .video-btn svg{ width:16px; height:16px; } .video-overlay{ position:fixed; inset:0; z-index:60; background:color-mix(in srgb,var(--void-deep) 86%,transparent); display:flex; align-items:center; justify-content:center; padding:20px; } .video-box{ width:100%; max-width:820px; } .video-close{ display:block; margin:0 0 8px auto; width:34px; height:34px; border-radius:50%; background:var(--void); border:1px solid var(--line-strong); color:var(--bone); font-size:1.2rem; line-height:1; cursor:pointer; } .video-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; box-shadow:0 12px 50px rgba(0,0,0,.6); } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video-consent{ margin:10px 2px 0; font-size:.78rem; color:var(--muted); text-align:center; } /* cover lightbox — click the uploaded cover to view it large */ .img-overlay{ position:fixed; inset:0; z-index:60; background:color-mix(in srgb,var(--void-deep) 88%,transparent); display:flex; align-items:center; justify-content:center; padding:20px; } .img-box{ display:flex; flex-direction:column; max-width:96vw; max-height:96vh; } .img-box img{ max-width:100%; max-height:88vh; border-radius:10px; box-shadow:0 12px 50px rgba(0,0,0,.6); object-fit:contain; } /* element selector swatches */ /* element picker = bare clickable wrapper around the shared .el-badge component */ .el-pick{ display:flex; gap:8px; flex-wrap:wrap; } .el-pick button{ padding:0; border:0; background:none; border-radius:999px; cursor:pointer; } .el-pick button.selected .el-badge{ border-color:var(--accent); color:var(--bone); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent); } /* role tag picker (fixed list of checkboxes) */ .role-pick{ display:flex; flex-wrap:wrap; gap:8px; } /* .role-chip is a