/* SHARED NARROW-VIEWPORT BASE — every page except the React lore build. * * The site was authored on a fixed 1440px canvas and each page pinned that in * with . Pages that drop the lock load * this sheet to get the two things every one of them needs: * * 1. CANVAS — unlock the 1440 min-widths in custom-simple-grid.css / * main.css / navbar.css and collapse the float grid to one column. * 2. NAV — the shared bar reflows, and below 900px becomes a hamburger + * full-screen shutter panel. Requires the #nav-toggle button in the * markup and the body.nav-open toggle script (see any page's footer JS). * * Per-page section reflow lives in that page's own sheet (mobile.css for the * homepage, armory.css for the Armory, main.css for the T&C header), which is * why this one carries nothing page-specific. * * Load LAST in so plain (non-!important) rules beat main.css. * !important appears only where the base rule is itself !important or where * an id selector outranks us. * * Palette sampled from the bar PNGs: slab #a294a0, ink #17111b. */ /* Hamburger and wordmark exist in the markup at every width; only the phone/tablet nav below uses them. */ #nav-toggle, .nav-home { display: none; } /* The desktop composition is pinned to a 1440 canvas, so ANY viewport under 1440 needs the reflow — below 1200 it merely broke more obviously. */ @media (max-width: 1439px) { /* ---------- canvas ---------- */ /* Counters `* { box-sizing: initial !important }` in index.html's critical CSS — padded, full-width panels need border-box. */ * { box-sizing: border-box !important; } html, body { min-width: 0 !important; width: 100% !important; } body { overflow-x: hidden; } .custom-container { width: 100% !important; max-width: 100%; } /* Float grid → single column. */ .row [class^='col'] { float: none !important; width: auto !important; margin: 0.5rem 14px !important; } /* The layout's empty gutter columns (.col-1 / .col-2 spacers). */ .row > [class^='col']:empty { display: none !important; } /* ---------- nav ---------- navbar.css pins the bar to min-width:1440 — that alone forces a horizontal scrollbar on every narrower window, so unlock it for the whole reflow range. The inline list measures ~816px, so the bar survives down to 900px; below that the panel below takes over. */ #navbar { min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 10px 16px; } /* Five items in a 48px display face never fit a phone bar honestly, so the bar keeps only a wordmark + hamburger and the list becomes a full-screen shutter panel. Submenus are FLATTENED into chips under their parent — always visible, so nothing needs a tap to reveal and the hover/focus dropdown machinery is dead weight at this width. */ @media (max-width: 900px) { #navbar { position: sticky; top: 0; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; /* Above the panel (999) so the toggle stays reachable while open. */ z-index: 1000; } /* Wordmark — the bar is otherwise empty once the list leaves, and it is the only home affordance left while the panel is shut, so it is a real link. It and the toggle sit in #navbar's own stacking context, so they need to out-rank the panel (999) *inside* it, not just via #navbar. */ .nav-home { display: block; position: relative; z-index: 1001; font-family: 'VT323', monospace; font-size: 17px; letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: #7fd06a; text-shadow: 0 0 8px rgba(84, 181, 65, 0.5); } #nav-toggle { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1001; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; } #nav-toggle .bars, #nav-toggle .bars::before, #nav-toggle .bars::after { display: block; width: 26px; height: 3px; background: ghostwhite; box-shadow: 0 0 8px rgba(84, 181, 65, 0.65); transition: transform 280ms cubic-bezier(0.16, 0.84, 0.34, 1), opacity 140ms ease; } #nav-toggle .bars { position: relative; } #nav-toggle .bars::before, #nav-toggle .bars::after { content: ''; position: absolute; left: 0; } #nav-toggle .bars::before { top: -8px; } #nav-toggle .bars::after { top: 8px; } body.nav-open #nav-toggle .bars { background: transparent; box-shadow: none; } body.nav-open #nav-toggle .bars::before { transform: translateY(8px) rotate(45deg); } body.nav-open #nav-toggle .bars::after { transform: translateY(-8px) rotate(-45deg); } body.nav-open { overflow: hidden; } /* The panel: shutter-wipes down from under the bar. */ .nav-list { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; justify-content: center; /* navbar.css centres the desktop bar; the panel is a left-read list. */ align-items: stretch; text-align: left; padding: 72px max(26px, 7vw) 40px; counter-reset: nav; background: radial-gradient( 120% 70% at 50% 0%, #1d1030 0%, rgba(7, 0, 15, 0.99) 62% ), rgba(7, 0, 15, 0.99); clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; transition: clip-path 380ms cubic-bezier(0.16, 0.84, 0.34, 1), opacity 160ms ease; } /* CRT scanlines over the panel fill. */ .nav-list::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(84, 181, 65, 0.05) 0 1px, transparent 1px 4px ); } body.nav-open .nav-list { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } nav li { display: block; margin: 0 !important; } .nav-list > li { counter-increment: nav; border-bottom: 1px dashed rgba(162, 148, 160, 0.28); padding: 10px 0; } .nav-list > li:last-child { border-bottom: 0; } .nav-list > li > a { display: block; position: relative; /* 38px == the chips' indent below, so label and chips share a left edge. */ padding-left: 38px; font-size: clamp(26px, 8vw, 44px); line-height: 1.05; letter-spacing: 3px; } /* 01 / 02 / … in the mono face, quoting the site's terminal type. Taken out of the line box on purpose: the per-label text-indent below would drag an inline counter along with the label and leave the numbers ragged. */ .nav-list > li > a::before { content: counter(nav, decimal-leading-zero); position: absolute; left: 0; top: 0.2em; font-family: 'VT323', monospace; font-size: 15px; letter-spacing: 0.1em; color: #7fd06a; } /* Optical left edge. Every label's text box already starts at the same x — what's ragged is the ink: Zombie is a brush face whose left side bearing swings 0.216em between H and T. These indents are each glyph's measured bearing (canvas actualBoundingBoxLeft / font-size), so the painted edges line up with each other and with the chip borders below. In em, so they hold at every clamp() size. Re-measure if the labels or font change. */ .nav-list > li:nth-child(1) > a { text-indent: 0.207em; } .nav-list > li:nth-child(2) > a { text-indent: 0.077em; } .nav-list > li:nth-child(3) > a { text-indent: -0.009em; } .nav-list > li:nth-child(4) > a { text-indent: 0.091em; } .nav-list > li:nth-child(5) > a { text-indent: 0.024em; } /* Staggered reveal, one line at a time. */ body.nav-open .nav-list > li { animation: nav_in 420ms cubic-bezier(0.16, 0.84, 0.34, 1) both; } body.nav-open .nav-list > li:nth-child(2) { animation-delay: 60ms; } body.nav-open .nav-list > li:nth-child(3) { animation-delay: 120ms; } body.nav-open .nav-list > li:nth-child(4) { animation-delay: 180ms; } body.nav-open .nav-list > li:nth-child(5) { animation-delay: 240ms; } /* Submenus, flattened to chips: no second tap, no overhang maths. */ .dropdown-menu { position: static; visibility: visible; opacity: 1; transform: none; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; /* 38px == the number column above, so chips line up under the label. */ margin: 8px 0 0 38px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; white-space: normal; transition: none; } .dropdown-menu > li > a { font-size: 17px; padding: 7px 13px; border: 1px solid rgba(84, 181, 65, 0.38); border-radius: 999px; color: #cfe8c4; letter-spacing: 0.06em; } span.caret { display: none; } @keyframes nav_in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .nav-list, body.nav-open .nav-list > li, #nav-toggle .bars, #nav-toggle .bars::before, #nav-toggle .bars::after { transition: none; animation: none; } } } /* end max-width: 900px (panel nav) */ /* ---------- footer ---------- The homepage and the Armory both close on this link. */ span#terms_and_conditions { display: block; text-align: center; } }