/* ===== style.css ===== */ :root{ --bg:#0c161b;--bg2:#122129;--panel:#17282f;--panel-l:#21363f;--panel-x:#2b4652;--line:#35525d;--line-l:#4f707c; --text:#FFF6E2;--muted:#c2c9c9;--dim:#8a9aa1;--ink:#11201f; --gold:#EFC851;--gold-d:#c8962c;--gold-x:#ffe08a;--red:#FF5555;--red-d:#a8291f;--hp:#ff6058;--blue:#87CEEB;--blue-d:#2f7fb8; --teal:#3fd8cf;--teal-d:#1f8f8a;--green:#7FFF00;--green-d:#3f8a33;--purple:#EE82EE;--purple-d:#6e3a9a;--orange:#FFA518; --ironclad:#d62000;--silent:#3fa34d;--defect:#2f9fd8;--necrobinder:#c15be6;--regent:#e6b23a;--colorless:#c9c9c9;--curse:#7a4bb0;--status:#8a8a8a; --attack:#c9342a;--skill:#3a9da6;--power:#e0a72d;--quest:#8a6cc9; --r-basic:#a8a8a8;--r-common:#d9d9d9;--r-uncommon:#5cc3ff;--r-rare:#f7c948;--r-ancient:#ff7d3b; --font-t:'Kreon','Georgia',serif;--font-b:'Kreon','Georgia',serif;--font-d:'Spectral','Georgia',serif;--font-i:'Bitter','Georgia',serif; --radius:10px;--cw:9.5rem; /* layout and spacing tokens (docs/wave2/layout.md): the topbar height the rail and drawer hang from, the rail width, the content column cap, and fluid gutter / panel padding / grid gap / block rhythm that shrink on phones and settle at the desktop numbers */ --tb-h:65px;--rail-w:13.5rem;--rail-w-open:13.5rem;--rail-w-closed:68px;--content-max:calc(70rem - 160px);--safe:calc(var(--gutter)*2); /* --rail-w drops to --rail-w-closed under html[data-rail="closed"] (app/rail.css, docs/wave3/rail.md) */ --gutter:clamp(.85rem,.5rem + 1.1vw,1.6rem);--pad:clamp(12px,.55rem + .55vw,18px);--gap:clamp(10px,.4rem + .5vw,16px);--stack:clamp(12px,.5rem + .5vw,18px); color-scheme:dark; } *{box-sizing:border-box} html{font-size:clamp(15px,calc(10px + 0.42vw),20px);scrollbar-width:thin;scrollbar-color:var(--line-l) rgba(0,0,0,.3)} ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}::-webkit-scrollbar-thumb{background:var(--line-l);border-radius:6px;border:2px solid rgba(0,0,0,.3)} body{margin:0;font-family:var(--font-b);font-size:1rem;line-height:1.45;color:var(--text);background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline} a.iconlink:hover,a.iconlink:focus-visible{text-decoration:none} /* a picture link (a relic, potion or power icon) never underlines (audit 25 Sep 2026: the keyword pages' "Named by" boxes) */ /* anything that opens a hover plate keeps the arrow, never the text cursor (Bean, 25 Sep 2026, on "TEXT" in Changes by version: "the curcor shouldnt go to that stand up line when hovering over somethign that gives you a tool tip"); :where keeps it weakest, so an explicit help cursor still wins; links, buttons, fields and everything inside them keep their own */ :where([data-tip],[data-tipside],.kwt,.card[data-kind],.relic[data-kind],.potion[data-kind],.power[data-kind]):not(:where(a,button,summary,label,input,textarea,select,[role=button],[contenteditable],a *,button *,summary *,label *)),:where([data-tip],[data-tipside],.kwt) :not(:where(a,button,summary,label,input,textarea,select,[role=button],[contenteditable],a *,button *,summary *,label *)){cursor:default} /* .hx: a label that looks like a heading but is not one (the side menu's group names, the footer's column names, the "Purchase today" block), so every page's outline is its own H1 and its own sections (SEO pass, 23 Sep 2026) */ h1,h2,h3,h4,.hx{font-family:var(--font-t);font-weight:700;margin:0;line-height:1.1;text-wrap:balance;letter-spacing:.005em} h1{font-family:var(--font-d);font-size:clamp(1.9rem,1.3rem + 1.6vw,2.4rem);color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px rgba(245,198,91,.15)} h2{font-size:1.7rem;color:var(--gold);margin:0 0 .5rem} h3{font-size:1.25rem;margin:1.3rem 0 .45rem;color:var(--gold-x)} h4{font-size:1rem;margin:0 0 .3rem;color:var(--muted)} p{margin:.35rem 0 .75rem} .lead{color:var(--muted);max-width:66ch;font-size:1.06rem} .dim{color:var(--dim)}.muted{color:var(--muted)}.num{color:var(--blue);font-weight:600}.kw{color:var(--gold);font-weight:600}.red{color:var(--red)} .up{color:var(--green);font-weight:700} :focus-visible{outline:3px solid #fff;outline-offset:2px} button{font-family:inherit}select,input,textarea{font-family:inherit;font-size:1rem} hr{border:0;border-top:2px solid rgba(255,255,255,.08);margin:1.2rem 0} code{font-family:'Source Code Pro',ui-monospace,monospace;background:rgba(0,0,0,.3);padding:0 .3em;border-radius:4px;font-size:.92em} .sr{position:absolute;left:-9999px} /* energy / star glyphs inside card text */ .energy,.energy-ico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em;margin:0 .06em;background:var(--energy-img,radial-gradient(circle at 35% 35%,#fff 0,#87CEEB 35%,#2f7fb8 70%,#173a55 100%));background-size:contain;background-repeat:no-repeat} .star{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:radial-gradient(circle,#ffe08a 0,#f5c65b 55%,transparent 60%)} /* ---------- background stage ---------- */ .bgstage{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)} /* the room art stays clearly visible: a light dim on the image and a vignette that only darkens the edges (the panels carry their own near-opaque backgrounds, so text never sits on bare art); the room stands still (no pointer parallax since 23 Sep 2026) */ /* wave 5 (Bean, 22 Sep 2026: "Lower all main page background opacities by 15% across the whole site"): brightness .8 -> .66. Measured on the export at 1900 px, same page, same room, the old filter forced back for the comparison (docs/wave5/scratch/shell/lumprobe.js): the rendered backdrop is 15 % darker where the vignette is light (the band beside a page's title) and 10 % in the corners, where the unchanged vignette scrim sets most of the light (.68 gave 13 % / 8 %). Done as brightness, not opacity, so a cross-fade never dips towards the page colour halfway. The rooms themselves are whole scenes now (app/rooms.js). The room stands still (Bean, 23 Sep 2026: "Please keep the background stagnant, it shouldnt move with the users mouse"). */ .bg-img{position:absolute;inset:-4%;background:center/cover no-repeat;filter:saturate(.95) brightness(.66);opacity:0;transition:opacity .5s ease;/* 1.2 s until 22 Sep 2026 (Bean: "Then fades the new background in later. The fading in feels pretty slow") */transform:scale(1.04)} .bg-img.on{opacity:1} .bg-prev{transition:none} /* the last page's room, standing under the new one while it fades in (core.js BG); it never fades itself, and BG empties it once the new room is opaque */ .bg-img.charroom{filter:saturate(.95) brightness(.33)} /* a character's own backdrop as the room: half the brightness of a room (Bean: "dim them by 50%"; was .4 of .8) */ .bg-img.dim2{filter:saturate(.95) brightness(.49)} /* Card Properties (Bean, 22 Sep 2026: "The background on this page specifically is too bright ... just double that feedback on this page"): the rendered backdrop 30 % darker beside the title, 20 % in the corners (measured like .66 above) */ .bgstage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 10%,rgba(12,22,27,.04) 0,rgba(12,22,27,.34) 55%,rgba(12,22,27,.66) 100%)} #motes{position:absolute;inset:0;width:100%;height:100%;opacity:.7} /* ---------- top bar: the run bar ---------- */ /* the bar's paint (gradient, dark rule, torn bottom edge) lives on ::before so the clip-path cannot clip the search dropdown, which is a descendant of the bar; the 13px bottom padding is the old 10px plus the 3px rule that moved onto the pseudo-element */ .topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--gap);min-height:var(--tb-h);padding:8px max(var(--gutter),env(safe-area-inset-right,0px)) 13px max(var(--gutter),env(safe-area-inset-left,0px));filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)) drop-shadow(0 12px 14px rgba(0,0,0,.5))} /* viewport-fit=cover: the side padding grows into a landscape notch. The bar is a layer above the room with a diffused drop shadow (Bean, 17 Sep 2026: "a real diffused drop shadow makes what's under it look like it's below"): a filter on the bar itself, because the plate's box-shadow dies at its clip-path and a blurred clipped copy of the plate showed only a sliver ("just a line"). drop-shadow follows the torn edge; a tight contact layer plus a wide soft one. */ .topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#233841,#182a31 70%,#132229);border-bottom:3px solid #0a1216;box-shadow:0 4px 14px rgba(0,0,0,.5);clip-path:polygon(0 0,100% 0,100% calc(100% - 4px),97% 100%,93% calc(100% - 5px),88% 100%,80% calc(100% - 4px),70% 100%,60% calc(100% - 6px),50% 100%,40% calc(100% - 4px),30% 100%,20% calc(100% - 5px),10% 100%,4% calc(100% - 4px),0 100%)} .brand{display:flex;align-items:center;gap:10px;flex:none;color:#fff} .brand:hover{text-decoration:none} .brand-box{width:44px;height:44px;border-radius:9px;background:linear-gradient(#3a5563,#1c2f37);border:2px solid #4a6a78;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 3px 0 #0a1216;display:grid;place-items:center;overflow:hidden} .brand-icon{width:40px;height:40px;object-fit:contain} .brand-word{font-family:var(--font-t);font-size:1.35rem;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.6)} .brand-word b{color:var(--gold)}.brand-word i{font-style:normal;color:var(--teal);font-size:.8em;margin-left:.2em;letter-spacing:.06em} .search{position:relative;flex:1;max-width:620px;margin:0 auto} .search input{width:100%;padding:9px 14px 8px 40px;border-radius:9px;border:2px solid #0a1216;background:#0f1c22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa1' stroke-width='2.4'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") 12px center/18px no-repeat;color:#fff;font-size:1rem;box-shadow:inset 0 3px 0 rgba(0,0,0,.4)} .search input::placeholder{color:var(--dim)} .search input:focus{border-color:var(--teal);outline:0;box-shadow:inset 0 3px 0 rgba(0,0,0,.4),0 0 0 3px rgba(63,216,207,.2)} .sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:2px solid var(--line-l);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.6);overflow:hidden;z-index:70} .sugg a{display:flex;align-items:center;gap:10px;padding:7px 12px;color:#fff;border-top:1px solid rgba(255,255,255,.06)} .sugg a:first-child{border-top:0}.sugg a:hover,.sugg a.sel{background:var(--panel-l);text-decoration:none} .sugg .k{font-size:.78rem;color:var(--dim);margin-left:auto;text-transform:uppercase;letter-spacing:.08em} .sugg .sw{width:12px;height:16px;border-radius:3px;flex:none} .sugg img{width:28px;height:28px;object-fit:contain} .tb-right{display:flex;gap:8px;flex:none} .tb-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 12px;font-family:var(--font-t);font-size:.98rem;cursor:pointer} /* the plate look (sprite, states, the gold .daily) is in app/buttons.css */ .tb-btn.ico{padding:7px 10px;min-width:40px;justify-content:center} .tb-btn[aria-pressed="false"] .tb-ico.sound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23fff'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6'/%3E%3C/svg%3E")} .tb-ico{width:18px;height:18px;display:inline-block;background:center/contain no-repeat} .tb-ico.map{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5c65b'%3E%3Cpath d='M4 3h13l3 3v15H4z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke='%23231500' stroke-width='1.6'/%3E%3C/svg%3E")} .tb-ico.sound{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z' fill='%23fff'/%3E%3Cpath d='M16 8a5 5 0 0 1 0 8M19 5a9 9 0 0 1 0 14'/%3E%3C/svg%3E")} .navtog{display:none} /* ---------- layout ---------- */ /* the rail docks at the left edge at every desktop width; the content column fills the rest up to --content-max and is centred in that space, so nothing floats in the middle of a wide screen and the footer lines up under the content */ .layout{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--safe);padding:1.2rem max(var(--safe),env(safe-area-inset-right,0px)) 2rem max(var(--gutter),env(safe-area-inset-left,0px))} .main{min-width:0;width:100%;max-width:min(var(--content-max),calc(100% - (var(--rail-w-open) - var(--rail-w))));margin:0 auto} /* THE SAFE SPACE IS DOUBLE AND THE BARRIER IS TIGHTER (Bean, 21 Sep 2026: "Double the current safe space on left and right please. on larger monitors the content spans out too wide"): the content's distance to the rail (the layout's gap) and to the window's right edge (the layout's right padding) are both --safe = 2 x --gutter (they were one --gutter: about 26 px at a 1,640 px window, now 53), and --content-max went from 80rem to 70rem, so on a 1,920 px screen the column is about 1,265 px with about 190 px on each side (it was 1,445 with 101). The two stay EQUAL (his 19 Sep rule below), the rail keeps its own --gutter to the window's left edge, the top bar is untouched, and the single-column layout under 981 px keeps one --gutter (a phone has no room to give). Never set one of the two without the other. THE CONTENT 20 PX FURTHER IN ON EACH SIDE ON BIG WINDOWS (Bean, 23 Sep 2026: "left and right safe space max is still a little much, can we bring it in by 20px on the right and left please"; after the lead had read it backwards and WIDENED the content: "the site content area is still too wide and feels overwhelming"; then, looking at his ~1,000 px preview pane with the rail open (content 715 px): "Its so thin"). So only the cap moves: --content-max is 70rem - 40 px, the content 40 px narrower than on 21 Sep wherever the cap holds (from about 1,500 px; 1,920 px: 186 -> 206 a side). --safe, the space on windows below the cap, stays 2 x --gutter: a small window must not get thinner. ANOTHER 20 PX A SIDE, AT EVERY WIDTH (Bean, 23 Sep 2026: "another 20 px on each side please, site content still spans too wide"): --content-max 70rem - 80 px and --safe 2 x --gutter + 20 px, so big windows and small ones both lose 40 px of content width (under 981 px nothing changes). Then "another 40 px on each side please": --content-max 70rem - 160 px, --safe 2 x --gutter + 60 px. ONLY THE CAP (Bean, 23 Sep 2026, a ~1,000 px window with the rail closed: "All the safe space changes I made were to only effect a max width for the page content, like a literaly max width for people with full big monitors. To be clear the current max safe space is good, but it shouldnt effect these smaller screens like this."): --safe is back to 2 x --gutter, --content-max stays 70rem - 160 px. A window below the cap (under about 1,450 px) looks as it did before 23 Sep; a capped window is unchanged (the column's centre does not depend on --safe). Side-space notes move the CAP, never --safe. the width barrier and the centring (Bean, 18 Sep 2026: with the rail collapsed or on a large monitor the content must not "go fully wide" and must "center from the left and right side instead of hugging edges"): .main and the footer stop at --content-max (80rem) and sit centred in their column. THE SAFE SPACE (Bean, 19 Sep 2026: "the content should be in equal distance from the left side nav and the right edge of the page"): the column runs from the rail to the window's right edge, its gap to the rail is the layout's right padding (both --gutter), and .main is centred in it, so the space between the rail and the content ALWAYS equals the space between the content and the right edge, rail open or closed, at every width. The layout takes NO extra right padding: the 18 Sep rules that centred the column on the WINDOW (a right padding of the rail's width, with the rail closed and from 1900 px) left 29 px beside the rail and 302 px at the right edge on a 1920 px window, which is what this note rejects. Never pad one side of .layout without the other. (The footer band below is full width and centres on the window on its own.) CLOSING THE RAIL NEVER WIDENS THE CONTENT (Bean, same day, with two screenshots of a site whose side panel closes: "this isnt a reference for how much safe space we need, instead how it should function", then "The site also still isn't having safe space between the left nav it is set to extend to it when you close it"): .main's cap is also the width it has with the rail OPEN, 100% of its column minus what the rail gave back (--rail-w-open - --rail-w: 0 when open, 13.5rem - 68px when closed). So on close the content keeps its width and re-centres: the freed room becomes equal safe space on both sides (1335 px window: 22 / 22 open, 96 / 96 closed, the content 1056 px in both). --rail-w-open must stay equal to --rail-w's default. */ .page{animation:pagein .28s ease-out} @keyframes pagein{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} /* the footer (18 Sep 2026, Bean: "a proper footer ... professional clean", contact hello@sts.wiki; then "its own section farther down and darker. It needs a background color", structured like a big site's footer): a full-width darker band under the whole layout (rail included), well below the last content, holding two rounded panels (brand + tagline; the rights line), four link columns and a bottom bar with the version badge and the contact address. Static HTML in shell.html (ssr.js copies the