/* ============================================================================ ENTER THE UNIVERSE — account-bound control panel (Community Contributions P6) Canonical scoped styles for the folded Sigil Crest + right slide-out Drawer. Aesthetic is LOCKED by logs/UNIVERSE-PANEL-DESIGN-2026-07-27.md + the approved scratchpad mockup. Tokens: dark #0A0806 / gold #C8A14A + #E8C870 / bone #E8E0D0, Cinzel + EB Garamond with a graceful serif fallback (no CDN dependency needed to render). NO PURPLE anywhere — status/special hues are moss / brass / ember / dark-teal / bronze only. Every class is prefixed `up-` and every rule is scoped under the `.up` wrapper so the panel drops onto ANY of the five tool pages (timeline, lore map, codex, wiki, translator) without colliding with that page's own CSS. The wrapper carries no transform, so the fixed crest/drawer position against the viewport. ============================================================================ */ .up, .up-crest{ --up-bg:#0A0806; --up-panel:#120D08; --up-card:#18120A; --up-card-hover:#1F1710; --up-leather:#14110d; --up-paper:#1a1714; --up-border:#2B241F; --up-border-active:#3E3420; --up-gold:#C8A14A; --up-gold-lt:#E8C870; --up-gold-soft:#8a6e2e; --up-bone:#E8E0D0; --up-ink:#f3ead4; --up-muted:#8A7A5A; --up-dim:#4A3E2E; --up-moss:#6AA34E; --up-brass:#B08A3E; --up-ember:#C8692A; --up-teal:#3A7A8C; --up-bronze:#9C6B3A; --up-radiant:#F0E4C0; --up-shadow:0 8px 32px rgba(0,0,0,.55); --up-serif-h:'Cinzel','Trajan Pro',Georgia,'Times New Roman',serif; --up-serif-b:'EB Garamond','Cormorant Garamond',Georgia,'Times New Roman',serif; --up-tr:.18s ease; } /* Light-theme rebind — mirrors the codex behaviour when . */ [data-theme="light"] .up, [data-theme="light"] .up-crest{ --up-bg:#F0EBE0; --up-panel:#E8E1D2; --up-card:#E0D8C5; --up-card-hover:#D8CEB8; --up-leather:#f2e7c8; --up-paper:#f5ecd2; --up-border:#C6B48A; --up-border-active:#A89468; --up-bone:#241a0c; --up-ink:#2a2114; --up-muted:#6a5a3a; --up-dim:#9c8a60; } .up, .up-crest, .up *, .up-crest *, .up *::before, .up *::after{ box-sizing:border-box; } .up button{ font-family:inherit; cursor:pointer; } .up a{ color:var(--up-gold); text-decoration:none; transition:color var(--up-tr); } .up a:hover{ color:var(--up-gold-lt); } /* ============ FOLDED STATE: THE SIGIL CREST ============ */ .up-crest{ position:fixed; top:9px; right:20px; z-index:1200; width:46px; height:46px; border-radius:50%; /* Fixed dark medallion in BOTH themes so the gold sigil stays high-contrast. (var(--up-card) flipped to light beige in light theme -> low-contrast letter.) */ background:radial-gradient(circle at 50% 40%,#241a10 0%,#18120A 70%); border:1px solid var(--up-gold-soft); margin:0; padding:0; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(176,138,62,.18),0 4px 14px rgba(0,0,0,.6),inset 0 0 10px rgba(200,161,74,.14); transition:transform var(--up-tr),box-shadow var(--up-tr); } .up-crest:hover{ transform:translateY(-1px); } .up-crest .up-initial{ font-family:var(--up-serif-h); font-weight:700; font-size:1.05rem; color:var(--up-gold-lt); text-shadow:0 1px 3px #000; line-height:1; transform:translateY(1px); } .up-crest .up-ring{ position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--up-brass); opacity:.7; pointer-events:none; } .up-crest .up-pip{ position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:var(--up-gold-lt); border:2px solid var(--up-bg); box-shadow:0 0 8px rgba(232,200,112,.8); } .up-crest .up-micro{ position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--up-serif-h); font-size:.54rem; letter-spacing:.05em; color:var(--up-bg); background:var(--up-gold); padding:.06rem .4rem; border-radius:10px; font-weight:700; } /* tier ring hue variants (bronze -> radiant gold, no purple) */ .up-crest.up-ring-bronze{ border-color:#9C6B3A; box-shadow:0 0 0 3px rgba(156,107,58,.20),0 4px 14px rgba(0,0,0,.6),inset 0 0 10px rgba(200,161,74,.12); } .up-crest.up-ring-brass{ border-color:#B08A3E; box-shadow:0 0 0 3px rgba(176,138,62,.22),0 4px 14px rgba(0,0,0,.6),inset 0 0 10px rgba(200,161,74,.14); } .up-crest.up-ring-gold{ border-color:#C8A14A; box-shadow:0 0 0 3px rgba(200,161,74,.24),0 4px 14px rgba(0,0,0,.6),inset 0 0 10px rgba(200,161,74,.16); } .up-crest.up-ring-gold-lt{ border-color:#E8C870; box-shadow:0 0 0 3px rgba(232,200,112,.26),0 4px 14px rgba(0,0,0,.6),inset 0 0 10px rgba(232,200,112,.18); } .up-crest.up-ring-radiant{ border-color:#F0E4C0; box-shadow:0 0 0 4px rgba(240,228,192,.30),0 4px 14px rgba(0,0,0,.6),inset 0 0 12px rgba(240,228,192,.20); } .up-crest.up-ring-bronze .up-ring{ border-color:#9C6B3A; } .up-crest.up-ring-brass .up-ring{ border-color:#B08A3E; } .up-crest.up-ring-gold .up-ring{ border-color:#C8A14A; } .up-crest.up-ring-gold-lt .up-ring{ border-color:#E8C870; } .up-crest.up-ring-radiant .up-ring{ border-color:#F0E4C0; } /* In-nav mount: crest sits inside a page nav bar (in document flow), not floating. Added by universe-panel.js when the page provides a [data-up-crest-slot]. */ .up-crest.up-crest--nav{ position:relative; top:auto; right:auto; z-index:auto; width:34px; height:34px; flex-shrink:0; cursor:pointer; box-shadow:0 0 0 2px rgba(176,138,62,.20), inset 0 0 8px rgba(200,161,74,.14); transition:box-shadow var(--up-tr), border-color var(--up-tr), transform var(--up-tr); } .up-crest.up-crest--nav .up-initial{ font-size:.92rem; } .up-crest.up-crest--nav .up-micro{ display:none; } .up-crest.up-crest--nav:hover{ transform:scale(1.09); border-color:var(--up-gold-lt); box-shadow:0 0 0 2px rgba(232,200,112,.38), 0 2px 10px rgba(0,0,0,.5), inset 0 0 10px rgba(232,200,112,.22); } .up-crest.up-crest--nav:hover .up-ring{ border-color:var(--up-gold-lt); opacity:1; } .up-crest.up-crest--nav:focus-visible{ outline:2px solid var(--up-gold-lt); outline-offset:2px; } .up-crest.up-crest--nav .up-pip{ top:-2px; right:-2px; } .up-crest-tip{ position:fixed; top:60px; right:16px; z-index:1199; font-family:var(--up-serif-h); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--up-gold-lt); background:rgba(10,8,6,.92); border:1px solid var(--up-gold-soft); padding:.3rem .6rem; border-radius:6px; opacity:0; transform:translateY(-4px); transition:opacity var(--up-tr),transform var(--up-tr); pointer-events:none; } .up-crest:hover + .up-crest-tip{ opacity:1; transform:translateY(0); } /* ============ UNFOLDED STATE: THE DRAWER ============ */ .up-scrim{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55); backdrop-filter:blur(1px); opacity:0; visibility:hidden; transition:opacity .22s ease,visibility .22s ease; } .up-scrim.up-open{ opacity:1; visibility:visible; } .up-drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1400; width:min(420px,94vw); background:color-mix(in srgb,var(--up-leather) 94%,transparent); backdrop-filter:blur(9px); border-left:2px solid var(--up-gold-soft); box-shadow:var(--up-shadow); display:flex; flex-direction:column; color:var(--up-bone); font-family:var(--up-serif-b); font-size:16px; line-height:1.6; transform:translateX(100%); transition:transform .22s ease; } .up-drawer.up-open{ transform:translateX(0); } .up-drawer h1,.up-drawer h2,.up-drawer h3,.up-drawer h4{ font-family:var(--up-serif-h); letter-spacing:.04em; line-height:1.2; font-weight:600; } /* drawer header */ .up-dh{ position:sticky; top:0; z-index:2; padding:1rem 1.1rem .9rem; border-bottom:1px solid var(--up-border); background:linear-gradient(180deg,rgba(36,26,16,.55),rgba(20,17,13,.2)); backdrop-filter:blur(6px); } .up-dh-top{ display:flex; align-items:flex-start; gap:.7rem; } .up-dh-crest{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 50% 40%,#2a1f12 0%,var(--up-card) 72%); border:1px solid var(--up-brass); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(176,138,62,.2),inset 0 0 12px rgba(200,161,74,.16); position:relative; overflow:hidden; } .up-dh-crest .up-initial{ font-family:var(--up-serif-h); font-weight:700; font-size:1.25rem; color:var(--up-gold-lt); } .up-dh-crest img{ width:100%; height:100%; object-fit:cover; } .up-dh-id{ flex:1 1 auto; min-width:0; } .up-dh-name{ font-family:var(--up-serif-h); font-size:1.05rem; color:var(--up-bone); letter-spacing:.03em; } .up-dh-handle{ font-size:.82rem; color:var(--up-muted); } .up-dh-tier{ margin-top:.35rem; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--up-serif-h); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--up-brass); border:1px solid var(--up-brass); padding:.16rem .5rem; border-radius:20px; } .up-dh-tier .up-dot{ width:7px; height:7px; border-radius:50%; background:var(--up-brass); } .up-dh-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; flex:0 0 auto; } .up-icon-btn{ width:30px; height:30px; border-radius:6px; background:transparent; border:1px solid var(--up-border); color:var(--up-muted); display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--up-tr),color var(--up-tr); } .up-icon-btn:hover{ border-color:var(--up-gold); color:var(--up-gold-lt); } .up-acct-link{ font-family:var(--up-serif-h); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--up-muted); border:1px solid var(--up-border); padding:.22rem .45rem; border-radius:6px; white-space:nowrap; transition:all var(--up-tr); } .up-acct-link:hover{ border-color:var(--up-gold-soft); color:var(--up-gold-lt); } .up-dh-recog{ margin-top:.7rem; display:flex; gap:.4rem; flex-wrap:wrap; } .up-rbadge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.68rem; padding:.2rem .5rem; border-radius:6px; border:1px solid var(--up-border); color:var(--up-bone); background:rgba(255,255,255,.02); } .up-rbadge b{ font-family:var(--up-serif-h); font-size:.62rem; letter-spacing:.06em; } .up-rbadge.up-fr{ border-color:rgba(106,163,78,.4); } .up-rbadge.up-fr b{ color:var(--up-moss); } .up-rbadge.up-sr{ border-color:rgba(79,176,166,.4); } .up-rbadge.up-sr b{ color:#4FB0A6; } .up-rbadge.up-co{ border-color:rgba(200,161,74,.4); } .up-rbadge.up-co b{ color:var(--up-gold); } /* drawer body */ .up-db{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:.4rem .9rem 1.2rem; scrollbar-width:thin; scrollbar-color:var(--up-border) transparent; } .up-db::-webkit-scrollbar{ width:6px; } .up-db::-webkit-scrollbar-thumb{ background:var(--up-border); border-radius:3px; } .up-sec{ border:1px solid var(--up-border); border-radius:10px; background:var(--up-paper); margin-top:.8rem; overflow:hidden; } .up-sec-head{ width:100%; display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; background:transparent; border:0; color:var(--up-bone); text-align:left; } .up-sec-head .up-sh-ico{ color:var(--up-gold); flex:0 0 auto; display:inline-flex; } .up-sec-head .up-sh-title{ font-family:var(--up-serif-h); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--up-ink); flex:1 1 auto; } .up-sec-head .up-sh-count{ font-size:.66rem; color:var(--up-muted); background:rgba(255,255,255,.03); border:1px solid var(--up-border); border-radius:20px; padding:.08rem .45rem; } .up-sec-head .up-sh-chev{ color:var(--up-muted); transition:transform var(--up-tr); flex:0 0 auto; } .up-sec.up-collapsed .up-sh-chev{ transform:rotate(-90deg); } .up-sec-body{ padding:0 .85rem .9rem; } .up-sec.up-collapsed .up-sec-body{ display:none; } .up-sec-lead{ font-size:.85rem; color:var(--up-muted); font-style:italic; margin:-.1rem 0 .6rem; line-height:1.5; } .up-empty{ font-size:.8rem; color:var(--up-muted); font-style:italic; padding:.4rem 0 .2rem; } /* standing grid */ .up-stand-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .up-stat{ border:1px solid var(--up-border); border-radius:8px; padding:.5rem .6rem; background:rgba(255,255,255,.015); } .up-stat .up-k{ font-family:var(--up-serif-h); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--up-dim); } .up-stat .up-v{ font-size:.9rem; color:var(--up-bone); margin-top:.15rem; } .up-stat .up-v small{ color:var(--up-muted); font-size:.72rem; } .up-stat .up-v.up-good{ color:var(--up-moss); } /* round rows */ .up-row{ border:1px solid var(--up-border); border-radius:8px; padding:.6rem .7rem; margin-top:.55rem; background:rgba(255,255,255,.015); } .up-row.up-locked{ border-style:dashed; border-color:rgba(58,122,140,.4); background:rgba(58,122,140,.05); } .up-row-top{ display:flex; align-items:center; gap:.5rem; } .up-row-title{ font-family:var(--up-serif-h); font-size:.86rem; color:var(--up-bone); flex:1 1 auto; letter-spacing:.02em; } .up-round-tag{ font-size:.6rem; font-family:var(--up-serif-h); letter-spacing:.08em; text-transform:uppercase; color:var(--up-gold-soft); border:1px solid var(--up-gold-soft); border-radius:5px; padding:.05rem .35rem; white-space:nowrap; } .up-countdown{ font-size:.68rem; color:var(--up-ember); white-space:nowrap; display:inline-flex; align-items:center; gap:.25rem; } .up-lanes{ display:flex; gap:.35rem; flex-wrap:wrap; margin:.5rem 0; } .up-lane{ font-size:.62rem; letter-spacing:.04em; padding:.14rem .45rem; border-radius:5px; border:1px solid var(--up-border); color:var(--up-muted); } .up-lane.up-mine{ border-color:var(--up-brass); color:var(--up-gold-lt); } .up-lane.up-done{ border-color:rgba(106,163,78,.45); color:var(--up-moss); } .up-row-foot{ display:flex; align-items:center; gap:.4rem; margin-top:.15rem; flex-wrap:wrap; } .up-row-status{ font-size:.72rem; color:var(--up-muted); flex:1 1 auto; font-style:italic; } .up-btn{ font-family:var(--up-serif-h); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .6rem; border-radius:6px; border:1px solid var(--up-gold-soft); background:transparent; color:var(--up-gold-lt); transition:all var(--up-tr); } .up-btn:hover{ background:rgba(200,161,74,.12); border-color:var(--up-gold); } .up-btn.up-solid{ background:var(--up-gold); color:var(--up-bg); border-color:transparent; } .up-btn.up-solid:hover{ background:var(--up-gold-lt); } .up-btn.up-ghost{ border-color:var(--up-border); color:var(--up-muted); } .up-btn.up-ghost:hover{ color:var(--up-bone); border-color:var(--up-border-active); } .up-locknote{ display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--up-teal); } .up-excl-note{ margin-top:.6rem; display:flex; gap:.45rem; align-items:flex-start; font-size:.72rem; color:var(--up-muted); border:1px solid var(--up-border); border-left:2px solid var(--up-teal); border-radius:6px; padding:.45rem .55rem; background:rgba(58,122,140,.06); } .up-excl-note svg{ flex:0 0 auto; color:var(--up-teal); margin-top:1px; } /* inline suggest / vote forms (real POSTs to the existing endpoints) */ .up-form{ margin-top:.55rem; border-top:1px dashed var(--up-border); padding-top:.55rem; display:none; } .up-form.up-show{ display:block; } .up-form label{ display:block; font-family:var(--up-serif-h); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--up-dim); margin:.35rem 0 .15rem; } .up-form input[type=text], .up-form textarea, .up-form select{ width:100%; background:rgba(255,255,255,.02); border:1px solid var(--up-border); border-radius:6px; color:var(--up-bone); font-family:var(--up-serif-b); font-size:.82rem; padding:.35rem .5rem; } .up-form textarea{ min-height:64px; resize:vertical; } .up-vote-list{ margin-top:.4rem; display:flex; flex-direction:column; gap:.35rem; } .up-vote-item{ display:flex; align-items:center; gap:.5rem; } .up-vote-item .up-vi-name{ flex:1 1 auto; font-size:.78rem; color:var(--up-bone); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* contribution rows */ .up-contrib{ display:flex; align-items:center; gap:.55rem; padding:.5rem .55rem; border:1px solid var(--up-border); border-radius:8px; margin-top:.5rem; background:rgba(255,255,255,.015); } .up-contrib .up-c-body{ flex:1 1 auto; min-width:0; } .up-c-name{ font-size:.86rem; color:var(--up-bone); display:flex; align-items:center; gap:.4rem; } .up-c-name a{ border-bottom:1px dotted var(--up-gold-soft); } .up-c-meta{ font-size:.68rem; color:var(--up-muted); margin-top:.1rem; } .up-pill{ font-size:.58rem; font-family:var(--up-serif-h); letter-spacing:.06em; text-transform:uppercase; padding:.16rem .45rem; border-radius:20px; white-space:nowrap; border:1px solid; } .up-pill.up-round{ color:var(--up-brass); border-color:var(--up-brass); } .up-pill.up-cand{ color:var(--up-gold-lt); border-color:var(--up-gold); background:rgba(200,161,74,.1); } .up-pill.up-fr{ color:var(--up-moss); border-color:rgba(106,163,78,.5); background:rgba(106,163,78,.1); } .up-pill.up-sr{ color:#4FB0A6; border-color:rgba(79,176,166,.5); background:rgba(79,176,166,.1); } .up-pill.up-co{ color:var(--up-moss); border-color:rgba(106,163,78,.35); } .up-pill.up-veto{ color:var(--up-ember); border-color:rgba(200,105,42,.5); } .up-pill.up-sealed{ color:var(--up-teal); border-color:rgba(58,122,140,.5); background:rgba(58,122,140,.08); } .up-sealed-name{ color:var(--up-teal); font-style:italic; display:inline-flex; align-items:center; gap:.35rem; } /* votes */ .up-vote{ padding:.5rem .55rem; border:1px solid var(--up-border); border-radius:8px; margin-top:.5rem; background:rgba(255,255,255,.015); } .up-vote-top{ display:flex; align-items:center; gap:.5rem; } .up-vote-name{ font-size:.82rem; color:var(--up-bone); flex:1 1 auto; } .up-vote-lock{ font-size:.6rem; color:var(--up-muted); display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; } .up-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.05); margin-top:.4rem; overflow:hidden; } .up-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--up-gold-soft),var(--up-gold-lt)); } .up-vote-meta{ font-size:.66rem; color:var(--up-muted); margin-top:.25rem; } /* tier / lane */ .up-tier-panel{ border:1px solid var(--up-brass); border-radius:8px; padding:.7rem; background:linear-gradient(180deg,rgba(176,138,62,.08),transparent); } .up-tier-name{ font-family:var(--up-serif-h); font-size:1rem; color:var(--up-gold-lt); letter-spacing:.04em; } .up-tier-sub{ font-size:.76rem; color:var(--up-muted); margin-top:.1rem; } .up-cascade{ list-style:none; margin:.6rem 0 0; padding:0; font-size:.76rem; } .up-cascade li{ display:flex; align-items:center; gap:.45rem; padding:.18rem 0; color:var(--up-muted); } .up-cascade li.up-on{ color:var(--up-bone); } .up-cascade li .up-tick{ color:var(--up-moss); } .up-cascade li .up-off{ color:var(--up-dim); } .up-quota{ margin-top:.6rem; font-size:.74rem; color:var(--up-muted); } .up-quota .up-qbar{ height:5px; border-radius:3px; background:rgba(255,255,255,.05); margin-top:.25rem; overflow:hidden; } .up-quota .up-qbar > i{ display:block; height:100%; background:var(--up-brass); } .up-nopay{ margin-top:.6rem; font-size:.7rem; color:var(--up-muted); display:flex; gap:.4rem; align-items:flex-start; border-top:1px solid var(--up-border); padding-top:.55rem; } .up-nopay svg{ color:var(--up-gold-soft); flex:0 0 auto; margin-top:1px; } /* attribution */ .up-attr-box{ border:1px solid var(--up-border); border-radius:8px; padding:.6rem .7rem; margin-top:.5rem; } .up-attr-box .up-at-head{ display:flex; align-items:center; gap:.45rem; font-family:var(--up-serif-h); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; } .up-attr-box.up-fr .up-at-head{ color:var(--up-moss); } .up-attr-box.up-sr .up-at-head{ color:#4FB0A6; } .up-attr-box.up-co .up-at-head{ color:var(--up-gold); } .up-attr-box p{ font-size:.78rem; color:var(--up-muted); margin-top:.3rem; line-height:1.55; } /* footer */ .up-df{ border-top:1px solid var(--up-border); padding:.85rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; background:rgba(20,17,13,.4); } .up-df .up-primary{ font-family:var(--up-serif-h); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:.55rem; border-radius:8px; background:var(--up-gold); color:var(--up-bg); font-weight:700; } .up-df .up-primary:hover{ background:var(--up-gold-lt); color:var(--up-bg); } .up-df .up-row2{ display:flex; justify-content:space-between; align-items:center; font-size:.66rem; color:var(--up-dim); gap:.5rem; } .up-df .up-row2 a{ color:var(--up-muted); } .up-df .up-row2 a:hover{ color:var(--up-gold-lt); } @media(max-width:640px){ .up-crest{ width:40px; height:40px; top:8px; right:14px; } .up-crest .up-micro{ display:none; } } @media(prefers-reduced-motion:reduce){ .up-drawer,.up-scrim,.up-crest,.up-crest-tip{ transition:none !important; } }