/* ============================================================ HEXAPONS docs. Same slate-and-amber world as the game, laid out for reading: one narrow column of prose, wide tables when the data needs it. ============================================================ */ /* style.css locks the document down so the game canvas owns the viewport. The docs are an ordinary scrolling page, so hand scrolling back to the root: sticky headers, anchor links and window.scrollY all depend on the document being the scroller rather than . */ html { overflow: auto; height: auto; scroll-behavior: smooth; } .guide-body { overflow: visible; height: auto; min-height: 100%; background: radial-gradient(ellipse 90% 60% at 70% -10%, rgba(42, 127, 160, 0.28), transparent 60%), var(--bg-0); color: var(--ink); } /* the sticky header is 56px of glass; keep headings clear of it when an anchor link jumps to them */ [id] { scroll-margin-top: 84px; } /* ---------------- reading progress ---------------- */ .read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 2px; pointer-events: none; background: rgba(150, 205, 225, 0.1); } .read-progress span { display: block; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--teal), var(--amber)); box-shadow: 0 0 12px rgba(232, 161, 60, 0.55); } /* ---------------- header ---------------- */ .guide-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 28px; background: rgba(13, 26, 34, 0.86); border-bottom: 1px solid var(--edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .guide-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; } .guide-brand .landing-mark svg { width: 26px; height: 26px; display: block; } .guide-brand .landing-mark { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); } .guide-brand:hover .landing-mark { transform: rotate(-14deg) scale(1.1); } .guide-crumb { padding: 3px 9px; border-radius: 20px; border: 1px solid var(--edge); background: rgba(79, 196, 192, 0.1); color: var(--teal); font-family: var(--font-body); font-size: 10px; font-style: normal; font-weight: 600; letter-spacing: 0.18em; } .guide-brand polygon { fill: rgba(42, 127, 160, 0.5); stroke: var(--amber); stroke-width: 2; } .guide-brand .mark-peak { fill: var(--amber); } .guide-top-actions { display: flex; align-items: center; gap: 10px; } .guide-play { padding: 8px 16px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #f0ab41, #c97f23); color: #14232b; text-decoration: none; font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: filter 0.15s; } .guide-play { display: inline-flex; align-items: center; transition: filter 0.15s, box-shadow 0.2s; } .guide-play:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(201, 127, 35, 0.4); } .guide-play .play-arrow { display: inline-block; transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1); } .guide-play:hover .play-arrow { transform: translateX(4px); } /* the contents button only exists once the sidebar collapses */ .guide-navbtn { display: none; padding: 7px 13px; border: 1px solid var(--edge-strong); border-radius: var(--radius-sm); background: transparent; color: var(--ink-dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .guide-navbtn:hover { border-color: var(--teal); color: var(--ink); } /* ---------------- shell ---------------- */ .guide-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 36px; max-width: 1180px; margin: 0 auto; padding: 34px 28px 90px; } .guide-nav { position: sticky; top: 78px; align-self: start; display: flex; flex-direction: column; gap: 1px; padding-right: 8px; border-right: 1px solid var(--edge); } .nav-label { padding: 0 11px 8px; font-family: var(--font-head); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); } .guide-nav a { padding: 7px 11px; border-radius: var(--radius-sm); color: var(--ink-faint); text-decoration: none; font-size: 12.5px; border-left: 2px solid transparent; transition: color 0.14s, background 0.14s, border-color 0.14s; } .guide-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); } .guide-nav a.active { color: var(--amber); border-left-color: var(--amber); background: rgba(232, 161, 60, 0.08); } .guide-main { min-width: 0; } /* ---------------- hero ---------------- */ .guide-hero { margin-bottom: 46px; } .guide-hero > * { opacity: 0; animation: docIn 0.66s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; } .guide-hero > *:nth-child(1) { animation-delay: 0.04s; } .guide-hero > *:nth-child(2) { animation-delay: 0.11s; } .guide-hero > *:nth-child(3) { animation-delay: 0.18s; } .guide-hero > *:nth-child(4) { animation-delay: 0.25s; } .guide-hero > *:nth-child(5) { animation-delay: 0.32s; } @keyframes docIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .guide-hero .eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); } .guide-hero .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: docPing 2.6s ease-out infinite; } @keyframes docPing { 0% { box-shadow: 0 0 0 0 rgba(79, 196, 192, 0.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(79, 196, 192, 0); } } .guide-hero h1 { margin: 0 0 14px; font-family: var(--font-head); font-size: clamp(34px, 5vw, 52px); font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; } .lede { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.68; color: #c6d9e2; } .lede--sub { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--edge-strong); font-size: 13.5px; color: var(--ink-faint); } .guide-stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 24px 0 0; padding: 0; } .guide-stats li { flex: 1 1 120px; padding: 12px 14px; border: 1px solid var(--edge); border-left: 2px solid var(--teal); border-radius: var(--radius-sm); background: var(--bg-1); } .guide-stats b { display: block; font-family: var(--font-head); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; /* the count-up rewrites this every frame; reserving the width stops the label under it twitching while the number climbs */ min-width: 2ch; text-shadow: 0 0 20px rgba(232, 161, 60, 0.3); } .guide-stats span { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* ---------------- blocks ---------------- */ .doc-block { margin-bottom: 46px; scroll-margin-top: 84px; } .doc-block h2 { margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--edge); font-family: var(--font-head); font-size: 25px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .doc-block h3 { margin: 0 0 7px; display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 16px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--amber); } .doc-block > p { max-width: 68ch; font-size: 14px; line-height: 1.68; color: var(--ink-dim); } .muted { color: var(--ink-faint); } .callout { max-width: 68ch; margin: 16px 0 0; padding: 13px 16px; border-left: 2px solid var(--teal); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(79, 196, 192, 0.08); font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); } .callout b { color: var(--ink); } .callout--warn { border-left-color: var(--warn); background: rgba(232, 183, 60, 0.08); } .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; } .card { padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--bg-1); } .card { transition: border-color 0.22s, background 0.22s, transform 0.22s, box-shadow 0.22s; } .card:hover { border-color: var(--edge-strong); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2, 10, 16, 0.42); } .card h3 { color: var(--ink); font-size: 14.5px; } .card p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-dim); } .bullets { max-width: 68ch; margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; font-size: 14px; line-height: 1.6; color: var(--ink-dim); } /* ---------------- the loop ---------------- */ .loop-list { counter-reset: step; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; } .loop-list li { counter-increment: step; position: relative; padding: 14px 0 14px 52px; border-top: 1px solid var(--edge); } .loop-list li::before { content: counter(step); position: absolute; left: 0; top: 14px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(232, 161, 60, 0.14); border: 1px solid rgba(232, 161, 60, 0.4); color: var(--amber); font-family: var(--font-head); font-size: 15px; font-weight: 700; } .loop-list h3 { color: var(--ink); margin-bottom: 5px; } .loop-list p { margin: 0; max-width: 66ch; font-size: 13.5px; line-height: 1.66; color: var(--ink-dim); } /* ---------------- controls ---------------- */ .key-list { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 16px; align-content: start; padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--bg-1); font-size: 13px; } .key-list dt { font-family: var(--font-head); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); } .key-list dd { margin: 0; color: var(--ink-dim); } /* ---------------- tables ---------------- */ .table-scroll { margin-top: 16px; overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--bg-1); } .doc-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; } .doc-table th { position: sticky; top: 0; text-align: left; padding: 10px 14px; background: rgba(22, 40, 51, 0.96); border-bottom: 1px solid var(--edge); font-family: var(--font-head); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .doc-table td { padding: 11px 14px; border-top: 1px solid rgba(150, 205, 225, 0.08); vertical-align: top; color: var(--ink-dim); line-height: 1.55; } .doc-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); } .doc-table b { color: var(--ink); font-weight: 600; } .g-name { display: flex; gap: 10px; align-items: flex-start; min-width: 210px; } .g-swatch { width: 16px; height: 16px; border-radius: 4px; flex: none; margin-top: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); } .g-name span { display: block; font-size: 12px; color: var(--ink-faint); } .g-cost { white-space: nowrap; font-variant-numeric: tabular-nums; } .g-detail { min-width: 240px; } .b-name { min-width: 220px; } .b-name b { display: block; margin-bottom: 3px; } .b-name span { display: block; font-size: 12px; color: var(--ink-faint); } .b-cost { min-width: 150px; font-variant-numeric: tabular-nums; } .b-cost span { display: block; margin-top: 3px; font-size: 11.5px; } .b-ground { min-width: 120px; font-size: 12px; } .b-effect { min-width: 220px; font-size: 12.5px; } .c-name span { display: block; font-size: 12px; color: var(--ink-faint); margin-top: 2px; } .pill { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 20px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .pill--gate { background: rgba(232, 161, 60, 0.16); color: var(--amber); } /* ---------------- resources ---------------- */ .res-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; } .res-group { padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--bg-1); } .res-group h3 { color: var(--ink); font-size: 14px; } .res-group p { margin: 0 0 11px; font-size: 12.5px; line-height: 1.55; } .res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .res-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-dim); } .res-list .ico { color: var(--teal); } .res-list b { color: var(--ink); font-weight: 500; } /* ---------------- research ---------------- */ .res-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; } .res-branch { padding: 16px 18px; border: 1px solid var(--edge); border-top: 2px solid var(--accent, var(--amber)); border-radius: var(--radius); background: var(--bg-1); } .res-branch h3 { color: var(--accent, var(--amber)); } .r-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .r-chain li { display: flex; gap: 11px; } .r-step { flex: none; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--ink-faint); font-size: 10.5px; font-weight: 700; } .r-chain b { display: block; font-size: 13px; color: var(--ink); } .r-chain span { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-dim); } .r-chain .muted { font-size: 11px; margin-top: 2px; } /* ---------------- faq ---------------- */ .faq { margin: 16px 0 0; max-width: 74ch; } .faq dt { margin-top: 16px; font-family: var(--font-head); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; color: var(--teal); } .faq dd { margin: 5px 0 0; font-size: 13.5px; line-height: 1.64; color: var(--ink-dim); } .guide-foot { margin-top: 58px; } .foot-cta { position: relative; overflow: hidden; padding: 30px 28px; border: 1px solid var(--edge-strong); border-radius: var(--radius); background: radial-gradient(ellipse 60% 130% at 88% 50%, rgba(232, 161, 60, 0.14), transparent 70%), var(--bg-2); text-align: center; } .foot-cta h3 { margin: 0 0 6px; font-family: var(--font-head); font-size: 26px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .foot-cta > p { margin: 0 0 20px; font-size: 14px; color: var(--ink-dim); } .foot-play { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 16px; padding: 13px 16px 13px 24px; border: 1px solid transparent; border-radius: 11px; background: linear-gradient(135deg, #f0ab41, #c97f23); color: #14232b; text-decoration: none; box-shadow: 0 12px 34px rgba(201, 127, 35, 0.32); transition: transform 0.16s, box-shadow 0.2s, filter 0.16s; } .foot-play:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 42px rgba(201, 127, 35, 0.45); } .foot-play .cta-label { font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .foot-play .cta-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(20, 35, 43, 0.16); } .foot-play .cta-arrow svg { width: 19px; height: 19px; fill: #14232b; transition: transform 0.2s; } .foot-play:hover .cta-arrow svg { transform: translateX(3px); } /* same sweep as the landing's primary button, so the two read as one product */ .foot-play::after { content: ""; position: absolute; top: -60%; left: -75%; width: 45%; height: 220%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent); transform: skewX(-18deg); animation: sheen 4.6s ease-in-out infinite; } @keyframes sheen { 0%, 62% { left: -75%; } 92%, 100% { left: 130%; } } .foot-meta { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; font-size: 12.5px; color: var(--ink-faint); } .foot-meta a { color: var(--ink-faint); text-decoration: none; transition: color 0.15s; } .foot-meta a:hover { color: var(--amber); } /* ---------------- quick start ---------------- */ .quick-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: quick; } .quick-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--radius-sm); background: rgba(22, 40, 51, 0.5); transition: border-color 0.22s, background 0.22s, transform 0.22s; } .quick-list li:hover { border-color: var(--teal); background: rgba(28, 50, 62, 0.66); transform: translateX(4px); } .q-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge-strong); background: rgba(79, 196, 192, 0.12); color: var(--teal); font-family: var(--font-head); font-size: 15px; font-weight: 700; transition: background 0.22s, color 0.22s, border-color 0.22s; } .quick-list li:hover .q-num { background: var(--teal); border-color: var(--teal); color: #0b1b22; } .quick-list h3 { margin: 0 0 3px; color: var(--ink); font-size: 14.5px; } .quick-list p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-dim); } /* ---------------- reveal on scroll ---------------- */ /* Only hides once JS has confirmed it is running, so a failed script or a reader with JS off still gets the whole page. */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); } .js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); } /* ---------------- back to top ---------------- */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--edge-strong); border-radius: 50%; background: rgba(13, 26, 34, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s, transform 0.25s, border-color 0.2s; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { border-color: var(--amber); } .to-top svg { width: 18px; height: 18px; fill: var(--ink-dim); } .to-top:hover svg { fill: var(--amber); } /* ---------------- responsive ---------------- */ @media (max-width: 900px) { .guide-shell { grid-template-columns: 1fr; gap: 0; padding: 22px 18px 70px; } .guide-top { padding: 11px 18px; } .guide-navbtn { display: inline-block; } .guide-crumb { display: none; } /* The sidebar folds into a sheet under the header, opened by the button. max-height rather than the grid-rows trick: this nav has fourteen direct children, and 0fr only ever collapses the first row. */ .guide-nav { position: static; display: block; max-height: 0; overflow: hidden; padding-right: 0; margin-bottom: 0; border-right: none; opacity: 0; visibility: hidden; transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.24s, margin-bottom 0.32s, visibility 0s linear 0.32s; } .guide-nav.open { max-height: 72vh; overflow-y: auto; opacity: 1; visibility: visible; margin-bottom: 22px; transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.24s, margin-bottom 0.32s, visibility 0s; } .guide-nav a { display: block; border-left: 2px solid transparent; } .foot-cta { padding: 24px 18px; } .to-top { right: 14px; bottom: 14px; } } @media (max-width: 560px) { .guide-hero h1 { font-size: 32px; } .quick-list li { padding: 12px 13px; gap: 11px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .guide-hero > * { opacity: 1; animation: none; } .guide-hero .eyebrow-dot { animation: none; } .foot-play::after { display: none; } .js-reveal .reveal { opacity: 1; transform: none; } .card:hover, .quick-list li:hover, .foot-play:hover { transform: none; } }