/* Bellside view router — ADDITIVE. styles.css untouched. * * PROGRESSIVE ENHANCEMENT IS LOAD-BEARING: none of these rules do anything * until router.js adds .routed to . With JS off nothing is hidden and * the page degrades to one continuous readable document. Shipping the hiding * rule active would gate content behind a script. * * SCOPE NOTE: the sections live inside
, not as direct * children of , so the selector is scoped to `#main >` rather than * `body >`. A loose `[data-view]{display:none}` would also match the nav * links and the router would hide its own navigation. */ html.routed #main > [data-view] { display: none; } html.routed #main > [data-view].is-active { display: block; } /* The fold and the register section are both part of the register view, so two nodes can be active at once. */ html.routed #main > [data-view].is-active { animation: viewIn .3s cubic-bezier(.2,.7,.3,1) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---- pager: routing removes "just keep scrolling", give order back ---- */ .pager { display: flex; gap: 10px; justify-content: space-between; align-items: stretch; margin: 34px 0 0; padding-top: 20px; border-top: 1px solid var(--rule-2); } .pager a { flex: 1 1 0; min-width: 0; display: block; padding: 12px 14px; border: 1px solid var(--rule-2); background: #fbfaf7; color: var(--ink); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 3px 3px 0 #16191a0f; transition: box-shadow .1s linear, transform .1s linear, background .1s linear; } .pager a:hover { background: #fff; box-shadow: 5px 5px 0 #16191a1a; } .pager a:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #16191a1a; } .pager a.next { text-align: right; } .pager a b { display: block; font-family: var(--disp); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--pitch); margin-top: 3px; } .pager .spacer { flex: 1 1 0; } @media (max-width: 560px) { .pager { flex-direction: column; } .pager a.next { text-align: left; } } /* ---- nav rail: routes must stay reachable, never truncated ---- Once the nav is the only way to move, hiding overflowing links would make those routes unreachable. Scroll the rail instead of clipping it. */ @media (max-width: 1180px) { .hud nav { overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } .hud nav::-webkit-scrollbar { display: none; } .hud nav a { white-space: nowrap; flex: none; } } @media (prefers-reduced-motion: reduce) { html.routed #main > [data-view].is-active { animation: none; } .pager a { transition: none; } }