/* site.css — the promotional page only. * * ⚠ THIS SHEET AND THE EXTENSION'S SHEET NEVER MEET. panel.css is loaded * inside the sandboxed preview frame and this one outside it, so there is no * cascade between them and no class can collide. That is the reason the * preview is framed rather than inlined — the panel's sheet styles bare * elements under .gbui, and sharing a document would mean fighting it. * * The palette is taken from the extension's own token block so the site and * the product look like one thing: ink #1f1206, gold #c9a227, parchment * #f3e8c8. The site runs dark; the panel inside it stays parchment, exactly * as it does over the game. */ :root { --ink-900: #130d06; --ink-800: #1b1309; --ink-700: #241a0e; --ink-600: #2e2112; --line: #3b2b17; --line-up: #574023; --gold: #c9a227; --gold-up: #e3bb3c; --gold-dim: rgb(201 162 39 / 0.14); --parchment: #f3e8c8; --text: #e8dcc0; --muted: #a89271; --muted-dim: #7d6a4f; --on: #7dbb4a; --warn: #d08a2a; --stop: #d8604a; --radius: 10px; --radius-sm: 6px; --wrap: 1180px; --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif; --sans: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --shadow: 0 18px 50px rgb(0 0 0 / 0.45); --ring: 0 0 0 3px rgb(201 162 39 / 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 76px; } body { margin: 0; font: 400 16px/1.65 var(--sans); color: var(--text); background: var(--ink-900); -webkit-font-smoothing: antialiased; } /* A faint parchment glow at the top, and a laurel-ish texture nowhere else: one gradient, not a pile of them. */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 620px; background: radial-gradient(900px 420px at 50% -120px, rgb(201 162 39 / 0.13), transparent 70%), radial-gradient(1400px 500px at 85% -200px, rgb(125 187 74 / 0.05), transparent 70%); pointer-events: none; z-index: 0; } main, .top, .foot { position: relative; z-index: 1; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 600; color: var(--parchment); } h1 { margin: 0 0 14px; font-size: clamp(32px, 5.2vw, 56px); line-height: 1.08; letter-spacing: -0.4px; } h2 { margin: 0 0 12px; font-size: clamp(25px, 3.4vw, 36px); line-height: 1.15; } h3 { margin: 0; font-size: 19px; } h4 { margin: 0 0 6px; font-size: 15px; } h5 { margin: 0 0 10px; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); font-family: var(--sans); } p { margin: 0 0 14px; } a { color: var(--gold-up); text-decoration-color: rgb(227 187 60 / 0.35); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } .lede { max-width: 68ch; font-size: 17px; color: var(--muted); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } .skip { position: absolute; left: -9999px; padding: 10px 16px; background: var(--gold); color: var(--ink-900); border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; z-index: 99; } .skip:focus { left: 0; top: 0; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .top { position: sticky; top: 0; z-index: 40; background: rgb(19 13 6 / 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .top-in { display: flex; align-items: center; gap: 18px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--parchment); letter-spacing: 0.4px; white-space: nowrap; } .brand img { display: block; border-radius: 4px; } .topnav { display: flex; gap: 4px; margin-left: auto; } .topnav a { padding: 7px 12px; font-size: 14px; color: var(--muted); text-decoration: none; border-radius: var(--radius-sm); } .topnav a:hover { color: var(--parchment); background: rgb(255 255 255 / 0.05); } .topnav a.on { color: var(--gold-up); background: var(--gold-dim); } /* Discord mark in the header. It sits between the nav and the version pill and survives the 620px breakpoint below, where .topnav is dropped — on a phone the one link worth keeping in reach is the one that gets you a human. */ .discord-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; transition: color .12s, border-color .12s, background .12s; } .discord-btn:hover { color: #c9d2f5; border-color: rgb(136 152 235 / 0.55); background: rgb(88 101 242 / 0.14); } .discord-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .ver { padding: 3px 9px; font-size: 12px; font-weight: 600; color: var(--gold-up); background: var(--gold-dim); border: 1px solid rgb(201 162 39 / 0.3); border-radius: 100px; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font: 600 15px/1.2 var(--sans); text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-lg { padding: 14px 26px; font-size: 16px; } .btn-gold { color: var(--ink-900); background: linear-gradient(180deg, var(--gold-up), var(--gold)); border-color: #8c6f1a; } .btn-gold:hover { background: linear-gradient(180deg, #f0ca4d, var(--gold-up)); } .btn-plain { color: var(--parchment); background: var(--ink-600); border-color: var(--line-up); } .btn-plain:hover { background: var(--ink-700); border-color: var(--gold); } .btn-ghost { color: var(--parchment); background: transparent; border-color: var(--line-up); } .btn-ghost:hover { background: rgb(255 255 255 / 0.05); border-color: var(--gold); } .btn-link { display: block; padding: 3px 0; font-weight: 400; font-size: 14px; color: var(--muted); background: none; border: 0; text-align: left; } .btn-link:hover { color: var(--gold-up); transform: none; } /* ⚠ AN UNSET LINK MUST LOOK UNSET. config.js leaves TODO placeholders and the build turns each into one of these: visibly inert, labelled, not clickable. A dead-looking button is a question; a live-looking button that goes nowhere is a lost sale. */ .btn-todo { flex-direction: column; gap: 2px; color: var(--muted-dim); background: rgb(255 255 255 / 0.03); border: 1px dashed var(--line-up); cursor: not-allowed; } .btn-todo:hover { transform: none; } .btn-todo small { font-size: 10px; font-weight: 400; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.8; } .btn-link.btn-todo { display: block; border: 0; border-bottom: 1px dashed var(--line-up); background: none; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding: clamp(48px, 9vw, 104px) 0 clamp(36px, 6vw, 68px); } .hero-in { max-width: 920px; } .hero h1 { background: linear-gradient(180deg, #fff8e2, #d9bd73); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lede { font-size: clamp(17px, 2vw, 20px); color: var(--text); opacity: 0.86; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } /* -------------------------------------------------------------------------- Preview -------------------------------------------------------------------------- */ section { padding: clamp(44px, 7vw, 86px) 0; } .preview { border-top: 1px solid var(--line); } /* ⚠ ONE COLUMN. A jump rail used to sit beside the frame and it duplicated the panel's own rail, item for item — see the note in build.js. The frame now takes the full column, capped so the panel is not stretched far wider than it ever appears over the game. */ .prev-shell { max-width: 1080px; margin: 28px auto 14px; } /* ⚠⚠ THE STAGE PANS SIDEWAYS INSTEAD OF CRUSHING THE PANEL. MEASURED on a 390px phone before the change: the stage was 350px, and the panel's own layout still put its FIXED 208px tab rail beside the settings column, so the settings got 118px. Every card inside was shredded - which is what "renders horizontally on mobile" was describing. The rail does not shrink (208px at every frame width from 348 to 1000, all measured), so there is no width at which a phone can show both columns. Something has to give, and panning is the one option that keeps the text readable: scaling the whole frame down to 350/720 would put the panel's 11px type at roughly 5px. ⚠ overflow-y STAYS HIDDEN. The frame is a fixed-height window onto an internal scroller - see the note on #previewFrame - and letting the stage scroll vertically too would produce two nested vertical scrollbars fighting over the same gesture. */ /* ⚠ THE BORDER, RADIUS AND SHADOW MOVED OFF .prev-stage AND ONTO .prev-win. The chrome bar used to live inside the scroller, so the fake window's title bar slid away sideways whenever the panel was panned — and it is the only sensible home for the zoom controls. .prev-win is now the window; the stage is purely the scrolling viewport inside it. overflow:hidden keeps the stage's square corners from poking out through the rounded ones. */ .prev-win { background: var(--ink-800); border: 1px solid var(--line-up); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .prev-stage { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; background: var(--ink-800); } .prev-chrome { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: linear-gradient(180deg, var(--ink-600), var(--ink-700)); border-bottom: 1px solid var(--line); } /* ⚠ ONLY ONE margin-left:auto IN THIS BAR. Flexbox splits free space EQUALLY between auto margins, so a second one here would strand the zoom controls in the middle instead of at the right-hand end. */ .prev-zoomctl { display: flex; align-items: center; gap: 4px; margin-left: auto; } .prev-zoomctl[hidden] { display: none; } .prev-zoom-btn { width: 26px; height: 22px; font: 600 14px/1 inherit; color: var(--muted); background: rgb(255 255 255 / 0.07); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; } .prev-zoom-btn:hover { color: var(--ink-100, #fff); background: rgb(255 255 255 / 0.14); } .prev-zoom-btn:disabled { opacity: 0.35; cursor: default; } .prev-zoom-val { min-width: 40px; text-align: center; font-size: 12px; color: var(--muted-dim); font-variant-numeric: tabular-nums; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-up); } .dot:first-child { background: #8a4a3a; } .dot:nth-child(2) { background: #8a7a3a; } .dot:nth-child(3) { background: #4a6a3a; } /* ⚠ min-width:0 AND nowrap, OR THE TITLE WRAPS INTO THE ZOOM CONTROLS. A flex item will not shrink below its content width without min-width:0, so on a phone this title took two lines and pushed the chrome bar to 59px with the buttons floating beside a ragged second line. Measured, then fixed. */ .prev-chrome-t { margin-left: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted-dim); } /* ⚠ A FIXED HEIGHT, NOT AN AUTO ONE. The panel inside is a fixed-size internal scroller — that is how it behaves over the game, and it is what the rail's own sticky scrolling assumes. Letting the frame grow to its content would produce a 23,000px page and destroy the illusion. */ /* ⚠⚠⚠ 800px IS NOT A TASTE DECISION. IT MUST STAY ABOVE 720. ⚠⚠⚠ The extension's own stylesheet carries this, and it is CORRECT and must not be changed to suit this site - the panel can be dragged into a narrow corner of the game window, and there it should collapse: @media (max-width: 720px) { .gbui-nav { display: flex; overflow-x: auto; } <- rail goes .gbui-navgroup { display: none; } <- COMBAT etc } THE FRAME USED TO BE EXACTLY 720px WIDE, AND `max-width: 720px` IS INCLUSIVE. So the preview sat precisely ON that breakpoint and ALWAYS got the collapsed layout: the category rail rendered as one long horizontal strip of 28 tabs instead of the vertical list, and every group heading (COMBAT, CHARACTER, TRADING...) was display:none. On a phone that made the preview close to unnavigable, and it looked like a mobile bug rather than what it was - this site picking the one width that breaks it. Measured at the old 720: rail `display:flex`, every tab on ONE row at y=59, x = 15, 127, 230, 321, 450, 597... At 1078 (desktop): rail `display:block`, every tab at x=11 with increasing y. Same markup, same stylesheet. 800 leaves 80px of headroom so nobody lands on the edge again. The site build ASSERTS this against the extension's real breakpoint and FAILS if the floor ever drops to or below it - see the check in Site/build/build.js. ⚠ A FLOOR, NOT A MEDIA QUERY, still: the stage scrolls at EVERY width where it would otherwise squeeze - phone, small tablet, narrow desktop window - instead of only under whichever number someone guessed. On a full-width desktop the floor is never reached and no scrollbar appears. ⚠ THE FRAME IS EXACTLY AS WIDE AS ITS CONTENT, WHICH IS WHY TOUCH WORKS. The document inside has no horizontal overflow of its own, so a sideways swipe cannot be swallowed by the iframe and chains out to the stage, while vertical swipes still scroll the panel's internal scroller. Making the iframe wider than its content, or pointer-events:none, would each break one half of that. */ /* ⚠ ZOOM IS A transform, NOT A WIDTH CHANGE, AND THAT IS THE WHOLE POINT. Scaling the frame down must NOT narrow the document inside it, or the panel would cross its own 720px rail-collapse breakpoint and go back to being a horizontal strip — the exact bug this release fixed. A transform keeps the inner viewport at --prev-base and simply draws it smaller, so the rail stays vertical at every zoom level. .prev-zoom exists because a transform does not change layout size: without a wrapper carrying the SCALED dimensions, the stage would still think the panel were full size and would scroll as far as ever. --prev-base is set by site.js to the frame's real width. The 100% fallback is for no-JS: the frame then fills the stage and min-width still makes it pannable, which is the old behaviour rather than a broken one. ⚠⚠ THE HEIGHT IS A VARIABLE BECAUSE IT IS NOT ONE NUMBER. It is 820px here, 620px under 900px wide and 540px under 620px. The first cut of the zoom wrapper hard-coded 820 and left 116px of dead black space below the panel on a phone, where the frame is really 540 — measured, not guessed. Two copies of a number is exactly how the 720px collision above happened, so the wrapper and the frame now read the SAME property and the media queries below set only that. */ .prev-win { --prev-frame-h: 820px; } .prev-zoom { width: calc(var(--prev-base, 100%) * var(--prev-z, 1)); height: calc(var(--prev-frame-h) * var(--prev-z, 1)); } #previewFrame { display: block; width: var(--prev-base, 100%); min-width: 800px; height: var(--prev-frame-h); border: 0; background: #241607; transform: scale(var(--prev-z, 1)); transform-origin: 0 0; } .prev-hint { max-width: 78ch; margin: 0 0 14px; font-size: 13.5px; color: var(--muted-dim); } /* ⚠ NO MEDIA QUERY HERE ANY MORE, AND THAT IS THE POINT. This used to be `@media (max-width: 775px)`, a number derived by hand from the frame floor: the stage runs ~55-57px narrower than the viewport, so a 720px floor was crossed at a viewport of about 775. It had already been wrong once (the first draft said 780 and promised a swipe in the 776-780 band where nothing moves), and the moment the floor moved from 720 to 800 it was silently wrong again - the whole 776-855 band would have been scrollable with nothing telling anyone. The honest condition is not a viewport width at all. It is "is the stage actually scrollable", which only the browser knows, so site.js measures it and sets .prev-pannable on . That stays correct through any future change to the floor, the wrap width or the padding, with nothing to re-derive. Default is HIDDEN: if the script never runs, the page loses a hint rather than telling people to swipe something that does not move. */ .prev-hint-narrow { display: none; } body.prev-pannable .prev-hint-narrow { display: inline; color: var(--muted); } .safety { max-width: 78ch; margin: 0; padding: 13px 16px; font-size: 14px; color: var(--muted); background: rgb(125 187 74 / 0.06); border: 1px solid rgb(125 187 74 / 0.22); border-left: 3px solid var(--on); border-radius: var(--radius-sm); } .safety b { color: var(--on); } /* -------------------------------------------------------------------------- Features -------------------------------------------------------------------------- */ .features { border-top: 1px solid var(--line); } .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-top: 30px; } .feat { display: flex; flex-direction: column; padding: 22px; background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border: 1px solid var(--line); border-radius: var(--radius); } .feat:hover { border-color: var(--line-up); } .feat header { margin-bottom: 10px; } .feat h3 { color: var(--gold-up); } .feat-lead { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--parchment); } .feat p { font-size: 14.5px; color: var(--muted); } .feat-panels { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; padding: 0; list-style: none; } .feat-foot { margin: auto 0 0; font-size: 12px; color: var(--muted-dim); } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font: 500 12.5px/1.3 var(--sans); color: var(--text); background: rgb(255 255 255 / 0.05); border: 1px solid var(--line-up); border-radius: 100px; cursor: pointer; } .chip:hover { color: var(--parchment); background: var(--gold-dim); border-color: var(--gold); } .chip.on { color: var(--ink-900); background: var(--gold); border-color: var(--gold); font-weight: 600; } .chip-n { font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.7; } /* -------------------------------------------------------------------------- Install -------------------------------------------------------------------------- */ .install { border-top: 1px solid var(--line); } .browsers { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin: 28px 0 30px; } .browser { padding: 18px; background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--line-up); } .browser p { margin: 0; font-size: 14px; color: var(--muted); } .browser h4 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .bstat { padding: 2px 8px; font: 600 10px/1.6 var(--sans); letter-spacing: 0.7px; text-transform: uppercase; border-radius: 100px; } .browser-recommended { border-top-color: var(--on); } .browser-recommended .bstat { color: #0e1a06; background: var(--on); } .browser-works { border-top-color: var(--warn); } .browser-works .bstat { color: #1a1206; background: var(--warn); } .browser-blocked { border-top-color: var(--stop); } .browser-blocked .bstat { color: #1f0a06; background: var(--stop); } /* "soon" is neither a warning nor a problem — it is an announcement, so it gets the page's own gold rather than a traffic-light colour. */ .browser-soon { border-top-color: var(--gold); } .browser-soon .bstat { color: #15100a; background: var(--gold); } .steps { max-width: 72ch; margin: 0 0 24px; padding-left: 22px; color: var(--muted); } .steps li { margin-bottom: 8px; padding-left: 4px; } .steps li::marker { color: var(--gold); font-weight: 700; } .install-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .pricing { border-top: 1px solid var(--line); } /* 24px of it used to come from .curswitch sitting above; the switch is gone. */ .plans { margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 13px; } .plan { display: flex; flex-direction: column; padding: 20px 18px; background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border: 1px solid var(--line); border-radius: var(--radius); } .plan-pop { border-color: var(--gold); box-shadow: 0 0 0 1px rgb(201 162 39 / 0.25), var(--shadow); } .plan-free { border-style: dashed; border-color: rgb(125 187 74 / 0.4); } .plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 26px; } .plan-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .tag { padding: 2px 7px; font: 700 9.5px/1.6 var(--sans); letter-spacing: 0.6px; text-transform: uppercase; border-radius: 100px; white-space: nowrap; } .tag-free { color: #0e1a06; background: var(--on); } .tag-pop { color: var(--ink-900); background: var(--gold); } .tag-save { color: var(--gold-up); background: var(--gold-dim); border: 1px solid rgb(201 162 39 / 0.35); } .plan-price { margin: 14px 0 0; font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--parchment); font-variant-numeric: tabular-nums; } .plan-perday { min-height: 18px; font-size: 11.5px; color: var(--muted-dim); font-variant-numeric: tabular-nums; } .plan-blurb { margin: 12px 0 16px; font-size: 13.5px; color: var(--muted); } .plan .btn { margin-top: auto; width: 100%; } .plan-note { margin: 9px 0 0; font-size: 11.5px; color: var(--muted-dim); text-align: center; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .qas { max-width: 80ch; margin-top: 26px; } .qa { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: center; gap: 10px; padding: 15px 0; font-family: var(--serif); font-size: 17px; color: var(--parchment); cursor: pointer; list-style: none; } .qa summary::-webkit-details-marker { display: none; } .qa summary::before { content: "+"; flex: none; width: 20px; height: 20px; margin-top: 1px; font: 400 17px/18px var(--sans); text-align: center; color: var(--gold); border: 1px solid rgb(201 162 39 / 0.4); border-radius: 50%; } .qa[open] summary::before { content: "−"; } .qa summary:hover { color: var(--gold-up); } .qa p { margin: 0 0 16px 30px; font-size: 15px; color: var(--muted); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .foot { margin-top: 20px; padding: 42px 0 26px; background: var(--ink-800); border-top: 1px solid var(--line); } .foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; } .foot-ver { margin: 8px 0 0; font-size: 13px; color: var(--muted-dim); } .foot-col h5 { color: var(--gold); opacity: 0.85; } .disclaimer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); } .disclaimer p { max-width: 86ch; font-size: 12.5px; color: var(--muted-dim); } .disclaimer b { color: var(--muted); } .copy { margin: 10px 0 0; } /* -------------------------------------------------------------------------- Narrow screens. The preview is the part that suffers most: a 208px rail plus a settings panel does not fit a phone, and the extension itself is a desktop tool. So below 900px the frame simply gets shorter, rather than pretending a phone is a good place to use a desktop settings panel. -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .foot-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .prev-win { --prev-frame-h: 620px; } } @media (max-width: 620px) { .topnav { display: none; } .discord-btn { margin-left: auto; } .hero-cta .btn, .install-cta .btn { width: 100%; } .plans { grid-template-columns: 1fr; } .prev-win { --prev-frame-h: 540px; } .foot-in { grid-template-columns: 1fr; gap: 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- legal.html — terms, privacy and refunds on one page Measure is capped at 72ch. Legal text is the one thing on this site people actually have to read through rather than scan, and a 1200px line of it is how a page gets skipped instead of read. -------------------------------------------------------------------------- */ .legal-in { max-width: 820px; padding-top: 48px; padding-bottom: 64px; } .legal h1 { margin: 0 0 12px; } .legal .lede { max-width: 72ch; } .legal-meta { margin: 0 0 28px; padding-bottom: 20px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); } /* Matches the .btn-todo treatment on the front page: an unset field is loud here rather than printing the literal word TODO at a paying customer. */ .legal-todo { padding: 1px 7px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--stop); border: 1px dashed var(--stop); border-radius: 100px; } .legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; } .legal-toc a { padding: 7px 14px; font-size: 14px; color: var(--parchment); text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: 100px; } .legal-toc a:hover { color: var(--gold-up); border-color: var(--gold); } /* scroll-margin so an #anchor jump does not land the heading under the sticky header. */ /* ⚠ RESET THE PADDING THE GLOBAL `section` RULE GIVES THIS. Line ~212 sets `section { padding: clamp(44px, 7vw, 86px) 0 }` for the HOMEPAGE's big bands, and .legal-sec is a
, so it was inheriting that top AND bottom. Stacked with the 44px margin below, the gap between one section's last line and the next heading was padding-bottom + margin + padding-top = up to 216px of nothing on a wide screen. The legal page is a document, not a landing page; it wants one modest gap, not three. */ .legal-sec { margin: 0 0 36px; padding: 0; scroll-margin-top: 80px; } .legal-sec h2 { margin: 0 0 18px; padding-bottom: 10px; font-size: 26px; border-bottom: 1px solid var(--line); } .legal-sec h3 { margin: 24px 0 6px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--gold-up); letter-spacing: .2px; } .legal-sec p { max-width: 72ch; margin: 0; color: var(--muted); line-height: 1.7; } .legal-foot { max-width: 72ch; margin: 48px 0 0; padding-top: 20px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); } .legal-foot a { color: var(--gold-up); } .brand-link { text-decoration: none; }