/* ============================================================================ MOONMODEL — Victoria III / nautical-chart design tokens ---------------------------------------------------------------------------- Extracted from the Victoria 3 reference: an aged chart by day, the brass-on- navy menu by night. Four roles do all the work below: --paper the sheet itself (the chart / the panel) --ink the primary mark (sepia by day, cream by night) --accent the one brass that carries interaction --desk the sea around the sheet Every other token is a derivation; the ornament gold (--brass) and the correction red (--red) are the two a chart always keeps in reserve. ============================================================================ */ :root{ /* --- day: a bright nautical chart ------------------------------------- */ --paper: #e8dfc6; /* aged parchment the chart is drawn on */ --paper-hi: #f1ead6; /* the lighter wash inside the frame */ --sea: #d9d0b4; /* the shallow sea the sheet floats on */ --desk: #c9bfa1; /* the darker desk beyond the sea */ --ink: #2c2114; /* sepia ink — the hand that drew the coast */ --ink-soft: #6f5c41; /* faded sepia for secondary text */ --ink-faint:#a89b7e; /* graticule, station lines, the barely-there ink */ --accent: #8a5a1e; /* brass, darkened so it holds on parchment */ --brass: #b08d4a; /* ornament gold — frames, pips, filigree */ --brass-hi: #c9a95c; /* the bright edge of a brass rule */ --red: #a63a2e; /* a chart's correction red — the × a projection */ /* writes when it cannot carry a field */ --route: #6f8ea3; /* a dashed shipping route, faded blue-grey */ } /* --- night: the brass-on-navy menu, designed, not borrowed --------------- */ html.night{ --paper: #1b222c; /* the panel, a deep navy charcoal */ --paper-hi: #232c3a; /* its lighter top edge */ --sea: #121a24; /* the sea gone dark */ --desk: #0c1118; /* the desk nearly black */ --ink: #e6ddc4; /* cream ink on the dark panel */ --ink-soft: #9aa3ad; /* a cold grey for secondary text */ --ink-faint:#39434f; /* graticule and stations, faint in the dark */ --accent: #c9a95c; /* brass, bright against navy */ --brass: #c9a95c; /* the same brass, now the ornament itself */ --brass-hi: #e0c884; /* a brightening edge */ --red: #c8605a; /* a lighter correction red for the dark ground */ --route: #5a7f97; /* a route line that reads on the dark ground */ } /* ============================================================================ NATIVE CHROME, DRESSED — there is no browser default left on the sheet. The scrollbar is brass on parchment; every control is drawn from the same four roles, so a form reads as part of the chart and not as a widget. ============================================================================ */ /* --- the scrollbar: a brass thumb on a faint ink track ------------------- */ html{scrollbar-color:var(--accent) transparent;scrollbar-width:thin;} *{ scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } *::-webkit-scrollbar{width:11px;height:11px;} *::-webkit-scrollbar-track{background:transparent;} *::-webkit-scrollbar-thumb{ background:var(--accent); border:3px solid var(--desk); border-radius:6px; } *::-webkit-scrollbar-thumb:hover{background:var(--brass-hi);} *::-webkit-scrollbar-corner{background:transparent;} /* --- controls: no rounded default, no system blue ------------------------ */ input,select,textarea,button{ font:inherit; color:var(--ink); background:var(--paper-hi); border:1px solid var(--ink); border-radius:0; padding:.55em .8em; outline:none; appearance:none;-webkit-appearance:none; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } input,textarea{caret-color:var(--accent);} input::placeholder,textarea::placeholder{color:var(--ink-soft);opacity:.7;} input:focus,select:focus,textarea:focus,button:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } button{ letter-spacing:.12em; text-transform:uppercase; font-size:.8em; cursor:pointer; background:var(--paper); } button:hover{background:var(--accent);color:var(--paper);border-color:var(--accent);} select{ padding-right:2em; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%), linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; } /* checkbox and radio drawn by hand, in brass */ input[type="checkbox"],input[type="radio"]{ width:1.05em;height:1.05em;padding:0;cursor:pointer;position:relative; border:1px solid var(--ink);background:var(--paper-hi); } input[type="radio"]{border-radius:50%;} input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);} input[type="checkbox"]:checked::after{ content:"";position:absolute;left:32%;top:12%;width:30%;height:56%; border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(42deg); } input[type="radio"]:checked::after{ content:"";position:absolute;inset:22%;border-radius:50%;background:var(--accent); } /* --- the rest of the browser's own furniture, also replaced -------------- */ html{color-scheme:light;} html.night{color-scheme:dark;} *{-webkit-tap-highlight-color:transparent;} ::selection{background:var(--accent);color:var(--paper);} ::-moz-selection{background:var(--accent);color:var(--paper);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } /* a link that is a piece of the chart, not a browser hyperlink */ a{color:inherit;text-decoration:none;} /* ============================================================================ THE DOCUMENT HEADER — one height on every page. The guide, the reference and the showcase used to give the header three different heights (the nav wrapped on one, the reference added a toolbar), so moving between them made the page jump. The head is now a fixed block and its rows never wrap; a long row scrolls sideways in silence instead. ============================================================================ */ .doc-head{min-height:188px;} .doc-head nav,.doc-head .meta{ flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; } .doc-head nav a,.doc-head .meta>*{flex:0 0 auto;white-space:nowrap;} .doc-head nav::-webkit-scrollbar, .doc-head .meta::-webkit-scrollbar{display:none;} /* a quiet arrival, so a move between pages reads as a transition, not a jump */ @keyframes mm-page-in{ from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:none;} } .sheet,#stage{animation:mm-page-in .3s ease both;} @media (prefers-reduced-motion: reduce){ .sheet,#stage{animation:none;} } /* --- the page rail: jump to another page without hunting in the meta ---- */ .pagerail{position:absolute;top:50px;right:64px;display:flex;gap:8px;z-index:2;} .pagerail a,.pagerail .nightbtn{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--ink); border-radius:16px;padding:6px 12px;opacity:.7; transition:border-color .16s ease,color .16s ease,background .16s ease,opacity .16s ease;} .pagerail a:hover,.pagerail .nightbtn:hover{border-color:var(--accent);color:var(--accent);opacity:1;} .pagerail a[aria-current="page"]{background:var(--accent);color:var(--paper);border-color:var(--accent);opacity:1;} .pagerail .nightbtn{background:transparent;cursor:pointer;font:inherit;font-family:'IBM Plex Mono',monospace; font-size:10px;letter-spacing:.14em;display:inline-flex;align-items:center;gap:6px;} .pagerail .nightbtn svg{display:block;} @media (max-width:940px){.pagerail{display:none;}} /* --- back to top, on the document pages --------------------------------- */ .totop{position:fixed;right:20px;bottom:20px;z-index:32;display:flex;align-items:center;gap:6px; font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase; padding:9px 14px;border:1px solid var(--accent);background:var(--paper);color:var(--ink); cursor:pointer;opacity:0;pointer-events:none;transform:translateY(6px); transition:opacity .2s ease,transform .2s ease,background .16s ease,color .16s ease;} .totop.show{opacity:1;pointer-events:auto;transform:none;} .totop:hover{background:var(--accent);color:var(--paper);} /* the 404 has no rail, so its switch sits in the corner on its own */ .themebtn{position:fixed;top:20px;right:20px;z-index:34;display:inline-flex;align-items:center;gap:6px; font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase; padding:7px 12px;border:1px solid var(--accent);border-radius:16px;background:var(--paper); color:var(--ink);cursor:pointer; transition:background .16s ease,color .16s ease,border-color .16s ease;} .themebtn:hover{background:var(--accent);color:var(--paper);} .themebtn svg{display:block;} /* ============================================================================ PHONE — at 390 px the sea, the frame and the sheet's margins left the text a 170 px column and the title ran off the sheet. Below 600 px they shrink, the title scales with the screen, a table scrolls inside its own box, and the reference's toolbar scrolls in its row like the rows above it. ============================================================================ */ @media (width <= 600px){ html .wrap{padding:20px 12px 64px;} html .sheet{padding:28px 18px;} html h1{font-size:clamp(24px,9vw,40px);letter-spacing:.08em;} html .sheet table{display:block;max-width:100%;overflow-x:auto;} html .headrow .bar{flex:0 1 auto;min-width:0;overflow-x:auto;} }