/* Alenya's Guides - site styles --------------------------------------------------------------------------- Plain CSS. No build step, no framework. Every colour on the site comes from the custom properties below, so a skin change is one attribute on . The four skins are the same four that ship in the addon. */ :root, [data-skin="parchment"] { --bg: #16130d; --panel: #211a10; --rim: #6b5224; --text: #d2bd95; --acc: #f0cc6a; --cur: #3a2c10; } [data-skin="slate"] { --bg: #101519; --panel: #172029; --rim: #37505e; --text: #bcccd4; --acc: #8fd6e6; --cur: #173039; } [data-skin="crimson"] { --bg: #181010; --panel: #231413; --rim: #7a2a22; --text: #dbbab4; --acc: #d8422e; --cur: #3c1511; } /* The Class skin takes its accent from a CSS variable that the skin script rewrites as you cycle through the nine classes. */ [data-skin="class"] { --bg: #131313; --panel: #1c1c1c; --rim: var(--class-hex, #c79c6e); --text: #cfcfcf; --acc: var(--class-hex, #c79c6e); --cur: var(--class-cur, #2b2119); } :root { /* Headings stay the same warm off-white in every skin. */ --head: #f2ead9; --display: Georgia, "Times New Roman", serif; --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wrap: 1160px; --pad: 48px; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; } a { color: var(--acc); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--cur); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 3px; } /* height:auto is load-bearing. The images carry width and height attributes so the page does not jump about while they load, but once CSS overrides the width those attributes go on supplying the height, and the picture gets stretched. Every screenshot on the page was squashed until this was here. */ img { max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--display); color: var(--head); font-weight: 400; margin: 0; line-height: 1.15; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--acc); color: var(--bg); padding: 10px 16px; border-radius: 3px; } /* ---------------------------------------------------------------- nav ---- */ .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--pad); background: color-mix(in srgb, var(--bg) 87%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, var(--rim) 27%, transparent); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; color: var(--acc); } .brand:hover { text-decoration: none; } .brand img { width: 40px; height: 40px; border-radius: 50%; transform: scaleX(-1); box-shadow: 0 0 0 1px var(--rim); } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; } /* :not(.btn) matters here. Without it this rule outranks .btn on specificity and paints the "Get the addon" label gold on a gold background. */ .nav-links a:not(.btn) { color: var(--text); } /* The announcement strip under the nav (design of 2026-09-17). One line, the whole strip is the link, wraps to two lines on a phone. */ .strip { display: block; background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 80%, transparent)); color: var(--bg); text-decoration: none; } .strip:hover { text-decoration: none; filter: brightness(1.05); } .strip-inner { max-width: var(--wrap); margin: 0 auto; padding: 11px var(--pad); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; font-size: 13.5px; font-weight: 600; } .strip-new { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; background: var(--bg); color: var(--acc); padding: 3px 9px; border-radius: 100px; } .strip-cta { font-size: 13px; font-weight: 700; text-decoration: underline; } /* The "Now released" badge above the hero eyebrow. */ .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--bg); background: var(--acc); padding: 6px 12px; border-radius: 100px; margin-bottom: 16px; } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); } /* ------------------------------------------------------------- buttons --- */ .btn { display: inline-block; padding: 13px 26px; border-radius: 3px; font-size: 15px; font-weight: 600; background: var(--acc); color: var(--bg); border: 1px solid var(--acc); cursor: pointer; font-family: inherit; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--rim); font-weight: 400; } .btn-ghost:hover { border-color: var(--acc); color: var(--acc); } .btn-sm { padding: 9px 18px; font-size: 14px; } /* -------------------------------------------------------------- layout --- */ .section { padding-top: 60px; padding-bottom: 90px; border-top: 1px solid color-mix(in srgb, var(--rim) 20%, transparent); } .section > h2 { font-size: 32px; text-align: center; } .lede { text-align: center; max-width: 600px; margin: 14px auto 0; font-size: 15px; } .muted { color: color-mix(in srgb, var(--text) 60%, transparent); } .small { font-size: 12.5px; } .panel { background: var(--panel); border: 1px solid color-mix(in srgb, var(--rim) 33%, transparent); border-radius: 8px; } /* ---------------------------------------------------------------- hero --- */ .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 100px; } .eyebrow { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc); margin-bottom: 18px; } .hero h1 { font-size: 52px; } /* Named rather than ".hero p". A bare element selector inside a section outranks a plain class, so styling every paragraph in the hero silently overrode .eyebrow, .small and .caption and painted all four at lead size. */ .hero-lead { font-size: 17px; line-height: 1.7; max-width: 480px; margin: 22px 0 0; } .cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } /* Screenshots are fixed-pixel captures out of the game. They shrink to fit a narrow window, but they never grow past the size they were taken at, because an upscaled game screenshot just goes soft. The frame shrink-wraps the picture so no border is left hanging off the edge of it. */ .shot { border-radius: 8px; overflow: hidden; border: 1px solid var(--rim); display: block; width: fit-content; max-width: 100%; } .shot img { display: block; width: auto; max-width: 100%; } .hero-shot { box-shadow: 0 20px 60px -20px #000; } .caption { font-size: 11.5px; color: color-mix(in srgb, var(--text) 47%, transparent); margin-top: 6px; } /* ------------------------------------------------------------ features --- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 48px; } .card { border-radius: 8px; background: color-mix(in srgb, var(--panel) 33%, transparent); overflow: hidden; } .card figure { margin: 0; height: 150px; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--rim) 33%, transparent); display: flex; align-items: center; justify-content: center; } /* Same rule in the feature cards: centred in the 150px band, never enlarged past its own size. The crops vary a lot in shape, so they are sized to fit rather than made to fill. */ .card figure img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .card .mono { font-family: var(--display); font-size: 38px; color: var(--acc); } .card-body { padding: 22px; } .card-body h3 { font-family: var(--body); font-size: 15.5px; font-weight: 600; } .card-body p { font-size: 13.5px; margin: 6px 0 0; } /* The difficulty key sits under the guide-list shot: it describes how guides are coloured in the picker, not how individual steps are coloured. */ .legend-strip { margin-top: 28px; padding: 16px 20px; border-radius: 8px; background: color-mix(in srgb, var(--panel) 33%, transparent); display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; font-size: 12px; } .legend-strip span { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } /* --------------------------------------------------------------- model --- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; } .model-card { display: block; padding: 26px 22px; color: inherit; } .model-card:hover { text-decoration: none; border-color: var(--acc); } .model-card h3 { font-size: 17px; color: var(--acc); } .model-card p { font-size: 13.5px; margin: 10px 0 0; } .model-card .tag { display: inline-block; margin-top: 14px; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: color-mix(in srgb, var(--text) 60%, transparent); } /* --------------------------------------------------------------- skins --- */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; } .skin-card { cursor: pointer; border-radius: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rim) 33%, transparent); background: var(--panel); padding: 0; text-align: left; color: inherit; font: inherit; display: block; width: 100%; } .skin-card[aria-pressed="true"] { border-color: var(--swatch); } /* These two are spans inside a