/* ========================================================================== ARCEUS UI for aneemate.com The web twin of the in game kit (Source/Aneemate/Public/UI/CEPsKit.h): smoky dark translucent bands, warm cream for what is focused or important, gold accents and a gold diamond marker, thin light rules, spaced small caps labels, soft vignettes over big art, calm eased motion. It is layered on brand.css (fonts, .btn clip shape, .rise reveal) and never renames anything brand.css owns. Every component is prefixed "a-" so it can live next to the old page styles while the pages are moved over one by one. Put class="arc" on to switch a whole page to the Arceus ground (dark smoke, cream ink). Full reference: ARCEUS_UI.md. ========================================================================== */ :root{ /* ground and smoke */ --a-night:#0B0D14; /* page ground */ --a-night-2:#12151F; /* raised ground */ --a-smoke:rgba(9,9,14,.62); /* CEPsKit Smoke */ --a-smoke-hi:rgba(9,9,14,.80);/* HudSmoke */ --a-band:rgba(18,18,26,.72); /* Band */ --a-band-hi:rgba(33,33,46,.85);/* BandHover */ --a-tile:rgba(41,43,56,.95); /* TileFill */ --a-rule:rgba(255,255,255,.14); --a-rule-2:rgba(255,255,255,.08); --a-rim:inset 0 0 0 1px rgba(255,255,255,.12); /* cream and parchment */ --a-cream:#F4EEDC; --a-cream-2:#EADFC3; --a-parchment:#E9DDBE; --a-ink:#1F2430; /* ink on cream (CreamInk family) */ --a-ink-2:#4A4A55; --a-text:#F4F2EC; /* text on smoke */ --a-soft:#CDCFD9; --a-dim:#9A9EAD; /* gold and accents */ --a-gold:#E7B64A; --a-gold-hi:#FED654; --a-gold-lo:#B8862A; --a-grad-gold:linear-gradient(180deg,#FED654 0%,#E7B64A 100%); --a-grad-gold-h:linear-gradient(90deg,#FED654,#E7B64A); --a-purple:#9146FF; /* QORPO / web3 accent only */ --a-purple-soft:#B58AFC; --a-leaf:#6FCF5F; --a-red:#FF7A73; /* elements (primary seven, plus the two that are only ever second) */ --el-fire:#FF7A45; --el-water:#5AB8FF; --el-nature:#6FCF5F; --el-electric:#FFD23F; --el-psychic:#C59BFF; --el-ice:#8FE3F0; --el-rock:#C9A36B; --el-shadow:#5B3E9E; --el-sky:#86E3D8; /* rarity */ --r-common:#A9B0BF; --r-rare:#5B9BFF; --r-epic:#A46BFF; --r-legendary:#F2C75C; --r-mystic:#FF6FDF; /* type */ --a-display:LilitaOne,"Lilita One","Arial Black",Impact,sans-serif; --a-body:AneeBody,"Cabinet Grotesk","Segoe UI",Arial,sans-serif; /* shape and motion */ --a-r:14px; --a-r-lg:22px; --a-r-pill:999px; --a-ease:cubic-bezier(.22,.8,.26,1); --a-back:cubic-bezier(.34,1.46,.64,1); --a-fast:180ms; --a-dur:220ms; --a-slow:240ms; --a-reveal:520ms; --a-shadow:0 22px 50px rgba(0,0,0,.42); --a-maxw:1240px; } /* ── page ground ──────────────────────────────────────────────────────── */ body.arc{background:var(--a-night);color:var(--a-text)} body.arc p{color:var(--a-soft)} body.arc ::selection{background:var(--a-gold);color:var(--a-ink)} body.arc :focus-visible{outline:2px solid var(--a-gold-hi);outline-offset:3px} .a-wrap{width:100%;max-width:var(--a-maxw);margin:0 auto;padding:0 22px} @media(max-width:600px){.a-wrap{padding:0 16px}} .a-sec{position:relative;padding:clamp(64px,9vw,128px) 0;overflow:hidden} .a-sec--tight{padding:clamp(44px,6vw,80px) 0} /* a soft vignette you can lay over any art or section */ .a-vignette{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(5,6,10,.78) 100%)} .a-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── typography ───────────────────────────────────────────────────────── */ .a-display{font-family:var(--a-display);font-weight:400;line-height:.98;letter-spacing:.01em;text-transform:none} .a-h1{font-family:var(--a-display);font-weight:400;font-size:clamp(40px,6.2vw,84px);line-height:.96;color:var(--a-cream); text-transform:none;letter-spacing:.005em;text-shadow:0 4px 24px rgba(0,0,0,.45)} .a-h2{font-family:var(--a-display);font-weight:400;font-size:clamp(32px,4.4vw,58px);line-height:1;color:var(--a-cream); text-transform:none;letter-spacing:.005em} .a-h3{font-family:var(--a-display);font-weight:400;font-size:clamp(20px,2vw,26px);line-height:1.05;color:var(--a-cream);text-transform:none} .a-gold-text{background:var(--a-grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent} .a-lead{font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--a-soft);max-width:60ch} .a-fine{font-size:13px;color:var(--a-dim);line-height:1.55} /* spaced small caps label */ .a-label{font-family:var(--a-body);font-weight:800;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--a-gold)} .a-label--dim{color:var(--a-dim)} .a-label--ink{color:var(--a-ink-2)} /* ── section header: thin rules and a diamond ─────────────────────────── */ .a-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(28px,4vw,48px)} .a-head--left{align-items:flex-start;text-align:left} .a-rulehead{display:flex;align-items:center;gap:14px;width:min(100%,560px)} .a-head--left .a-rulehead{width:auto} .a-rulehead::before,.a-rulehead::after{content:"";flex:1 1 40px;height:1px; background:linear-gradient(90deg,transparent,var(--a-gold) 60%,var(--a-gold))} .a-rulehead::after{background:linear-gradient(90deg,var(--a-gold),var(--a-gold) 40%,transparent)} .a-head--left .a-rulehead::before{display:none} .a-head--left .a-rulehead::after{flex:0 0 72px} .a-rulehead .a-label{display:inline-flex;align-items:center;gap:12px;white-space:nowrap} .a-rulehead .a-label::before,.a-rulehead .a-label::after{content:"";width:7px;height:7px;background:var(--a-gold);transform:rotate(45deg);flex:0 0 auto} .a-head--left .a-rulehead .a-label::before{display:none} .a-head .a-lead{margin:0 auto} .a-head--left .a-lead{margin:0} /* a plain thin rule, with an optional centre diamond */ .a-rule{height:1px;background:var(--a-rule);border:0;margin:24px 0} .a-rule--diamond{position:relative;background:linear-gradient(90deg,transparent,var(--a-rule) 20%,var(--a-rule) 80%,transparent)} .a-rule--diamond::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px; background:var(--a-gold);transform:rotate(45deg)} /* the gold diamond focus marker, on its own */ .a-diamond{display:inline-block;width:9px;height:9px;background:var(--a-grad-gold);transform:rotate(45deg); box-shadow:0 0 12px rgba(254,214,84,.55);flex:0 0 auto} /* ── panels ───────────────────────────────────────────────────────────── */ /* smoky panel with a thin light rim */ .a-smoke{background:var(--a-smoke);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1); box-shadow:var(--a-rim),var(--a-shadow);border-radius:var(--a-r-lg)} /* cream headed panel (CreamHeader): a cream pill on top of a smoky body */ .a-panel{position:relative;background:var(--a-smoke);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:var(--a-rim),var(--a-shadow);border-radius:var(--a-r-lg);padding:0 0 18px} .a-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px; background:var(--a-cream);color:var(--a-ink);border-radius:var(--a-r-lg) var(--a-r-lg) 0 0; padding:12px 20px;font-family:var(--a-display);font-size:20px;line-height:1.1} .a-panel__head .a-label{color:var(--a-ink-2);font-size:11px} .a-panel__body{padding:18px 20px 0} /* parchment panel: the cream card used for reading content */ .a-parch{background:linear-gradient(180deg,#F7F1E1,#EFE5CB);color:var(--a-ink);border-radius:var(--a-r-lg); box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px rgba(0,0,0,.28);padding:26px} .a-parch p,body.arc .a-parch p{color:var(--a-ink-2)} .a-parch .a-h3{color:var(--a-ink)} /* ── band list: smoky rows, the focused one turns cream with a gold diamond ─ */ .a-list{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0} .a-band{position:relative;display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 18px 10px 30px; background:var(--a-band);color:var(--a-text);border-radius:10px;box-shadow:var(--a-rim); transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)} .a-band::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px; background:var(--a-grad-gold);transform:rotate(45deg) scale(0);transition:transform var(--a-dur) var(--a-back)} .a-band:hover{background:var(--a-band-hi)} .a-band.is-on,.a-band[aria-selected="true"],a.a-band:focus-visible,button.a-band:focus-visible{ background:var(--a-cream);color:var(--a-ink);outline:none;transform:translateX(4px)} .a-band.is-on::before,.a-band[aria-selected="true"]::before,a.a-band:focus-visible::before,button.a-band:focus-visible::before{transform:rotate(45deg) scale(1)} .a-band.is-on p,.a-band[aria-selected="true"] p{color:var(--a-ink-2)} .a-band__k{font-weight:700;flex:1 1 auto;min-width:0} .a-band__v{font-family:var(--a-display);font-size:20px;color:var(--a-gold-hi);white-space:nowrap} .a-band.is-on .a-band__v{color:var(--a-gold-lo)} .a-band__sub{display:block;font-weight:500;font-size:13px;color:var(--a-dim);margin-top:2px} .a-band.is-on .a-band__sub{color:var(--a-ink-2)} /* ── elements: badges and the dual pair ───────────────────────────────── */ .a-el{--c:var(--el-nature);display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 4px; border-radius:var(--a-r-pill);background:color-mix(in srgb,var(--c) 22%,rgba(10,10,16,.75)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent); color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;line-height:1} .a-el svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--c);color:#16131c;flex:0 0 auto} .a-el--fire{--c:var(--el-fire)}.a-el--water{--c:var(--el-water)}.a-el--nature{--c:var(--el-nature)} .a-el--electric{--c:var(--el-electric)}.a-el--psychic{--c:var(--el-psychic)}.a-el--ice{--c:var(--el-ice)} .a-el--rock{--c:var(--el-rock)}.a-el--shadow{--c:var(--el-shadow)}.a-el--sky{--c:var(--el-sky)} .a-el--shadow svg{color:#EDE6FF} .a-el--sm{height:22px;font-size:10px;padding:0 8px 0 3px} .a-el--sm svg{width:16px;height:16px} .a-el--icon{padding:0 3px;width:26px;justify-content:center} .a-el--icon span{display:none} /* the dual pair: two badges joined, the second one a step smaller */ .a-dual{display:inline-flex;align-items:center;gap:0} .a-dual .a-el+.a-el{margin-left:-6px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),-3px 0 0 0 rgba(10,10,16,.9)} .a-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center} /* light ground (cream) version */ .a-on-cream .a-el,.a-parch .a-el{background:color-mix(in srgb,var(--c) 26%,#fff);color:var(--a-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,#000 0%)} /* rarity pill */ .a-rar{--c:var(--r-common);display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--a-r-pill); font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c); background:color-mix(in srgb,var(--c) 14%,rgba(10,10,16,.8));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent)} .a-rar::before{content:"";width:6px;height:6px;background:var(--c);transform:rotate(45deg)} .a-rar--common{--c:var(--r-common)}.a-rar--rare{--c:var(--r-rare)}.a-rar--epic{--c:var(--r-epic)} .a-rar--legendary{--c:var(--r-legendary)}.a-rar--mystic{--c:var(--r-mystic)} /* ── creature card: the render bleeds out of a circle ─────────────────── */ .a-mate{--c:var(--el-nature);--c2:var(--c);position:relative;display:flex;flex-direction:column;align-items:center; width:220px;padding:138px 16px 16px;margin-top:40px;border-radius:var(--a-r-lg);color:var(--a-text);text-decoration:none; background:linear-gradient(180deg,rgba(28,29,40,.88),rgba(12,13,20,.92));box-shadow:var(--a-rim),0 16px 34px rgba(0,0,0,.35); transition:transform var(--a-slow) var(--a-ease),box-shadow var(--a-slow) var(--a-ease),background var(--a-slow) var(--a-ease)} .a-mate::before{/* the circle */content:"";position:absolute;left:50%;top:-26px;width:150px;height:150px;margin-left:-75px;border-radius:50%; background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 70%,#fff 10%) 0%,color-mix(in srgb,var(--c) 40%,#111) 58%,color-mix(in srgb,var(--c2) 45%,#0b0b12) 100%); box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 0 6px rgba(10,10,16,.55),0 12px 30px color-mix(in srgb,var(--c) 30%,transparent)} .a-mate__art{position:absolute;left:50%;top:-58px;width:180px;height:180px;margin-left:-90px;object-fit:contain;object-position:50% 100%;z-index:1; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));transition:transform var(--a-slow) var(--a-back);pointer-events:none} .a-mate__art--icon{top:-14px;width:128px;height:128px;margin-left:-64px;object-position:50% 50%} .a-mate__name{position:relative;font-family:var(--a-display);font-size:24px;line-height:1.05;color:var(--a-cream);text-align:center} .a-mate .a-badges{justify-content:center;margin-top:8px} .a-mate__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:14px;padding-top:12px;border-top:1px solid var(--a-rule-2)} .a-mate__no{font-weight:800;font-size:11px;letter-spacing:.16em;color:var(--a-dim)} .a-mate__marker{position:absolute;left:50%;bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--a-grad-gold); transform:rotate(45deg) scale(0);transition:transform var(--a-dur) var(--a-back)} .a-mate:hover,.a-mate:focus-visible{transform:translateY(-6px);outline:none; box-shadow:inset 0 0 0 1px rgba(254,214,84,.75),0 24px 44px rgba(0,0,0,.45),0 0 0 4px rgba(231,182,74,.18)} .a-mate:hover .a-mate__art,.a-mate:focus-visible .a-mate__art{transform:translateY(-8px) scale(1.05)} .a-mate:hover .a-mate__marker,.a-mate:focus-visible .a-mate__marker{transform:rotate(45deg) scale(1)} .a-mate--sm{width:180px;padding-top:112px} .a-mate--sm::before{width:120px;height:120px;margin-left:-60px;top:-20px} .a-mate--sm .a-mate__art{width:146px;height:146px;margin-left:-73px;top:-46px} .a-mate--sm .a-mate__art--icon{width:104px;height:104px;margin-left:-52px;top:-12px} .a-mate--sm .a-mate__name{font-size:20px} /* ── stat bars ────────────────────────────────────────────────────────── */ .a-stat{display:grid;grid-template-columns:110px 1fr 44px;align-items:center;gap:12px;font-size:13px} .a-stat__k{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-dim)} .a-stat__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .a-stat__bar i{display:block;height:100%;width:var(--v,0%);border-radius:inherit;background:var(--a-grad-gold-h); transform-origin:left;transform:scaleX(0);transition:transform 700ms var(--a-ease)} .a-stat.is-in .a-stat__bar i,.no-motion .a-stat__bar i{transform:scaleX(1)} .a-stat__v{font-family:var(--a-display);font-size:18px;text-align:right;color:var(--a-cream)} .a-stats{display:flex;flex-direction:column;gap:10px} /* ── key cap ──────────────────────────────────────────────────────────── */ .a-key{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:7px; background:linear-gradient(180deg,#2A2C38,#15161E);color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 #07070b,0 0 0 1px rgba(255,255,255,.1)} .a-keyhint{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--a-soft)} /* ── buttons: brand.js still draws the clipped shape on every .btn ────── */ .btn-gold{background:var(--a-grad-gold);color:#2B1E05;text-shadow:0 1px 0 rgba(255,255,255,.35); box-shadow:0 14px 30px rgba(231,182,74,.32)} .btn-gold:hover{filter:brightness(1.05)} .btn-cream{background:var(--a-cream);color:var(--a-ink)} .btn-smoke{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:var(--a-cream); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .btn-smoke:hover{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.1))} .btn-qorpo{background:linear-gradient(180deg,#A66BFF,#7B34E8);color:#fff;box-shadow:0 14px 30px rgba(145,70,255,.35)} .btn-gold::after,.btn-cream::after,.btn-smoke::after,.btn-qorpo::after{display:none} .btn .a-diamond{width:8px;height:8px;background:currentColor;box-shadow:none} .a-link{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-gold-hi)} .a-link::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg); transition:transform var(--a-dur) var(--a-ease)} .a-link:hover::after{transform:translateX(4px) rotate(45deg)} .a-iconbtn{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--a-cream); background:var(--a-band);box-shadow:var(--a-rim);transition:background var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)} .a-iconbtn:hover{background:var(--a-cream);color:var(--a-ink)} .a-iconbtn:active{transform:scale(.94)} .a-iconbtn[disabled]{opacity:.35;pointer-events:none} .a-iconbtn svg{width:18px;height:18px} /* ── tabs and chips ───────────────────────────────────────────────────── */ .a-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--a-r-pill);background:var(--a-smoke);box-shadow:var(--a-rim);max-width:100%;overflow-x:auto;scrollbar-width:none} .a-tabs::-webkit-scrollbar{display:none} .a-tab{position:relative;height:38px;padding:0 18px;border-radius:var(--a-r-pill);font-weight:800;font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--a-soft);white-space:nowrap;transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease)} .a-tab:hover{color:var(--a-cream)} .a-tab[aria-selected="true"]{background:var(--a-cream);color:var(--a-ink)} .a-tabpanel[hidden]{display:none} .a-tabpanel{animation:aFadeUp var(--a-slow) var(--a-ease)} .a-chips{display:flex;flex-wrap:wrap;gap:8px} .a-chip{--c:var(--a-gold);display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 10px;border-radius:var(--a-r-pill); background:var(--a-band);box-shadow:var(--a-rim);color:var(--a-soft);font-weight:800;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease),transform var(--a-fast) var(--a-ease)} .a-chip i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)} .a-chip:hover{background:var(--a-band-hi);color:var(--a-cream)} .a-chip:active{transform:scale(.96)} .a-chip[aria-pressed="true"]{background:var(--a-cream);color:var(--a-ink)} .a-chip .n{opacity:.6;font-size:10.5px} /* ── tooltip: any element with data-tip ───────────────────────────────── */ [data-tip]{position:relative} [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);z-index:30;width:max-content;max-width:240px; padding:8px 12px;border-radius:10px;background:var(--a-cream);color:var(--a-ink);font:700 12.5px/1.35 var(--a-body);letter-spacing:0;text-transform:none; box-shadow:0 12px 26px rgba(0,0,0,.35);pointer-events:none;opacity:0;transform:translate(-50%,6px) scale(.96); transition:opacity var(--a-fast) var(--a-ease),transform var(--a-fast) var(--a-ease)} [data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)} /* ── modal (a