/* ================================================================== Help — the walkthrough, opened with the ? in the masthead. ================================================================== Same Constellation vocabulary as the board: void chassis, chrome edges, cosmic light reserved for state. What is different is that this page is read rather than operated, so it is a single column at a readable measure, and it opts text back into selection — base.css turns selection off globally because the board is dragged. The ornament earns its keep by meaning something: the steps are plain panels, and only the two reference blocks at the end wear the border art, the same left/right pair the bench and board wear. ================================================================== */ #help { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--cs-8); min-height: 100vh; padding: var(--cs-4) var(--cs-4) var(--cs-8); /* The return to the board fades this wrapper rather than , so the star field stays lit underneath and the last thing on screen is the sky — which is what the board opens on. */ transition: opacity 420ms ease, transform 420ms ease; } /* The reading measure. Wide enough for a sentence, narrow enough that the eye does not have to travel back across the panel to find the next line. */ #help > * { width: 100%; max-width: 860px; } /* ---------------- top bar ---------------- */ #help-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-4); flex: none; } .help-chip { display: inline-flex; align-items: center; gap: var(--cs-2); padding: 5px var(--cs-3); border: 1px solid var(--cs-chrome-shadow); border-radius: 999px; background: var(--cs-panel); color: var(--cs-text-secondary); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .help-chip .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cs-cosmic); box-shadow: 0 0 8px rgba(142,220,255,.85); } /* ---------------- hero ---------------- Smaller than the board's masthead on purpose. This page is about the board, so the mark identifies it and then gets out of the way. */ #help-hero { display: flex; flex-direction: column; align-items: center; gap: var(--cs-2); text-align: center; } .help-h1 { margin: 0; line-height: 0; font-size: 0; } #help-mark { width: auto; height: auto; max-width: min(420px, 76vw); max-height: 96px; object-fit: contain; filter: drop-shadow(0 3px 14px rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(221,246,255,.12)); -webkit-user-drag: none; } #help-title { margin: var(--cs-1) 0 0; font-size: clamp(15px, 2.6vw, 20px); letter-spacing: .3em; text-indent: .3em; /* re-centres against the trailing space */ } #help-lede { max-width: 58ch; margin: var(--cs-2) 0 0; color: var(--cs-text-secondary); font-size: 14px; line-height: 1.7; user-select: text; } /* ---------------- the steps ---------------- An

is the positioning context, and the panel is a child of it. The numeral cannot live on the panel itself: .cs-panel::before is already the masked chrome ring, and giving that pseudo-element a `content` of its own would take the ring off every step. */ .step { position: relative; counter-increment: step; } /* Room at the top-left for the numeral, which sits on the panel edge rather than inside the text block — the number is a marker for the step, not the first word of it. */ .step .cs-panel-inner { padding-top: var(--cs-6); gap: var(--cs-3); } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -12px; left: var(--cs-4); z-index: 5; /* above the panel's chrome ring */ padding: 0 var(--cs-2); background: var(--cs-obsidian); /* punches a gap in the ring it crosses */ font-family: var(--cs-font-mono); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--cs-lunar); text-shadow: 0 0 14px rgba(142,220,255,.28); } .step h2 { margin: 0; font-size: 14px; } .step p { margin: 0; color: var(--cs-text-secondary); font-size: 13px; line-height: 1.75; user-select: text; } .step p + p { margin-top: var(--cs-2); } /* An instruction names controls that are on the other screen. Setting them in the interface's own type is what makes "Add to bench" read as a button rather than as three ordinary words. */ .ui { color: var(--cs-stellar); font-weight: 650; letter-spacing: .02em; white-space: nowrap; } kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--cs-chrome-shadow); border-radius: var(--cs-radius-xs); background: var(--cs-control); box-shadow: 0 1px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); color: var(--cs-text); font-family: var(--cs-font-mono); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; /* A key is spelled the way the keyboard spells it. Inside a term in the reference table the surrounding uppercase would otherwise turn Esc into ESC. */ text-transform: none; } /* The finer points of a step: the things that are true but would clot the paragraph if they were sentences in it. */ .notes { list-style: none; margin: var(--cs-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--cs-2); } .notes li { position: relative; padding-left: var(--cs-4); color: var(--cs-text-muted); font-size: 12px; line-height: 1.65; user-select: text; } /* A hairline of cosmic light rather than a bullet glyph — the same mark the context menu puts on a hovered row. */ .notes li::before { content: ""; position: absolute; top: .62em; left: 0; width: 8px; height: 1px; background: var(--cs-dark-chrome); } /* ---------------- reference blocks ---------------- */ #reference { display: flex; flex-direction: column; gap: var(--cs-6); /* The border art overhangs its panel, so the column needs room or the ornament clips against the viewport on a phone. */ padding: 0 var(--cs-2); } .ref .cs-panel-inner { gap: var(--cs-3); } /* Two columns on a desktop, stacked on a phone. The left column is the thing you aim at; the right is what you get. */ .ref-rows { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: var(--cs-2) var(--cs-4); align-items: baseline; } /* The term wears the console's label treatment — the same small tracked caps that name "Add player" and "Board actions" over there. Without it the term and the control names in the definition beside it are the same weight, and stacked on a phone the two become hard to tell apart. */ .ref-rows dt { color: var(--cs-text-secondary); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; user-select: text; } .ref-rows dd { margin: 0; color: var(--cs-text-secondary); font-size: 12px; line-height: 1.65; user-select: text; } /* A hairline between rows, so a long right-hand column still reads as belonging to the term on its left. */ .ref-rows dd:not(:last-of-type), .ref-rows dt:not(:last-of-type) { padding-bottom: var(--cs-2); border-bottom: 1px solid rgba(41,47,54,.55); } /* ---------------- the way back ---------------- */ #help-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cs-4); } /* A .cs-button at hero scale — it inherits the metal, the sweep and the press from components.css and only changes what scale requires. */ .cs-button--hero { min-height: 50px; padding: 0 var(--cs-8); gap: var(--cs-3); display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .18em; border-radius: 999px; } .cs-button--hero .cs-star { --star-size: 17px; --star-dur: 1.6s; } /* The star turns only while the button is under the pointer: the animation is the affordance, the same rule the board's pin star follows. */ .cs-button--hero:hover .cs-star, .cs-button--hero:focus-visible .cs-star { animation-name: cs-star-play; animation-duration: var(--star-dur); animation-iteration-count: infinite; animation-timing-function: steps(24); } .cs-button--hero:hover { box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12), 0 0 30px rgba(142,220,255,.26); } /* ---------------- footer ---------------- */ #help-foot { display: flex; flex-direction: column; align-items: center; gap: var(--cs-3); max-width: 660px; /* the ornament's canonical width */ color: var(--cs-text-disabled); font-family: var(--cs-font-mono); font-size: 10px; letter-spacing: .06em; text-align: center; } #help-foot .foot-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--cs-2) var(--cs-4); } #help-foot a { color: inherit; text-decoration: none; } #help-foot a:hover { color: var(--cs-text-muted); } /* The Orbital Signature footer rule. The endcaps are fixed art at their display size and the divider is the only piece that scales, exactly as the art pack specifies — stretching an endcap pulls the star and the orbit intersection out of round. The @2x sources are placed at 1x, so the chrome stays crisp on a dense display. */ .orbital-rule { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; /* Chrome this fine goes to mush over a bright star; a hair of contrast against the void is all it needs to sit down. */ filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); opacity: .8; } .orbital-rule .endcap { width: 48px; height: 24px; flex: none; -webkit-user-drag: none; } /* Stretched, not repeated: the divider is one continuous orbit line and tiling it would show a seam wherever the light peaks. */ .orbital-rule .divider { flex: 1; min-width: 0; height: 16px; background-image: url("../assets/footer_orbital_divider@2x.png"); background-repeat: no-repeat; background-size: 100% 100%; } /* ---------------- leaving ---------------- Matched to the delay in help.js — change one and change both. */ #help.is-leaving { opacity: 0; transform: scale(1.02); pointer-events: none; } /* That scale pushes the page a few pixels wider than the viewport, and a scrollbar flashing into existence under the fade is the one thing that would give the move away as a page swap. :has() is already the baseline here — sprites.css uses it for the champion slot. */ body:has(#help.is-leaving) { overflow: hidden; } /* ---------------- arrival ---------------- One short settle on load. A fade and a few pixels of travel, not an entrance — the page should feel like it was already there. */ @keyframes help-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } #help-bar, #help-hero, #steps, #reference, #help-actions, #help-foot { animation: help-rise 520ms cubic-bezier(.2,.7,.3,1) both; } #help-hero { animation-delay: 60ms; } #steps { animation-delay: 160ms; } #reference { animation-delay: 220ms; } #help-actions { animation-delay: 260ms; } #help-foot { animation-delay: 300ms; } /* ---------------- narrow ---------------- */ @media (max-width: 620px) { #help { gap: var(--cs-6); } #help-bar { flex-direction: column; align-items: flex-start; gap: var(--cs-2); } #help-title { font-size: 14px; letter-spacing: .22em; text-indent: .22em; } .ref-rows { grid-template-columns: 1fr; gap: var(--cs-1); } /* Stacked, the hairline would cut between a term and its own definition instead of between rows. The :not() has to be repeated or this loses the specificity contest with the rule above. */ .ref-rows dt:not(:last-of-type) { border-bottom: 0; padding-bottom: 0; } .ref-rows dd:not(:last-of-type) { padding-bottom: var(--cs-3); } .cs-button--hero { padding: 0 var(--cs-6); } }