/* GEOPACT, ONE SHEET. ========================================================================== THIS FILE IS THE SINGLE DEFINITION OF THE SITE'S SURFACE. The palette, the two faces, the measures, the type scale, the header, the footer and the shared components are written here once and nowhere else. Three copies of a header is the same fault as three copies of a fact: they drift, nothing says so, and the site starts looking like three sites. WHERE THIS FILE LIVES, AND WHY IT IS NOT IN THE WEB ROOT. --------------------------------------------------------------------------- THE CANONICAL COPY IS /usr/local/share/geopact/site.css. It sits outside every web root on purpose: - site-publish rsyncs the whole staging root to production with --delete, so anything in a web root is a PUBLISHED artefact. A canonical source should not be one. - mc-chronicle-site renders the chronicle for BOTH instances, from one script, into two different directories. If the canonical sheet lived in one instance's web root, the other instance's chronicle would be styled out of its neighbour's staging directory. A path under /usr/local/share is the same for every instance. /var/www//css/site.css is a DEPLOYED COPY of this file, because nginx has to serve a real file at a real URL for the hand-written pages. Sync it with: install -m644 /usr/local/share/geopact/site.css \ /var/www/test.geopact.earth/css/site.css THE TWO COPIES ARE GATED, NOT TRUSTED. `mc-chronicle-selftest` fails if the deployed copy differs from this one, or if the CORE markers below are gone. Copying a thing into a second place and watching it disagree is this project's own house rule for exactly this situation. WHO USES IT /index.html s the deployed copy /terms/, /refunds/, /privacy/ the deployed copy /store/index.html to be switched over; see the notes log /chronicle/** INLINES the CORE region below, at render time, read from this file by mc-chronicle-site. WHY THE CHRONICLE INLINES INSTEAD OF LINKING. "The page stays a file" is a stated design goal of that generator: a chronicle page must render when it is opened off disk, archived, or served from a different root (OUT is configurable and production renders elsewhere). A site-absolute is wrong in every one of those cases. Worse, site-publish EXCLUDES chronicle/, so a linked sheet would be the one part of a chronicle page arriving through the publish pipeline while the page itself does not: publish the site and a thousand pages change appearance with no regeneration and no record. So it inlines. What it does NOT do any more is keep a second copy of the definitions: it slices the CORE region out of this file at render time, and the selftest fails if it cannot. WHAT BELONGS HERE: anything more than one page uses. WHAT DOES NOT: the shop's rack and buy flow, the chronicle's ledger, the front page's globe and live reading. Those live with their page. RULES OF THE HOUSE, kept from the pages this was gathered from. - Two faces. A serif to read, a pencil hand for headings and figures. Both self hosted. No CDN, no webfont service, no tracking. - One palette. Nothing is a shadow, a gradient, a rounded corner past 2px, or a colour that is not one of the eight below. - Prose reads at --col and is not fenced. Space separates sections, not lines and not boxes. An edge is earned only by a set of discrete things a reader compares, or by one region being a different KIND of thing from what surrounds it. That is why the shop has edges, the chronicle's infobox has one, and the front page has none. - A control looks like a control: thumb height, a 2px corner, a visible focus ring, a real pressed state. - NO EM DASHES IN ANYTHING A VISITOR READS. A full stop or a semicolon for joined clauses, commas or parentheses for an aside, a colon for a consequence. ========================================================================== */ /* ===== CORE:BEGIN =============================================== CORE ===== EVERYTHING BETWEEN THESE TWO MARKERS IS COPIED VERBATIM INTO EVERY CHRONICLE PAGE by mc-chronicle-site. Keep it to what every page of the site genuinely needs: the palette, the faces, the reset, the type scale, the header and the footer. Anything added here is multiplied by well over a thousand files on the production instance, so it is paid for per page. Page-specific rules go BELOW the end marker. ========================================================================== */ @font-face{font-family:'Patrick Hand';src:url('/img/patrick-hand.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} :root{ --linen:#14130f; --paper:#1c1a15; --graph:#ece5d6; --muted:#b0a892; --faint:#857d6c; --rule:#35312a; --stamp:#d9a441; --mark:#c4664c; --stamp-hi:#ffaa00; /* --stamp pressed, the only derived colour */ --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif; --pencil:var(--serif); --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; --col:38rem; /* prose reads at this, on every page */ --shelf:62rem; /* the shop's rack breaks out to this */ --ledger:52rem; /* the chronicle's record breaks out to this */ } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--linen);color:var(--graph); font-family:var(--serif);font-size:18px;line-height:1.75; -webkit-font-smoothing:antialiased; /* ruled paper, the whole way down, quiet enough to sit under text */} img{max-width:100%;display:block} a{color:var(--stamp);text-decoration:none; border-bottom:1px solid rgba(217,164,65,.42)} a:hover{border-bottom-color:var(--stamp)} p{margin:0 0 1.15rem} /* Keyboard users could not see where they were on any page of this site. One ring, everywhere something can be focused. */ a:focus-visible,button:focus-visible,input:focus-visible, summary:focus-visible{outline:2px solid var(--graph);outline-offset:2px} /* ---------- measures ---------- .page is as wide as the widest thing the page holds. Everything read rather than scanned is pulled back to the reading measure by .measure. */ .page{max-width:var(--shelf);margin:0 auto;padding:0 1.5rem 5rem; text-align:center} .page.ledger{max-width:var(--ledger)} .page.narrow{max-width:var(--col)} .measure{max-width:var(--col);margin-left:auto;margin-right:auto} /* .measure only ever centred the BOX and set no text-align, so a notice sat hard left inside a centred column and read as a misalignment. Only .block.measure is centred, NOT .measure alone, because `top measure` is the header, whose wordmark sits left and links right by design. */ .block.measure{text-align:center;margin-left:auto;margin-right:auto} .block.measure .rows,.block.measure .rows *{text-align:left} /* ---------- type ---------- */ h1,h2,h3{font-family:var(--pencil);font-weight:400;margin:0;letter-spacing:0} h1{font-size:clamp(2.4rem,7vw,3.2rem);line-height:1.06} h2{font-size:clamp(1.5rem,4vw,1.85rem);margin:0} h3{font-size:1.22rem;line-height:1.3;margin:0} h1 .sub{display:block;font-family:var(--serif);font-size:.82rem; letter-spacing:.2em;text-transform:uppercase;color:var(--muted); margin-top:.7rem} .label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);margin:0 0 .5rem} .lede{font-size:1.15rem;line-height:1.6;margin:1.4rem 0 0} .lede em{font-style:normal;border-bottom:1.5px solid var(--mark)} .note{font-family:var(--pencil);font-size:1.1rem;line-height:1.4; color:var(--mark);margin:0 0 .55rem} .said{font-family:var(--pencil);font-size:1.35rem;line-height:1.45; color:var(--mark);margin:0 0 .7rem} .said.plain{color:var(--muted)} .aside{color:var(--muted);font-size:1rem;margin:0 0 .6rem} .aside:last-child{margin-bottom:0} .wrong{color:var(--mark)} .hint{font-size:.86rem;line-height:1.5;color:var(--muted);margin:.6rem 0 0} .block{margin:3.4rem 0 0} /* space separates, not lines */ /* ---------- the header, on every page we own ---------- IDENTICAL MARKUP EVERYWHERE. The wordmark is always a link home, and the page you are on is marked with aria-current so it reads as current rather than as a link that does nothing. THE MAP LINK ALWAYS CARRIES target="_blank". /map/ is BlueMap's own webapp and is not ours to style, so the frame around it is this: it opens beside Geopact rather than instead of it, and the site is still there behind it. See also the "back to Geopact" strip nginx injects into /map/ itself, for the visitor who arrives at a shared map link with no Geopact behind it. */ .top{display:flex;align-items:center;gap:.5rem 1.25rem;flex-wrap:wrap; padding:1.6rem 0 0;text-align:left} .top a{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);border:none} .top a:hover{color:var(--graph)} .top a[aria-current="page"]{color:var(--graph)} .top a.brand,.top .brand{font-family:var(--pencil);font-size:1.35rem; letter-spacing:0;text-transform:none;color:var(--graph); margin-right:auto;border:none} /* .hide USED TO MEAN display:none BELOW 560px, which left a phone with a nav of one item and no route to the chronicle, the map or the store. On a site trying to look like a real shop that is the wrong trade. The class is kept so pages still carrying it are not broken, and it now does nothing: the nav wraps to a second line instead. */ .top .hide{display:inline} /* ---------- shared components ---------- */ /* a row of small facts under a heading */ .meta{display:flex;gap:.4rem 1.6rem;flex-wrap:wrap;margin:1.4rem 0 0; font-size:.8rem;letter-spacing:.06em;color:var(--muted); justify-content:center} .meta b{font-weight:400;color:var(--graph)} /* every ruled list on the site. A table: never centred, because a table needs its columns to line up or the eye cannot scan it. */ .rows{list-style:none;margin:1.4rem 0 0;padding:0;text-align:left} .rows li,.rows div{display:flex;justify-content:space-between;gap:1.5rem; align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule)} .rows b{font-weight:400;color:var(--graph)} .rows .n{font-family:var(--serif);font-size:1.22rem; font-variant-numeric:tabular-nums;letter-spacing:.01em} .rows .big{font-family:var(--serif);font-size:1.45rem; font-variant-numeric:tabular-nums} .rows span{color:var(--muted);font-size:.94rem;text-align:right} .up{color:var(--stamp)} .down{color:var(--mark)} /* the one place a page raises its voice, and only a little */ .join{margin:3.6rem auto 0;padding:1.7rem 0 0;border-top:2px solid var(--graph)} /* ---------- the footer, on every page we own ---------- IT CARRIES THE FOUR THINGS A STRANGER LOOKS FOR before trusting a site that takes money: where else the site goes, who runs it, how to reach a person, and the terms. It is the same block everywhere, so finding it once is finding it always. */ footer{margin:4.5rem auto 0;padding-top:1.5rem; border-top:1px solid var(--rule);color:var(--muted)} .foot-nav{display:flex;gap:.6rem 1.5rem;flex-wrap:wrap; justify-content:center;font-size:.76rem;letter-spacing:.14em; text-transform:uppercase} /* GOLD FOR THE LINKS AT THE BOTTOM, and gold rather than the orange. Operator, 2026-08-28: "use more of the gold color you have for the links towards the bottom. i dont like that orange youre using". --stamp is the Hall of Time gold; --stamp-hi is NamedTextColor.GOLD exactly, for hover. */ .foot-nav a{color:var(--stamp);border:none} .foot-nav a:hover{color:var(--stamp-hi)} .foot-who{max-width:var(--col);margin:1.3rem auto 0;font-size:.88rem; line-height:1.6;color:var(--faint);text-align:center} .foot-who a{color:var(--faint);border-bottom-color:var(--rule)} .foot-who a:hover{color:var(--graph)} /* Older markup used a single flex footer with a .sp spacer. Kept working. */ footer .sp{margin-left:auto} @media(max-width:560px){footer .sp{margin-left:0}} /* ===== CORE:END ================================================= CORE ===== Below here is NOT copied into chronicle pages. Add page-specific and heavier components here. ========================================================================== */ /* A LEAF OF PAPER ON THE RULED PAGE. The same border and fill the front page gives a figure. This is the site's only container with an edge, and it is earned only where a reader compares discrete things or where one region is a different KIND of thing from what surrounds it. */ .leaf{background:var(--paper);border:1px solid var(--rule);border-radius:2px; padding:1.15rem 1.25rem;text-align:left} /* ---------- controls ---------- .btn is the decisive one, filled in the site's own green. .btn-quiet is a utility standing beside something rather than competing with it. Both are thumb height with a 2px corner and a real press. */ .btn,.btn-quiet{display:inline-block;cursor:pointer;border-radius:2px; font-family:var(--serif);text-transform:uppercase;text-align:center} .btn{padding:.95rem 1.4rem;min-height:3.1rem;background:var(--stamp); color:var(--paper);border:1px solid var(--stamp); font-size:.82rem;letter-spacing:.18em} .btn:hover{background:var(--stamp-hi);border-color:var(--stamp-hi); color:var(--paper)} .btn:active{transform:translateY(1px)} .btn[disabled]{background:var(--rule);color:var(--muted); border-color:var(--rule);cursor:default;transform:none} .btn-quiet{padding:.55rem 1.05rem;min-height:2.6rem;background:none; color:var(--graph);border:1px solid var(--graph); font-size:.72rem;letter-spacing:.14em} .btn-quiet:hover{background:var(--graph);color:var(--linen)} .btn-quiet:active{transform:translateY(1px)} .btn[hidden],.btn-quiet[hidden]{display:none} /* ---------- THE LIVE READING ---------- ========================================================================== WHAT WAS WRONG WITH IT. This was a caption: 0.88rem, letter-spaced, in --muted, with the Discord count appended under it in a smaller --faint. It was carrying the single most important question a stranger asks about a server, in the typographic register the page uses for photo captions. The operator called it lame and was right: it read as a widget bolted to the page, because a readout set as a readout IS a widget. WHAT IT IS FOR. Not telemetry. A visitor deciding whether this is a going concern. So it is set the way this site sets every number that matters: the serif at figure size with tabular numerals, which is exactly what the front page does to Everest's 8,680 m and the shop does to a price. IT IS NOT A BOX, AND THAT IS DELIBERATE. The front page's standing objection is on the record: the rejected design was "a stack of fenced boxes ... cards and tinted bands interrupting the read". Giving this region a paper leaf would be that objection all over again, and the shop's own rule does not reach it: an edge is earned by a set of discrete offers a reader COMPARES, and there is one reading here, not a set. So it earns its weight from type and space only. It fences nothing, tints nothing and breaks no measure. AT 0 PLAYERS. See the script for the argument. The figure is still printed, because hiding it is the dishonest option and "0 of 200" is the despairing one; what changes is that 0 gets a sentence and a real count does not. ========================================================================== */ .now{margin:2.2rem 0 0} .now[hidden]{display:none} .now .label{margin:0 0 .35rem} .now .dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%; background:var(--stamp);margin-right:.5rem;vertical-align:.08em} .now.down .dot{background:var(--mark)} .now-fig{font-family:var(--serif);font-size:clamp(2.6rem,8vw,3.4rem); line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.015em; color:var(--graph);margin:0} .now-fig[hidden]{display:none} .now-say{max-width:30rem;margin:.85rem auto 0;font-size:1rem;line-height:1.55; color:var(--muted)} .now-say[hidden]{display:none} .now.down .now-say{color:var(--mark);font-size:1.15rem} .now-else{margin:.7rem 0 0;font-size:.86rem;color:var(--faint)} .now-else[hidden]{display:none} .now-else a{color:var(--faint);border-bottom-color:var(--rule)} .now-else a:hover{color:var(--graph)} /* ---------- prose pages: terms, refunds, privacy ---------- Long documents, so they read at --col, left aligned. Centred prose is right for a paragraph of three lines and wrong for a page of forty. */ .doc{text-align:left;margin:2.6rem auto 0;max-width:var(--col)} .doc h2{margin:2.8rem 0 .2rem} .doc h2:first-of-type{margin-top:1.4rem} .doc h3{margin:1.8rem 0 .2rem;color:var(--graph)} .doc p{margin:.8rem 0 0} .doc ul{margin:.8rem 0 0;padding:0;list-style:none} .doc ul li{position:relative;padding:.3rem 0 .3rem 1.15rem; line-height:1.55} .doc ul li::before{content:"";position:absolute;left:0;top:1.05em; width:.55rem;height:1px;background:var(--stamp)} .doc .updated{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);margin:0} .doc .rows{margin:1.1rem 0 0} /* A QUESTION ONLY THE OPERATOR CAN ANSWER, LEFT VISIBLY BLANK. Inventing a legal fact would be worse than leaving a hole, and a hole that looks like finished copy is worse still. These are loud on purpose and must all be gone before this goes anywhere near production. */ .gap{display:block;margin:.8rem 0;padding:.7rem .85rem; border:1px dashed var(--mark);border-radius:2px; background:var(--paper);color:var(--mark);font-size:.9rem;line-height:1.5} .gap b{font-weight:400;text-transform:uppercase;letter-spacing:.16em; font-size:.72rem;display:block;margin-bottom:.3rem}