/* ========================================================================= The Latin Malaise — site theme THE CONSOLE (2026-09-04, user picked it from three mockups): the site now sits in the WEBCLIENT'S OWN FRAME — its titlebar with the crest and the nav as tabs, the live panes down the left, the reading on the terminal's vellum well, the footer in the input bar's slot — and wears the client's BONE ink policy: no metal anywhere in the chrome. Every brass role (--gold, --gold-soft, --gold-dim, --link, --ornament) was swept to --ink / --muted / --bevel-light / --exit-ink, exactly the substitutions the client's DRESS: BONE block makes; a control in its ON state is --exit-ink on the --bar slab like a lit exit tile, and the one primary button is a pale stone (--exit-ink ground, --desk lettering). The :root palette is still the client's, untouched. The plate, the masthead plaque, the corner brackets, the lozenges and the lily are gone. "Crypt", the same vocabulary as the webclient (ul_webclient.css), so the site and the game look like one thing. Read that sheet before changing this one; the two share a palette and a set of materials. THE RULES OF THIS SHEET (they are what keep it from looking modern): 1. No blur. Every shadow has a 0 blur radius; glows are banned. 2. No smooth gradients. Shading is done in 2-4 HARD stops, so it bands like a 256-colour render. Dither does the rest. 3. Hard 1px bevels — a light top/left, a dark bottom/right. Pressed things flip them; sunken things (inputs) invert them. 4. Flat fills over tiled patterns. No border-radius, anywhere. 5. Text shadows are a single solid black pixel of offset. And one more, learned from the webclient: 6. Dither is for CHROME, never for a reading surface. Plaques, slabs, buttons and the wall carry the pattern; anything with a paragraph on it is a flat fill. Everything is CSS/SVG — no art files to ship, cache or lose. Re-skin the whole site from the :root block below. ========================================================================= */ /* Same three roles as the webclient — keep the two lists in step. */ /* ONE WEBFONT (user, 2026-09-04): "everything in Georgia", and then the game's headline alone got its old face back. Cormorant Unicase is loaded for --font-title, which the masthead name and the lore pages' illuminated initial share (the same hand, on purpose); Alegreya SC and Courier Prime are gone from the site. The webclient did the same. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600;700&display=swap'); :root { /* OVERRIDDEN BY THE CRYPT BLOCK AT THE FOOT OF THIS SHEET (2026-09-12): the surface tokens below are the crest-tuned wine set, kept for the record; the values that actually paint the site are in that block, which restates them as the CLIENT'S grey stone and turns the slab, dither and grain tokens into the client's pixel tiles. */ /* ---- Crypt palette (flat, limited, 256-colour-ish) ---------------- */ /* CREST-TUNED (2026-09-07, user accepted the sampler/proposal.html mock, minus the cross on the wall tile): the darks went wine-black, the reds oxblood with a rust lit, the gold to olive gilt -- the artist's crest measured 35%% oxblood, 30%% wine-black, 16%% gilt, 7%% purple and NO grey, and the old cool grey stone sat against it. Same lightness as before throughout; only the hue moved. The one purple is the masthead band. */ /* THE WALL WENT BACK TO GREY (2026-09-07, user: "the same grey/dark from the previous rendition"): --desk and the wall tile's three inks are the old neutral black again; the boxes, bars and wells stay wine. */ --desk: #040405; /* the wall behind the page */ --paper: #0e0809; /* the page well */ --box: #1a1214; /* boxes, cards, reading surfaces */ --bar: #231719; /* title bars, plaques */ --bevel-light: #4b3639; /* the lit pixel edge */ --bevel-dark: #030102; /* the shadowed pixel edge */ --ink: #ded6ca; /* bone-white body text */ --muted: #918b81; /* secondary text */ /* brass — engraved lettering, ornament, links */ --gold: #c8a33b; --gold-soft: #e6cf8c; --gold-dim: #6c581c; /* dramatic light sources */ --torch: #c45530; --moon: #395e74; /* blood — rubrics, initials, seals, warnings */ --blood: #7e1c13; --blood-lit: #b0432b; --blood-deep: #4c0b0d; --steel: #93a9b5; --green: #678f79; --link: #d8bd76; --link-visited:#b39c8a; /* titles and illuminated initials only — kept off anything you have to read at length. Same three as the webclient; change them together. */ /* ONE FACE (user, 2026-09-04): every role is Georgia. The roles are kept as variables so a face can be split back out later, but they all resolve to the same thing now; weight and size do the work. */ --font-title: "Cormorant Unicase", Georgia, serif; /* THE HEADLINE ONLY (restored, user's call) */ --font-display: Georgia, "Times New Roman", serif; /* figures */ --font-head: Georgia, "Times New Roman", serif; /* plaques */ --font-body: Georgia, "Times New Roman", serif; /* reading */ /* the same typewriter the game terminal uses — the site's figures and the client's output should not be two different machines */ --font-mono: Georgia, "Times New Roman", serif; /* was the terminal's typewriter; Georgia too now (user: everything) */ /* --- tiled surfaces ------------------------------------------------ */ /* mortared stone, two courses in running bond, drawn crisp so it stays pixel-hard at any zoom. Same tile as the webclient. */ --wall-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect width='40' height='40' fill='%23040405'/%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='%23111112' stroke-width='1'/%3E%3Cg fill='%23161717'%3E%3Crect x='19' y='16' width='2' height='2'/%3E%3Crect x='19' y='22' width='2' height='2'/%3E%3Crect x='16' y='19' width='2' height='2'/%3E%3Crect x='22' y='19' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"); /* 4x4 ordered dither — the 256-colour shimmer, kept at 1:1 pixels */ --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.20'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); /* a coarse 2x2 dither for darker surfaces */ --dither-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000' fill-opacity='0.16'/%3E%3C/svg%3E"); /* a stone slab, shaded in three flat bands */ --slab: linear-gradient(180deg, #33272a 0 32%, #28201f 32% 66%, #1e1717 66% 100%); --slab-lit: linear-gradient(180deg, #403235 0 32%, #352a2b 32% 66%, #2a2222 66% 100%); /* the same slab cut in brass, for the one or two things that must shout */ --brass: linear-gradient(180deg, #957d30 0 32%, #836d29 32% 66%, #716023 66% 100%); --brass-lit:linear-gradient(180deg, #ab9040 0 32%, #998038 32% 66%, #877232 66% 100%); /* ---- promoted from hardcoded literals (2026-08-07) ---------------- These were spread through the sheet as raw hex and every one of them had to be re-picked by hand whenever the palette moved. They are variables now so a scheme change is this block and nothing else. The palette ABOVE is identical to the webclient's and must stay that way -- the two are one identity. These three are not: they are the surfaces this sheet happens to share with the client, and the client carries several more (die inks, track marks, the ambient ink) that nothing on the website draws. */ --term: #140d0e; /* sunken wells: inputs, the plan, blinkies */ --bar-deep: #1c1214; /* the darker plaque: banner, table headers */ --card: #170f11; /* epigraph and footer ground */ /* THE CONSOLE (2026-09-04): four more of the client's, ported verbatim from ul_webclient.css so the frame is drawn from the same values. */ --frame-ring: #31252a; /* the panel outline */ --pose-rule: #423034; /* a hairline on the page */ --exit-ink: #d2c9ba; /* a lit control's lettering */ --fig-ink: #ece9e3; /* hover lettering */ --fig-cap: #b9b3a8; /* the terminal's 26px flecked skin, and the input's 6px grain */ --vellum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' shape-rendering='crispEdges'%3E%3Cg fill='%23fff4dc' fill-opacity='0.055'%3E%3Crect x='8' y='21' width='4' height='1'/%3E%3Crect x='4' y='12' width='4' height='1'/%3E%3Crect x='11' y='15' width='3' height='1'/%3E%3Crect x='20' y='25' width='2' height='1'/%3E%3Crect x='14' y='22' width='1' height='1'/%3E%3Crect x='19' y='7' width='1' height='1'/%3E%3Crect x='21' y='19' width='2' height='1'/%3E%3Crect x='4' y='14' width='1' height='1'/%3E%3Crect x='11' y='5' width='1' height='1'/%3E%3Crect x='6' y='1' width='2' height='1'/%3E%3Crect x='2' y='16' width='1' height='1'/%3E%3Crect x='21' y='10' width='1' height='1'/%3E%3Crect x='25' y='2' width='2' height='1'/%3E%3Crect x='21' y='16' width='1' height='1'/%3E%3Crect x='3' y='21' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.085'%3E%3Crect x='13' y='4' width='1' height='1'/%3E%3Crect x='17' y='10' width='1' height='1'/%3E%3Crect x='19' y='17' width='1' height='1'/%3E%3Crect x='5' y='22' width='1' height='1'/%3E%3Crect x='5' y='16' width='1' height='1'/%3E%3Crect x='2' y='12' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='0.024'%3E%3Crect x='1' y='0' width='1' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='5' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='3' y='4' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.13'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='5' y='0' width='1' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='3' width='1' height='1'/%3E%3Crect x='5' y='4' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='4' y='5' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); /* The wall's own dither, PORTED VERBATIM from ul_webclient.css so the site and the client share one backdrop. Louder than --dither (white 0.08 against 0.045) because it sits under a vignette that eats most of it; the chrome must NOT get louder with it, which is why the two are separate variables in both sheets. A --vellum / --vellum-wall pair lived here for a few hours on 2026-08-17. They were the client's TERMINAL skin, which is a page, not a wall -- the wrong thing to hang a backdrop on. Gone. */ --dither-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.20'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); /* the three roles --gold used to do alone */ --ornament: #c8a33b; --rule: #e52838; --sys: #c8a33b; } * { box-sizing: border-box; } /* ========================================================================= The wall, the light, the grime ========================================================================= */ body { margin: 0; background-color: var(--desk); /* no directional light -- see the note in ul_webclient.css */ /* THE BACKDROP IS THE CLIENT'S (settled 2026-08-17). The site now hangs the same mortared-stone wall the webclient does, at the same 40px, so stepping from the site into the game does not change the room. The two false starts, so neither is repeated: the stone was dropped for a flecked skin, and the skin was the TERMINAL's texture -- a page surface, borrowed for a wall. The lattice is the backdrop; the fleck is what a page is made of. They are not interchangeable. Nothing is layered over it. One tile, one wall. */ background-image: var(--wall-tile); background-size: 40px 40px; background-attachment: fixed; background-repeat: repeat; color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.62; /* The custom quill cursor was removed 2026-08-17: it did not look good in practice. Nothing replaces it -- the pointer is the operating system's, which is what a reader expects. */ } /* dither + a stepped vignette over the wall — under the page, never over text. This is the layer that makes the room feel lit by one flame. */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; /* Softened to the CLIENT'S OWN STEPS (2026-08-17). It used to run 0.26 / 0.52 / 0.76 from 50% out, which took the edges to effectively black and was half the reason the surround read as a void — any texture on the wall died before it reached the corner. These are the values in ul_webclient.css, so the two now darken alike, which is the point of the sheets sharing a vocabulary at all. */ background-image: radial-gradient(ellipse 86% 82% at 50% 46%, transparent 0 58%, rgba(0, 0, 0, 0.14) 58% 74%, rgba(0, 0, 0, 0.30) 74% 88%, rgba(0, 0, 0, 0.46) 88% 100%), var(--dither-wall); background-size: cover, 4px 4px; image-rendering: pixelated; } /* ========================================================================= The backdrop — the city and the moon (2026-09-04) Feedback said the site was "bleak": one 40px lattice under a vignette, the same on every page. The user picked this from three mocks. The markup is website/_skyline.html; everything here is position: fixed at z-index 0, so it sits over the wall, under the vignette (body::after, z 1) and under the frame (z 2), and never under text. THE ONE DIRECTIONAL LIGHT ON THE SITE. The note on body above still holds for lights with no source: this one has a moon in the sky, high right, and the light comes from where it is. Three hard steps, no blur, like the vignette it sits under. ========================================================================= */ .ul-stars { /* THE WHOLE SKY (2026-09-07). The stars used to live inside .ul-sky and so sat in its bottom band, just over the roofs -- "way too low" (user). This layer covers the window and its viewBox is anchored to the top (xMidYMin slice), so the stars hang up where the moon is and thin toward the city. The skyline is drawn after it and paints over whatever reaches its band; the masthead and the boxes hide the rest, which leaves the stars in the margins beside the frame, as the moon is. */ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .ul-sky { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; z-index: 0; pointer-events: none; } .ul-moon { position: fixed; z-index: 0; pointer-events: none; /* IN THE RIGHT-HAND MARGIN, just under the band: the masthead is an opaque plaque at z 4, so a moon in the top of the sky would be behind it (it was, in the mock). It hangs beside the frame's first box instead, and only where the wall shows enough of itself for a moon to fit -- below 1500px it is hidden and the moonlight alone says where the light comes from. */ /* below the band's foot (about 132px) with the faint outer ring of halo allowed to touch it; 250 cleared it entirely and the user wanted it 40px higher */ top: 210px; right: calc((100vw - 1240px) / 2 - 124px); /* 40px further right (user) */ width: 56px; height: 56px; border-radius: 50%; /* the one round thing on the site: it is the moon */ /* the disc, its seas and craters are the SVG inside (website/_skyline.html); the div only carries the halo */ background: transparent; box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.035), 0 0 0 56px rgba(255, 255, 255, 0.02), 0 0 0 110px rgba(255, 255, 255, 0.012); } .ul-moon svg { display: block; width: 100%; height: 100%; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(ellipse 70% 45% at 62% -6%, rgba(190, 200, 210, 0.075) 0 30%, rgba(190, 200, 210, 0.04) 30% 60%, rgba(190, 200, 210, 0.018) 60% 85%, transparent 85%); } @media (max-width: 1500px) { .ul-moon { display: none; } } /* ========================================================================= The frame — the client's own (THE CONSOLE, 2026-09-04) The 1060px plate, its four brass corners, the carved masthead and the rail under it are gone. The page is laid out like the webclient: a titlebar across the top, the live panes in a 250px column, the reading in a sunken well beside them, a bar along the bottom. Same gaps, same padding, same --frame-ring outline as ul_webclient.css. ========================================================================= */ .ul-frame { position: relative; z-index: 2; display: grid; /* ONE COLUMN OF WIDE BOXES (user, 2026-09-04, third pass: "wider and bigger", the Song of Avaria format). The side column is gone; the three live panes are a row of boxes under the page instead. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "main" "panes" "foot"; gap: 20px; /* A PAGE, NOT A WINDOW (user, 2026-09-04, second pass): the client fills the viewport because it is an app; a website is a document on the wall. So the frame is capped and centred, the way the old plate was, and the stone shows either side. */ max-width: 1240px; margin: 28px auto 44px; padding: 0 12px; } /* THE MASTHEAD IS A BAND ACROSS THE WHOLE SCREEN (fourth pass, user, 2026-09-04), the nav strip joined onto its foot — one piece of carved stone, edge to edge, above a frame of boxes that float on the wall. The contents of both rows are held to the frame's 1240px by .ul-mast-inner. It sits OUTSIDE .ul-frame in base.html. */ .ul-mast { position: relative; /* ABOVE the frame (which is z-index 2): the account menu drops out of this band over the page's first box, and at equal z-index the later sibling -- the frame -- covered it (user, 2026-09-04). */ z-index: 4; background-color: var(--bar-deep); /* THE ONE PURPLE ON THE SITE (2026-09-07): the band's slab is wine-purple, the crest's imperial note, and nothing else is. */ background-image: var(--dither), linear-gradient(180deg, #35262f 0 32%, #2a1e26 32% 66%, #20161c 66% 100%); background-size: 4px 4px, auto; border-bottom: 1px solid var(--bevel-dark); box-shadow: none; image-rendering: pixelated; } .ul-mast-inner { max-width: 1240px; margin: 0 auto; padding: 0 12px; } .ul-titlebar { display: flex; align-items: center; gap: 0.8rem; padding-top: 0.55rem; padding-bottom: 0.5rem; } /* sized to the title block beside it: name, rule and tagline (user, 2026-09-04) */ /* THE ARTIST'S CREST (2026-09-07): a square PNG with transparent corners (website/images/crest.png) in place of the drawn sprite, so the box is square now. It is a painting, so it takes NO pixelated rendering. */ /* 72px (user, 2026-09-07: "a bit bigger"; it was 58). The file is 100px, so it is still shown under its own size. */ .ul-crest { flex: 0 0 auto; width: 72px; height: 72px; } .ul-crest img { width: 100%; height: 100%; display: block; object-fit: contain; } .ul-title-block { display: flex; flex-direction: column; min-width: 0; } /* the first half of the name, ABOVE the title (2026-09-29): see the note in base.html. It used to be a tagline under it. */ .ul-tagline { font-family: var(--font-head); font-size: 0.92rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.3rem; } .ul-title-link, .ul-title-link:hover { text-decoration: none; } .ul-title { font-family: var(--font-title); font-size: 2.6rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; color: var(--ink); /* A RUBRIC RULE UNDER THE NAME (user, 2026-09-04, fifth of five ideas; the red tagline, the rose tint, the banded lettering and the red initial were each tried and not liked): the same dark-red line the plaques and the band's foot wear, the width of the name, between it and the tagline. Inline-block so the rule is the name's width. */ display: inline-block; padding-bottom: 0.18rem; border-bottom: 2px solid var(--blood-deep); } .ul-title-link:hover .ul-title { color: var(--fig-ink); border-bottom-color: var(--blood); } /* the nav strip: the foot of the masthead band. A darker course of the same stone, ruled off from the title row above it, running the full width; the tabs inside are held to the frame's width. */ .ul-navstrip { background-color: var(--bar); background-image: var(--dither); background-size: 4px 4px; border-top: 1px solid var(--bevel-dark); /* THE RUBRIC LINES (user, 2026-09-04: "more blood underlines, tastefully"): a 2px line of --blood-deep along the foot of the band, and the same under every plaque. Dark red for the long lines; the bright --blood is kept for the short ones (the page you are on, the Crier's caption, a link under the pointer). */ box-shadow: inset 0 -2px 0 var(--blood-deep); image-rendering: pixelated; } .ul-navstrip .ul-mast-inner { display: flex; align-items: center; gap: 6px; padding-top: 4px; padding-bottom: 4px; } .ul-rail-nav { display: flex; gap: 4px; flex: 0 0 auto; } .ul-rail-nav li { margin: 0; } .ul-rail-gap { flex: 1 1 auto; } /* ---- nav: the client's tab strip ----------------------------------- A slab for every page, and the page you are on is a LIT EXIT TILE — the --bar ground, the --bevel-light ring, --exit-ink lettering — because in the client that is what "you can go here / you are here" looks like. (Restored 2026-09-04: the third pass's cut took this block with it.) */ .ul-navlist { list-style: none; margin: 0; padding: 0; } .ul-navlist li { margin: 0; } .ul-navlist a { display: block; padding: 0.22rem 1.1rem; font-family: var(--font-head); font-size: 0.96rem; line-height: 1.3; color: var(--ink); text-decoration: none; background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); box-shadow: none; image-rendering: pixelated; } .ul-navlist a:hover { background-image: var(--dither), var(--slab-lit); color: var(--fig-ink); text-decoration: none; } .ul-navlist a:active, .ul-navlist a.is-here { background-image: none; background-color: var(--bar); color: var(--exit-ink); } /* the one accent on the site the client does not carry: a rubric line under the page you are on. Blood, never brass. */ .ul-navlist a.is-here { border-bottom: 2px solid var(--blood); } .ul-muted { color: var(--muted); } /* an outside link (the Discord invite, in the account menu and the footer): a small mark after the word so it is known to leave the site */ .ul-ext::after { content: "\00a0\2197"; color: var(--muted); font-size: 0.8em; } /* ---- the account menu ------------------------------------------------ "Logged in as X" is the handle of a
menu (2026-09-04): OOC Notes, Petitions, Change Password, Log Out. The roster's row menu with the greeting for a handle; the panel is out of the flow. */ .ul-you { position: relative; } .ul-you-handle { display: flex; align-items: center; gap: 0.45rem; list-style: none; cursor: pointer; padding: 0.16rem 0.6rem; border: 1px solid transparent; white-space: nowrap; } .ul-you-handle::-webkit-details-marker { display: none; } .ul-you-handle:hover, .ul-you[open] > .ul-you-handle { background-color: var(--bar); border-color: var(--bevel-dark); box-shadow: none; } .ul-you-handle .ul-rail-greet strong { color: var(--ink); } .ul-you[open] > .ul-you-handle .ul-rail-greet strong, .ul-you-handle:hover .ul-rail-greet strong { color: var(--fig-ink); } .ul-you-caret { color: var(--muted); font-size: 0.8rem; } /* the count of what is waiting under OOC Notes: the one bright red figure in the chrome, because it is a summons */ .ul-you-badge, .ul-you-count { display: inline-block; min-width: 1.35em; padding: 0 0.35em; font-family: var(--font-mono); font-weight: bold; font-size: 0.72rem; line-height: 1.45; text-align: center; color: #fff; background: var(--blood); border: 1px solid #000; } .ul-you-count { margin-left: 0.4em; } .ul-you-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 13rem; padding: 0.3rem; text-align: left; background: var(--box); border: 1px solid var(--bevel-dark); box-shadow: none; } .ul-you-menu form { margin: 0; } .ul-you-item { display: block; width: 100%; padding: 0.32rem 0.7rem; font-family: var(--font-head); font-size: 0.95rem; text-align: left; white-space: nowrap; color: var(--ink); text-decoration: none; background: none; background-image: none; border: 0; box-shadow: none; cursor: pointer; } .ul-you-item:hover, .ul-you-item:focus-visible { color: var(--fig-ink); background: var(--bar); text-decoration: none; box-shadow: inset 2px 0 0 var(--blood); } /* ---- the Admin menu (staff, 2026-10-02) -------------------------------- A nav tab that opens a menu (website/_rail.html): the tab's own slab for a handle, lit like the page you are on while open, and the account menu's panel under it, hung from the tab's LEFT edge. The menu sits inside `.ul-navlist`, whose `a` rule would dress every item as a tab, so the item rules are re-stated one class stronger. */ .ul-navmenu { position: relative; } .ul-navmenu-handle { display: flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; padding: 0.22rem 1.1rem; font-family: var(--font-head); font-size: 0.96rem; line-height: 1.3; white-space: nowrap; color: var(--ink); background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); image-rendering: pixelated; } .ul-navmenu-handle::-webkit-details-marker { display: none; } .ul-navmenu-handle:hover { background-image: var(--dither), var(--slab-lit); color: var(--fig-ink); } .ul-navmenu[open] > .ul-navmenu-handle, .ul-navmenu-handle.is-here { background-image: none; background-color: var(--bar); color: var(--exit-ink); } .ul-navmenu-handle.is-here { border-bottom: 2px solid var(--blood); } .ul-navmenu-menu { left: 0; right: auto; } .ul-navmenu .ul-you-item { padding: 0.32rem 0.7rem; font-size: 0.95rem; color: var(--ink); background: none; border: 0; } .ul-navmenu .ul-you-item:hover, .ul-navmenu .ul-you-item:focus-visible, .ul-navmenu .ul-you-item:active { color: var(--fig-ink); background: var(--bar); box-shadow: inset 2px 0 0 var(--blood); } /* ---- an application, read by staff (2026-10-02) ------------------------ website/application_detail.html. The sheet itself is drawn in the builder's own columns and beads (chargen.css); these are only the pieces around it. */ .ul-app-sub { display: table; /* the rule runs under the word alone */ margin: 1.3rem 0 0.55rem; padding-bottom: 0.15rem; font-family: var(--font-head); font-size: 1.1rem; font-weight: normal; color: var(--ink); border-bottom: 2px solid var(--blood-deep); text-shadow: none; } .ul-app-sub-first { margin-top: 0; } .ul-app-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1.1rem; margin: 0.9rem 0 0; } .ul-app-facts dt { font-family: var(--font-head); font-weight: normal; color: var(--muted); } .ul-app-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } /* typed in a textarea: the line breaks are the player's own */ .ul-app-prose { white-space: pre-wrap; overflow-wrap: break-word; color: var(--ink); } .ul-app-qa + .ul-app-qa { margin-top: 0.9rem; } .ul-app-q { font-style: italic; color: var(--muted); margin-bottom: 0.2rem; } .ul-app-nil .ul-cg-trait-name { color: var(--muted); } .ul-app-path { padding-left: 0.9rem; } .ul-app-none { margin: 0.2rem 0 0; font-size: 0.9rem; } .ul-app-mf { padding: 0.15rem 0; } .ul-app-pools { margin-top: 0.7rem; } .ul-app-history { margin: 0.4rem 0 0; } .ul-app-when { white-space: nowrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); } .ul-app-decide textarea { width: 100%; resize: vertical; } @media (max-width: 600px) { .ul-app-facts { grid-template-columns: 1fr; gap: 0.1rem; } .ul-app-facts dt { margin-top: 0.45rem; } } /* a player's own reply in a petition thread, and the box to write one */ .ul-pet-reply.is-player { border-left-color: var(--bevel-light); background: var(--card); } .ul-pet-replyform { margin: 0.6rem 0 0 0.9rem; } .ul-pet-replyform textarea { width: 100%; resize: vertical; } .ul-pet-replyform .ul-form-actions { margin-top: 0.4rem; } .ul-pet.is-new { box-shadow: inset 3px 0 0 var(--blood); } .ul-rail-you { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 12px; font-size: 0.9rem; } .ul-rail-you form { margin: 0; } .ul-rail-greet { font-family: var(--font-head); color: var(--muted); white-space: nowrap; } .ul-rail-greet strong { font-weight: normal; color: var(--ink); } /* ---- rank badges -------------------------------------------------------- One badge, the account's highest rank. The FORM is identical for all four — bracketed, in the typewriter the game's own figures use — so the badge reads as a badge. TWO COLOURS, NOT FOUR (user's call, 2026-08-17): all three STAFF ranks share one red, and Helper is blue. The badge answers "is this staff?" first and "which rank?" second, and the word in the brackets already says the rank — so the colour carries the one bit the word cannot say at a glance. The three staff classes are listed separately below rather than merged so they can be split apart again in one edit. Helper is --steel, NOT --moon: --moon (#395e74) is the palette's true blue but comes out at about 2.2:1 on this slab, which is unreadable at badge size. --steel is the blue that survives the dark ground (~6.2:1). Both are already in the shared palette, so nothing new was invented — and nothing may be, in that block: it is identical to the webclient's on purpose and the two are one identity. */ .ul-rail-rank { margin-right: 0.3rem; font-family: var(--font-mono); font-weight: bold; font-size: 0.82rem; letter-spacing: 0.06em; text-shadow: none; } .ul-rank-helper { color: var(--steel); } /* --blood-lit, not --blood: the darker red is a rubric colour meant for a page, and this sits on the slab, which is nearly as dark. */ .ul-rank-builder, .ul-rank-admin, .ul-rank-developer { color: var(--blood-lit); } /* text links, not slabs — the nav owns the slab, and two rows of them in one bar would read as two navs */ .ul-rail-you a { color: var(--exit-ink); text-decoration: none; white-space: nowrap; } .ul-rail-you a:hover { color: var(--fig-ink); text-decoration: underline; } .ul-rail-you .ul-btn { padding: 0.16rem 0.8rem; font-size: 0.9rem; } .ul-rail-login { display: flex; align-items: center; gap: 5px; } /* the client's input field, cut down to sit in the titlebar */ .ul-rail-login input { width: 118px; padding: 0.16rem 0.45rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); background-color: var(--term); background-image: var(--grain); background-size: 6px 6px; border: 1px solid var(--bevel-dark); border-radius: 0; box-shadow: none; } .ul-rail-login input:focus { outline: none; border-color: var(--bevel-light); } .ul-rail-login input::placeholder { color: var(--muted); opacity: 1; } /* ========================================================================= The two columns: the panes, and the well ========================================================================= */ /* the state column — the client's sidebar, at the client's width */ /* the three live panes, as a row of boxes under the page */ .ul-panes { grid-area: panes; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; min-width: 0; } /* THE PANES ARE THE HOMEPAGE'S ALONE (user, 2026-09-28). A page without them must not keep their empty row: with the three-row template it would carry two gaps between main and foot instead of one. */ .ul-frame:not(:has(> .ul-panes)) { grid-template-rows: auto; grid-template-areas: "main"; } /* the page is a stack of boxes on the wall — no outer well any more */ .ul-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .ul-main .row { margin-left: 0; margin-right: 0; } /* a reading measure for prose; forms, rosters and tables take the width */ /* no reading measure: the boxes run the width of the frame, and so does the text in them (user's call, third pass) */ .ul-main p { margin-bottom: 1.1rem; } /* NO INITIAL ON THE HERO (user, 2026-09-04): the two-line drop cap never sat right in the box and was dropped. The lead's size and leading stay pinned so the paragraph does not change when Bootstrap's .lead does. */ .ul-hero > p.lead { font-size: 1.08rem; line-height: 1.62; } /* ========================================================================= Boxes: a pane in the column, a plated section in the well ========================================================================= */ /* every box on the site is one of the client's panes: the pane ground, the bevel, the ring */ .ul-main .ul-box, .ul-main .card, .ul-panes .ul-box, .ul-panes .card { background: var(--box); border: 1px solid var(--bevel-dark); border-radius: 0; /* the ring, and the plate's old hard shadow so the box lifts off the stone — no blur, the way every shadow on the site is cut */ box-shadow: none; margin: 0; } /* the pane plaque, exactly as the Bone dress draws it: two rivets in --bevel-light, bone lettering, no lozenges */ .ul-box-title, .card-header, .ul-plaque { background-color: var(--bar); background-image: radial-gradient(circle at 9px 50%, var(--bevel-light) 0 2px, transparent 2px), radial-gradient(circle at calc(100% - 9px) 50%, var(--bevel-light) 0 2px, transparent 2px), var(--dither), var(--slab); background-size: auto, auto, 4px 4px, auto; color: var(--ink); font-family: var(--font-head); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em; text-align: center; padding: 0.4rem 1.4rem; border: 0; border-radius: 0; border-bottom: 1px solid var(--bevel-dark); box-shadow: none; text-shadow: none; image-rendering: pixelated; } .ul-box-title::before, .ul-box-title::after, .card-header::before, .card-header::after { content: none; } .ul-box-body { padding: 0.75rem 0.8rem; font-size: 0.97rem; } /* THE BIG PLAQUE (third pass): a box's title is a tall riveted band in the title face, centred, the way Song of Avaria heads its cards — the same plaque as before, drawn larger. The page's boxes get the 2rem band, the panes' the 1.5rem one. */ .ul-main .ul-box-title, .ul-main .card-header, .ul-panes .ul-box-title, .ul-panes .card-header { background-image: radial-gradient(circle at 11px 50%, var(--bevel-light) 0 2px, transparent 2px), radial-gradient(circle at calc(100% - 11px) 50%, var(--bevel-light) 0 2px, transparent 2px), var(--dither), var(--slab); /* THE BODY FACE, NOT THE TITLE FACE (user, 2026-09-04: "a more readable font for the headings in these boxes"): Georgia bold, the same face the paragraphs beside them are set in. */ font-family: var(--font-body); font-weight: bold; font-size: 1.3rem; line-height: 1.2; letter-spacing: 0.02em; padding: 0.5rem 1.5rem; box-shadow: inset 0 -2px 0 var(--blood-deep); } .ul-panes .ul-box-title, .ul-panes .card-header { font-size: 1.05rem; padding: 0.42rem 1.2rem; } .ul-main .card-header small, .ul-main .ul-box-title small { display: block; margin-top: 0.25rem; font-family: var(--font-mono); font-weight: normal; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .ul-main .ul-box-body, .ul-main .card-body { padding: 1.6rem 2.2rem 1.8rem; font-size: 1rem; } /* ========================================================================= Forms and inputs — sunken, the bevel runs the other way ========================================================================= */ .ul-form-row label { display: block; font-family: var(--font-head); font-size: 0.95rem; color: var(--muted); margin: 0.45rem 0 0.15rem; text-shadow: none; } .ul-form-row input[type="text"], .ul-form-row input[type="password"], .ul-form-row input[type="email"], .ul-form-row input[type="file"], .ul-form-row select, .ul-form-row textarea, .ul-pet-replyform textarea, /* the reply box was the browser's white one until 2026-09-30 */ .ul-app-decide textarea, /* and the staff's note on an application (2026-10-02) */ input.form-control, select.form-control, textarea.form-control { width: 100%; background-color: var(--term); background-image: var(--dither-2); background-size: 2px 2px; color: var(--ink); font-family: var(--font-body); font-size: 1rem; padding: 0.3rem 0.5rem; border: 1px solid var(--bevel-dark); border-radius: 0; box-shadow: none; } .ul-form-row input:focus, .ul-form-row select:focus, .ul-form-row textarea:focus, .ul-pet-replyform textarea:focus, .ul-app-decide textarea:focus, .form-control:focus { outline: none; border-color: var(--muted); background-color: var(--term); color: var(--ink); box-shadow: none; } .ul-form-row { margin-bottom: 1rem; } /* a form renders one .ul-form-row per field, with Django's own error list dropped in after it (registration, login, password change) */ .ul-form-row input[type="checkbox"] { width: auto; box-shadow: none; } .ul-form-field-errors ul, .ul-form-errors ul { list-style: none; margin: 0; padding: 0; } .ul-form-field-errors { margin-top: 0.3rem; padding: 0.25rem 0.6rem; background: #2a100b; border: 1px solid var(--blood); color: #e8afa9; font-size: 0.88rem; } .ul-form-help, .ul-form-row .helptext, .ul-form-row small { display: block; color: var(--muted); font-size: 0.86rem; margin-top: 0.2rem; } .ul-form-errors, .errorlist { list-style: none; margin: 0.3rem 0 0; padding: 0.3rem 0.6rem; background: #2a100b; border: 1px solid var(--blood); color: #e8afa9; font-size: 0.9rem; } .ul-form-actions { margin-top: 1.2rem; } /* ========================================================================= Buttons — every clickable slab in the site shares one surface ========================================================================= */ .ul-btn, .btn, button, input[type="submit"] { display: inline-block; font-family: var(--font-body); font-weight: bold; font-size: 0.98rem; padding: 0.28rem 1.1rem; color: var(--ink); text-decoration: none; text-shadow: none; background-color: #303132; background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); border-radius: 0; box-shadow: none; cursor: pointer; image-rendering: pixelated; } .ul-btn:hover, .btn:hover, button:hover, input[type="submit"]:hover { background-image: var(--dither), var(--slab-lit); color: var(--fig-ink); text-decoration: none; } .ul-btn:active, .btn:active, button:active, input[type="submit"]:active { box-shadow: none; } .ul-btn:focus, .btn:focus, button:focus { outline: 1px dotted var(--bevel-light); } .ul-btn-block { display: block; width: 100%; margin-top: 0.7rem; text-align: center; } /* the one destructive button (shelving a character): cut in blood, not brass */ .ul-btn-danger { color: #f2c4be; background-color: #4c1010; background-image: var(--dither), linear-gradient(180deg, #72151a 0 32%, #571113 32% 66%, #3c0e0b 66% 100%); box-shadow: inset 1px 1px 0 #902628, inset -1px -1px 0 #000; } .ul-btn-danger:hover { color: #fff; background-image: var(--dither), linear-gradient(180deg, #8e1c22 0 32%, #6e1519 32% 66%, #4c1010 66% 100%); } /* ---- the one brass button on the site: the way in ---------------------- WRITE IT `a.playbutton`, NOT `.playbutton`, AND KEEP IT SELF-CONTAINED. `.playbutton` is Evennia's own class and their website.css — which base.html loads BEFORE this sheet — styles it as `a.playbutton`. That is specificity 0,1,1 against our 0,1,0, so it wins no matter how late we load, and EVERY declaration in the generic button rule above lost to it as well. The button was rendering as their stock control: Arial, white on a blue vertical gradient, a 12px border-radius and a 10px blue glow — which breaks three of the five rules at the top of this sheet at once (no blur, no smooth gradients, no border-radius) and is the one thing on the homepage that did not belong to the palette. So this block re-states everything Evennia sets rather than leaning on the generic rule, because the generic rule cannot reach it. Same trap waits on any other class Evennia styles with an element prefix — check their sheet before assuming ours wins on load order. BRASS AND NOT BLOOD, deliberately: red is spoken for on this site. `.ul-btn-danger` below is "cut in blood" precisely because it is the destructive button, and the way INTO the game must not wear the colour of the button that shelves a character. Brass is the site's own accent for a way in — the crest, the corners, the plaque lettering. */ a.playbutton, .ul-btn-brass, a.playbutton:visited, .ul-btn-brass:visited { /* THE WAY IN, CUT IN BLOOD (user, 2026-09-04: "entirely red with black lettering", after a stone slab read too much like everything else). The one solid red surface on the site: three flat bands of --blood, dithered like every slab, a lit-red bevel, black lettering in the title face, and the boxes' hard shadow. The old note that the way in must not wear the shelve button's colour is overruled by this — that button is a dark, dull red at ordinary size; this is bright, large and alone. `:visited` is listed because the generic visited rule used to outrank a.playbutton once followed. */ display: inline-block; font-family: var(--font-body); font-weight: bold; font-size: 1.35rem; line-height: 1.2; letter-spacing: 0.02em; padding: 0.5rem 2.4rem 0.55rem; /* BONE LETTERING WITH THE ONE BLACK PIXEL (user: the text "needs to stand out more amongst the red"): black on the darker blood was under 3.5:1; this is about 6:1, and the offset pixel is the sheet's own rule for lettering on a slab. */ color: var(--fig-ink); text-decoration: none; text-shadow: 1px 1px 0 #000; /* a DARKER blood than --blood (user: "way too bright"): the middle band still clears 3:1 under black lettering at this size */ background-color: #a51529; background-image: var(--dither), linear-gradient(180deg, #b41a2f 0 32%, #a51529 32% 66%, #8a1021 66% 100%); background-size: 4px 4px, auto; border: 1px solid #3a0009; border-radius: 0; box-shadow: inset 0 0 0 1px #c8394a, 4px 4px 0 rgba(0, 0, 0, 0.6); cursor: pointer; image-rendering: pixelated; } a.playbutton:hover, .ul-btn-brass:hover { color: #fff; text-decoration: none; background-image: var(--dither), linear-gradient(180deg, #c42037 0 32%, #b41a2f 32% 66%, #961224 66% 100%); box-shadow: inset 0 0 0 1px #d9505f, 4px 4px 0 rgba(0, 0, 0, 0.6); } a.playbutton:active, .ul-btn-brass:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 1px #4a0810, 2px 2px 0 rgba(0, 0, 0, 0.6); } /* the roster's Play and the petition's Send: the same blood at button size */ .ul-btn.ul-btn-brass, .ul-btn.ul-btn-brass:visited { font-family: var(--font-head); font-weight: normal; font-size: 0.98rem; letter-spacing: 0.02em; padding: 0.28rem 1.1rem 0.32rem; box-shadow: inset 0 0 0 1px #c8394a, 2px 2px 0 rgba(0, 0, 0, 0.5); } .ul-btn.ul-btn-brass:hover { box-shadow: inset 0 0 0 1px #d9505f, 2px 2px 0 rgba(0, 0, 0, 0.5); } /* ========================================================================= Links, rules, headings ========================================================================= */ a { color: var(--exit-ink); text-decoration: underline; } a:hover { color: var(--ink); } /* no a:visited rule: it had the specificity to outrank a.playbutton and the nav tabs once followed, and the client draws no visited state either */ /* a rule is a hairline — the lily went with the plate */ hr, .ul-fleuron { height: 1px; border: 0; margin: 1.5rem 0; background: var(--pose-rule); opacity: 1; } h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--ink); text-shadow: none; margin-top: 0; } /* ========================================================================= Cards — see the Boxes section: a pane in the column, a plate in the well ========================================================================= */ .card { border-radius: 0; } .card-body { padding: 1.1rem 1.3rem; } .card-title { font-family: var(--font-head); color: var(--ink); } .lead { font-size: 1.08rem; } /* ========================================================================= Homepage ========================================================================= */ .ul-hero { position: relative; } .ul-hero-card .card-body { padding: 1.8rem 2.4rem 1.6rem; } /* THE CRIER (.ul-crier, .ul-crier-head, .ul-news-*: dated notices ruled off under the lead) was removed with its markup on 2026-09-29 (user: unnecessary). The hero box is the lead and the button, nothing else. */ .ul-subtitle { font-family: var(--font-head); font-size: 1.3rem; color: var(--muted); text-align: center; text-shadow: none; margin-bottom: 0.4rem; } .ul-hero-play { text-align: center; margin: 1.4rem 0 0.4rem; } /* .ul-maturity (the 18+ line under the play button) was removed with its markup on 2026-08-17 — see the note in homepage/main-content.html, which also records that the site now states its rating nowhere visible. */ .ul-warning { border: 1px solid var(--blood); background: #1a0d0b; color: #e1bcb8; padding: 0.6rem 0.9rem; font-size: 0.92rem; } /* .ul-facts (the Where / Your character dl under the hero) went the same day and for the same reason. Its two rules in the 860px media query went with it — a float that nothing floats. */ /* ---- the two live panels (hour, sky) ---------------------------------- */ .ul-panel-immersive .card-body { padding: 0.9rem 1rem 1rem; text-align: center; } .ul-panel-icon { width: 38px; height: 38px; margin: 0 auto 0.5rem; color: var(--muted); } .ul-panel-icon svg { width: 100%; height: 100%; } .ul-panel-value { font-family: var(--font-head); font-size: 1.22rem; color: var(--ink); margin-bottom: 0.15rem; text-shadow: none; } .ul-panel-caption { color: var(--muted); font-size: 0.9rem; margin: 0; } .ul-bignum { font-family: var(--font-display); font-size: 2.6rem; color: var(--muted); line-height: 1; text-shadow: none; } /* The Hour and Over the Roofs were half-width cards on the homepage until 2026-08-17; they are panes in the 208px state column now, on every page. Everything below is the same panel at column width — nothing structural, just sizes that stop the weather line becoming a paragraph. */ .ul-panes .ul-panel-immersive .card-body { padding: 0.75rem 1rem 0.9rem; } .ul-panes .ul-panel-icon { width: 26px; height: 26px; margin-bottom: 0.3rem; } .ul-panes .ul-panel-value { font-size: 1.25rem; line-height: 1.25; } .ul-panes .ul-panel-caption { font-size: 0.9rem; line-height: 1.45; } .ul-panes .ul-box-body { padding: 0.75rem 1rem 0.9rem; } /* the Who pane: the tally, then two lines of account figures under it */ .ul-panes .ul-counter-wrap { display: flex; align-items: center; justify-content: center; margin-bottom: 0.55rem; } .ul-who-line { text-align: center; color: var(--muted); font-size: 0.88rem; line-height: 1.45; margin: 0 0 0.2rem; } .ul-who-line:last-child { margin-bottom: 0; } .ul-who-line strong { color: var(--ink); } /* ---- the counter: tally digits in a sunken well ------------------------ */ .ul-counter-wrap { text-align: center; } .ul-counter { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 1.6rem; letter-spacing: 0.32em; /* the letter-spacing pads the right; pull it back so digits sit centred */ text-indent: 0.32em; color: var(--ink); background-color: var(--term); background-image: var(--grain); background-size: 6px 6px; border: 1px solid var(--bevel-dark); box-shadow: none; padding: 0.1rem 0.7rem; text-shadow: none; } /* .ul-counter-label went with the "souls in the city" caption (2026-08-17). The Online pane is the tally plate alone. */ /* ---- badges: the sticker row every fan site had ----------------------- */ .ul-badges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; } .ul-blinkie { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: var(--term); border: 1px solid var(--bevel-dark); box-shadow: none; padding: 0.16rem 0.42rem; text-decoration: none; text-shadow: none; } a.ul-blinkie:hover { color: var(--fig-ink); text-decoration: none; } .ul-blinkie-warn { color: #e1a098; border-color: var(--blood-deep); } .ul-blinkie-blink { animation: ul-blink 1.1s steps(1) infinite; } @keyframes ul-blink { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .ul-blinkie-blink { animation: none; } } /* The age gate ("the threshold") and its wax seal were removed 2026-08-17 — see the note in web/templates/website/index.html. The `ul-blink` keyframes it used are NOT dead: `.ul-blinkie-blink` above still animates on them. */ /* ========================================================================= Lore prose ========================================================================= */ .ul-prose { max-width: none; } .ul-prose p { margin-bottom: 1rem; } /* headings are rubricated: red ink for the section, brass for the sub */ .ul-prose h2 { font-size: 1.9rem; color: var(--ink); border-bottom: 1px solid var(--bevel-light); padding-bottom: 0.3rem; margin-bottom: 1.1rem; } .ul-prose h2::before { content: none; } .ul-prose h3 { font-size: 1.35rem; color: var(--ink); margin: 2rem 0 0.5rem; text-shadow: none; } .ul-prose h4 { font-size: 1.1rem; color: var(--muted); margin: 1.4rem 0 0.35rem; } /* an illuminated initial — bone on the slab, since 2026-09-04 */ .ul-prose > p:first-of-type::first-letter, .ul-initial::first-letter { float: left; font-family: var(--font-title); font-weight: 700; font-size: 3.1rem; line-height: 0.82; margin: 0.28rem 0.55rem 0 0; padding: 0.3rem 0.42rem 0.22rem; color: var(--ink); background-color: var(--bar); background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); box-shadow: none; text-shadow: none; image-rendering: pixelated; } /* never illuminate a centred lead-in or a back-link paragraph */ .ul-prose > p.text-center:first-of-type::first-letter, .ul-prose > p.ul-noinitial:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; font-family: inherit; } /* a marginal gloss, the way a scribe annotated his own copy */ .ul-gloss { float: right; width: 190px; margin: 0.35rem 0 0.9rem 1.4rem; padding-left: 0.8rem; border-left: 1px solid var(--bevel-light); font-size: 0.86rem; font-style: italic; line-height: 1.5; color: var(--muted); } .ul-gloss strong { color: var(--muted); font-style: normal; } /* an in-character quotation */ .ul-epigraph { margin: 1.4rem 0; padding: 0.9rem 1.1rem; background: var(--card); border-left: 3px solid var(--blood-deep); border-top: 1px solid var(--bevel-dark); border-bottom: 1px solid var(--bevel-dark); font-style: italic; } .ul-epigraph p { margin-bottom: 0.4rem; color: var(--ink); } .ul-epigraph p:last-of-type { margin-bottom: 0; } .ul-epigraph .ul-translation { color: var(--muted); font-size: 0.92rem; } .ul-epigraph footer { color: var(--muted); font-size: 0.9rem; font-style: normal; margin-top: 0.4rem; } .ul-epigraph footer::before { content: "\2014\00a0"; } /* dense reference tables — the clan list, the roads, the quarters */ .ul-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 0.94rem; } .ul-table caption { caption-side: top; text-align: left; font-family: var(--font-head); color: var(--muted); font-size: 0.9rem; padding-bottom: 0.3rem; } .ul-table th { text-align: left; font-family: var(--font-body); font-weight: bold; color: var(--ink); background: var(--bar-deep); border-bottom: 1px solid var(--bevel-light); padding: 0.25rem 0.6rem; text-shadow: none; white-space: nowrap; } .ul-table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid #0f1010; vertical-align: top; } /* banded rows, the way every table of that decade was drawn */ .ul-table tbody tr:nth-child(odd) > td { background: rgba(255, 255, 255, 0.022); } .ul-table tbody tr:hover > td { background: var(--bar); } .ul-table .ul-td-name { color: var(--ink); font-family: var(--font-head); font-size: 1.02rem; white-space: nowrap; } .ul-prose ul, .ul-prose ol { margin: 0 0 1rem 1.2rem; padding: 0; } .ul-prose li { margin-bottom: 0.3rem; } .ul-prose ul { list-style: none; margin-left: 0; } .ul-prose ul > li { padding-left: 1.3rem; text-indent: -1.3rem; } .ul-prose ul > li::before { content: "\00B7\00a0\00a0"; color: var(--muted); } /* a numbered creed — the Traditions, the steps to join */ .ul-numbered { list-style: none; counter-reset: ulnum; margin: 1rem 0 1.4rem; padding: 0; } .ul-numbered > li { counter-increment: ulnum; position: relative; padding: 0 0 0.9rem 3.1rem; text-indent: 0; } .ul-numbered > li::before { content: counter(ulnum, upper-roman); position: absolute; left: 0; top: 0.05rem; width: 2.3rem; text-align: center; font-family: var(--font-head); font-size: 1rem; color: var(--ink); background-color: #303132; background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); box-shadow: none; text-shadow: none; image-rendering: pixelated; } .ul-numbered > li strong { color: var(--ink); } /* a hand-set monospace plan — the map page. Sunken, like the terminal in the game client, because it is the same kind of object: characters on a grid. It scrolls sideways on a narrow screen rather than reflowing, since reflowing a diagram destroys it. */ .ul-plan { overflow-x: auto; margin: 1.2rem 0 0.4rem; padding: 1rem 1.1rem; background-color: var(--term); background-image: var(--dither-2); background-size: 2px 2px; border: 1px solid var(--bevel-dark); box-shadow: none; color: var(--ink); font-family: var(--font-mono); font-size: 13px; line-height: 1.25; white-space: pre; text-shadow: none; image-rendering: pixelated; } /* figures and the map */ .ul-figure { float: right; width: 320px; max-width: 42%; margin: 0.3rem 0 1rem 1.5rem; } .ul-figure-left { float: left; margin: 0.3rem 1.5rem 1rem 0; } .ul-figure img { width: 100%; display: block; border: 1px solid var(--bevel-dark); box-shadow: none; filter: sepia(0.35) contrast(1.1) brightness(0.82); } .ul-figure figcaption { margin-top: 0.4rem; font-style: italic; font-size: 0.88rem; color: var(--muted); text-align: center; } .ul-map-frame { padding: 10px; background-color: #242425; background-image: var(--dither), var(--slab); background-size: 4px 4px, auto; border: 1px solid var(--bevel-dark); box-shadow: none; image-rendering: pixelated; } .ul-map-frame img { width: 100%; display: block; border: 1px solid #000; filter: sepia(0.4) contrast(1.08) brightness(0.8); } .ul-map-caption { text-align: center; font-style: italic; color: var(--muted); margin: 0.8rem 0 0; } /* contents cards on the Setting landing page — chapter plates */ .ul-section-card { display: block; height: 100%; padding: 0.85rem 1rem 0.9rem; background: var(--box); border: 1px solid var(--bevel-dark); box-shadow: none; text-decoration: none; color: var(--ink); } .ul-section-card:hover { background: #202121; text-decoration: none; } .ul-section-card:hover h2 { color: var(--fig-ink); } .ul-section-card h2 { font-size: 1.28rem; color: var(--ink); margin-bottom: 0.25rem; border: 0; padding: 0; } .ul-section-card .ul-card-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--muted); display: block; margin-bottom: 0.15rem; } .ul-section-card p { color: var(--muted); margin-bottom: 0; font-size: 0.95rem; } .ul-lore-back { margin: 0 0 1rem; font-family: var(--font-head); } .ul-lore-back-bottom { margin-top: 1.6rem; } /* previous / next along the bottom of a lore page */ .ul-lore-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; font-family: var(--font-head); font-size: 0.98rem; } .ul-lore-nav span { color: var(--muted); } /* ========================================================================= Footer — the bar along the bottom, where the client keeps its input ========================================================================= */ .ul-footer { grid-area: foot; text-align: center; padding: 0.9rem 1rem 1rem; background-color: var(--card); border: 1px solid var(--bevel-dark); box-shadow: none; } /* the legal statement on website/legal.html */ .ul-footer-legal { max-width: 54ch; margin: 0.5rem auto 0; color: var(--muted); font-size: 0.76rem; line-height: 1.5; } .ul-footer-legal a { color: var(--exit-ink); } .ul-footer-legal a:hover { color: var(--fig-ink); text-decoration-color: var(--blood); } .ul-footer-credit { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin: 0; } .ul-footer a { color: var(--exit-ink); text-decoration: none; } .ul-footer a:hover { color: var(--fig-ink); text-decoration: underline; } /* ========================================================================= Error pages ========================================================================= */ .ul-error { text-align: center; padding: 2.5rem 1rem 3rem; } .ul-error-code { font-family: var(--font-display); font-size: 6rem; line-height: 1; color: var(--blood); text-shadow: none; } .ul-error-title { font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); margin: 0.4rem 0 0.8rem; } .ul-error p { color: var(--muted); max-width: 34rem; margin: 0 auto 1.4rem; } /* ========================================================================= Django messages ========================================================================= */ .alert, .messages li { border-radius: 0; border: 1px solid var(--bevel-light); background: var(--bar-deep); color: var(--ink); padding: 0.5rem 0.9rem; margin-bottom: 0.8rem; } .alert-danger, .messages li.error { border-color: var(--blood); background: #1f0d0c; color: #e8afa9; } .alert-success, .messages li.success { border-color: #305e46; background: #0f1512; } /* ========================================================================= Narrow screens — the frame becomes a column ========================================================================= */ @media (max-width: 860px) { .ul-frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "panes" "foot"; gap: 10px; margin: 14px auto 24px; padding: 0 8px; } .ul-titlebar { flex-wrap: wrap; gap: 0.7rem 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; } .ul-crest { width: 54px; height: 54px; } .ul-title { font-size: 1.8rem; } .ul-rail-you { margin-left: 0; justify-content: flex-start; flex-basis: 100%; } .ul-rail-login { flex-wrap: wrap; } .ul-navstrip .ul-mast-inner { flex-wrap: wrap; } .ul-rail-nav { flex-wrap: wrap; } .ul-panes { grid-template-columns: minmax(0, 1fr); gap: 10px; } .ul-main { gap: 10px; } .ul-sky { height: 22vh; } .ul-main .ul-box-title, .ul-main .card-header { font-size: 1.15rem; padding: 0.45rem 1rem; } .ul-main .ul-box-body, .ul-main .card-body, .ul-hero-card .card-body { padding: 1.1rem 1.1rem 1.2rem; } .ul-gloss { float: none; width: auto; margin: 0.8rem 0; } .ul-figure { float: none; width: 100%; max-width: 100%; margin: 1rem 0; } } /* The Dark Pack mark and the credit line, on one row. The logo is shown small and STRAIGHT -- it is Paradox's own and may not be redrawn, recoloured or filtered, so it takes no dither, no bevel and no tint, unlike every other surface here. */ .ul-footer-bar { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; } .ul-footer-mark { display: block; line-height: 0; flex: 0 0 auto; } .ul-darkpack { width: 40px; height: auto; opacity: 0.85; } .ul-footer-mark:hover .ul-darkpack { opacity: 1; } /* the same mark on the legal page, where it has room to be read */ .ul-legal-mark { margin: 1.2rem 0; line-height: 0; } .ul-darkpack-lg { width: 128px; opacity: 1; } /* ========================================================================= THE CRYPT (2026-09-12) — the site in the CLIENT'S colours and materials The user asked for the website to match the webclient's recent look (the Crypt tiles of 2026-09-09 and the chrome pass) — same FORMAT, the colours and textures changed, the moon and skyline kept. Picked from a mock with a Live/Crypt switch; then "no texture like that" for the masonry walls offered, "just make it darker, like a night sky". What this block does, and nothing above it was rewritten for it except the bevel sweep (every pixel bevel, ring and hard lift in this sheet and chargen.css is gone — the Crypt is FLAT AND DRAWN; the blood lines and the blood buttons kept theirs): - the :root tokens go back to the client's GREY STONE; the wine set above stays as the record of the crest-tuned pass - --slab / --slab-lit ARE THE SLAB TILE (image-set at 2x, so the marks stay 2px), --dither / --grain are none: every surface in both sheets that said "dither over slab" is the marked slab now, with no rule of its own touched - the wall is a FLAT COLD NEAR-BLACK, no tile — the stars and the moon are the only texture on it (the client's soot was rejected here: at the site's box sizes it read as the box interiors) - every box wears the client's 9-slice iron frame; the page's reading boxes are the terminal's leather, the panes / footer / menu the pane stone; masthead and plaques the slab, no rivets; tabs at rest are stone cells and the lit one a piece of slab The tiles are THE CLIENT'S OWN FILES in webclient/tiles/ (drawn by bugtesting/crypt/make_tiles.py) — one set, both faces. ========================================================================= */ :root { --desk: #040405; --paper: #0a0b0b; --box: #171818; --bar: #1f2020; --bevel-light: #464748; --bevel-dark: #020202; --frame-ring: #2b2c2d; --pose-rule: #3c3d3d; --term: #0e0d0d; /* the client's field ground */ --bar-deep: #1a1b1b; --card: #141415; --blood: #d8152f; --blood-lit: #f84e4f; --blood-deep: #810017; /* the tiles, as the tokens every slab in both sheets already reads */ --slab: image-set(url("../../webclient/tiles/slab.png") 2x); --slab-lit: image-set(url("../../webclient/tiles/slab.png") 2x); --dither: none; --dither-2: none; --grain: none; --dither-wall: none; } /* pixel-rendered chrome; the crest, the Dark Pack mark and the backdrop stay smooth */ .ul-mast, .ul-mast *, .ul-mast *::before, .ul-mast *::after, .ul-frame, .ul-frame *, .ul-frame *::before, .ul-frame *::after { image-rendering: pixelated; } .ul-crest img, .ul-darkpack, .ul-sky, .ul-moon, .ul-stars, .ul-sky *, .ul-moon *, .ul-stars * { image-rendering: auto; } /* ---- the wall: a night sky --------------------------------------------- */ body { background-color: #050507; background-image: none; } /* the vignette stays (it is what lights the moon and the roofs); the wall's own 4px dither goes */ /* ONE LIGHT ACROSS THE WHOLE BACKDROP (user, 2026-10-01, the same day and the same way as the webclient): the stepped vignette - three hard bands darkening toward the edges - is gone, and the 4px wall dither the site dropped on 2026-09-12 is back, so the sky is evenly lit edge to edge under it. The dither is written out here because this dress sets --dither-wall to none for everything else; it is the client's own pattern, copied from ul_webclient.css. *//* HALF STRENGTH (user, 2026-10-01: "the dither feels far stronger than it was"): the wall dither's own pattern at half its alphas - white 0.04 and black 0.10, where --dither-wall is 0.08 and 0.20. */ body::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.10'%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 4px 4px; image-rendering: pixelated; } /* ---- the masthead band: a slab; the nav strip a course of stone -------- */ .ul-mast { background-color: #1f1d1a; background-image: url("../../webclient/tiles/slab.png"); background-size: 256px 128px; background-position: 120px 30px; border-bottom: 1px solid #040404; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); } .ul-navstrip { background-color: #121110; background-image: url("../../webclient/tiles/pane.png"); background-size: 256px 256px; background-position: 40px 200px; border-top: 1px solid #040404; box-shadow: inset 0 -2px 0 var(--blood-deep); } /* tabs: cells cut in the stone; the page you are on is a piece of the slab (the compass's rule: cells are stone, an open way is slab) */ .ul-navlist a { background-color: #100f0f; background-image: url("../../webclient/tiles/cells.png"); /* the 640px marked stone: stone.png's cracks repeated tab to tab */ background-size: 640px 640px; background-position: 0 0; border: 1px solid #030303; box-shadow: none; color: var(--ink); } .ul-navlist li:nth-child(2) a { background-position: 260px 90px; } .ul-navlist li:nth-child(3) a { background-position: 410px 330px; } .ul-navlist li:nth-child(4) a { background-position: 70px 480px; } .ul-navlist li:nth-child(5) a { background-position: 330px 150px; } .ul-navlist a:hover { background-color: #1f1d1a; background-image: url("../../webclient/tiles/slab.png"); background-size: 256px 128px; background-position: 90px 40px; color: var(--fig-ink); } .ul-navlist a:active, .ul-navlist a.is-here { background-color: #262320; background-image: url("../../webclient/tiles/slab.png"); background-size: 256px 128px; background-position: 60px 20px; color: var(--exit-ink); } .ul-navlist a.is-here { border-bottom: 2px solid var(--blood); } /* the fields: the client's, flat */ .ul-rail-login input { background-color: #0e0d0d; background-image: none; border: 1px solid #030303; box-shadow: none; } /* the buttons: slab — the blood buttons (.ul-btn-brass, the way in) keep their own red ground and ring. :where() so the exclusion adds NO specificity: the chargen dots are