/* ========================================================================== SKlone design system (sk-) -------------------------------------------------------------------------- Purely additive. Nothing here overrides an old-design selector, and nothing outside this file references var(--sk-*), so linking it on a page that carries no sk- classnames cannot change how that page renders. The old .pref-* / .members-table rules in general.css stay exactly as they are and keep serving every page that has not migrated yet. This file is what they migrate TO, one page at a time. Three rules govern everything below: 1. ASSUME HOSTILE BASE STYLES. These components land on pages already loading _table.css, _main.css, _typography.css and Bootstrap. Each component resets what those impose on it, scoped under its own class — never by editing the base stylesheet, which is the old design and off-limits. Resets use :where() so they carry ZERO specificity: they beat bare element selectors like _table.css's `td`, while still losing to any deliberate page-level override. No !important needed. 2. NO BOOTSTRAP. No selector references row, col-*, card, container, form-group, form-control or any other Bootstrap classname. This matters concretely: Auth.Master loads BS4, AuthNew.Master loads BS5, and ModulesController.ascx renders under both. 3. SOLID EDGES. Every border, divider and track is a solid colour. The old system tinted them at 0.08-0.20 alpha, which measured 1.1:1-1.3:1 against its own surface. Alpha also drifts, because the fixed planets.jpg body image scrolls under the cards' backdrop blur. Baseline notes (2026), i.e. why this file looks the way it does: - color-mix(), :has(), :where() and container queries are all Baseline and the first three are used below. Native nesting is Baseline too and is DELIBERATELY NOT USED — see the next note. - NESTING IS NOT USED ANYWHERE IN THIS FILE, and adding it back is a bug, not a style choice. A browser without nesting support does not skip just the nested selector: it drops the WHOLE nested block, because the parser hits `& > * {` inside a declaration list, treats it as a bad declaration and recovers by skipping to the matching brace. That made the Status page unusable on a mobile Safari below 16.5, which an iPhone 7 or older can never get. Write every rule flat and in full — which also means grepping for a classname finds its definition. - CASCADE LAYERS ARE DELIBERATELY NOT USED. Unlayered styles beat layered ones, and every old stylesheet here is unlayered — putting this system in a @layer would make it lose to the CSS it is replacing. Exactly backwards. - CONTAINER QUERIES ARE DELIBERATELY NOT USED on cards. container-type makes an element the containing block for fixed-position descendants, and this app renders a position:fixed modal (.modal-overlay) inside cards. It would trap the overlay inside the card. See SK_DESIGN_SYSTEM.md for the token reference, the old -> new name map, the "classnames only" policy, and the page-migration pattern. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- On :root deliberately. Custom properties are inert until referenced, and nothing outside this system references var(--sk-*) — so a global declaration is the safest placement, not the riskiest, and a component then works anywhere without needing a wrapper element. Ratios are measured against --sk-surface-card composited over .main-body's #171b27, i.e. rgb(19,26,40). -------------------------------------------------------------------------- */ :root { /* Palette ------------------------------------------------------------------ Every hue the components use, as a raw value written once, here. The tokens below say what a colour MEANS (--sk-accent, --sk-res-pop, --sk-alert ...) and point at a palette entry, and components read those. A player theme overrides palette entries or meanings on :root[data-sk-palette=""] - see "Player themes" in SK_DESIGN_SYSTEM.md. Named for the colour rather than a meaning, so two meanings can share one entry and be split later by pointing one of them elsewhere. Tailwind's names where the value is Tailwind's; the rest by the names the colour standard gives them (the accent blues keep "accent", the app's one action colour). Neutrals (surfaces, text, borders) are not here: they are already one token each and a theme overrides them directly. */ --sk-pal-accent: #447cff; --sk-pal-accent-light: #5b8cff; --sk-pal-accent-mid: #3b6fe0; --sk-pal-blue-800: #1e40af; --sk-pal-blue-900: #1e3a8a; --sk-pal-amber-300: #fcd34d; --sk-pal-amber-400: #fbbf24; --sk-pal-amber-700: #b45309; --sk-pal-amber-900: #78350f; --sk-pal-yellow-500: #eab308; --sk-pal-yellow-600: #ca8a04; --sk-pal-cyan-300: #67e8f9; --sk-pal-cyan-400: #22d3ee; --sk-pal-cyan-700: #0e7490; --sk-pal-cyan-900: #164e63; --sk-pal-purple-300: #d8b4fe; --sk-pal-purple-500: #a855f7; --sk-pal-violet-700: #6d28d9; --sk-pal-violet-900: #4c1d95; --sk-pal-green-300: #86efac; --sk-pal-green-500: #22c55e; --sk-pal-green-600: #16a34a; --sk-pal-red-300: #fca5a5; --sk-pal-red-400: #f87171; --sk-pal-red-500: #ef4444; --sk-pal-red-600: #dc2626; --sk-pal-red-700: #b91c1c; --sk-pal-red-900: #7f1d1d; --sk-pal-mint: #71f4a8; --sk-pal-rose: #fb6a82; --sk-pal-scarlet: #ff5542; --sk-pal-magenta: #fb60dc; --sk-pal-orange: #fc9840; --sk-pal-gold: #fcca40; --sk-pal-purple: #c28dfc; --sk-pal-blue: #529dff; --sk-pal-lime: #b9e34a; --sk-pal-teal: #3fd9c8; --sk-pal-steel: #c3cfe2; --sk-pal-unit-red: #ff6257; --sk-pal-unit-yellow: #f4e04d; --sk-pal-peach: #ffd1ae; --sk-pal-azure: #3ba2ff; /* Base hues. Every tint below is derived from these with color-mix(), so an accent change propagates instead of needing 12 rgba() literals updated. */ --sk-accent: var(--sk-pal-accent); /* 4.62:1 safe for text and icons */ --sk-accent-hover: var(--sk-pal-accent-light); /* 5.51:1 */ --sk-success: var(--sk-pal-green-500); /* 7.64:1 */ --sk-danger: var(--sk-pal-red-400); /* 6.29:1 lightened from #ef4444 to clear AA as text */ --sk-warning: var(--sk-pal-amber-400); /* 10.43:1 */ /* Faction hues ------------------------------------------------------------- A kingdom-war palette, not decoration: each hue means something, so a player learns to read a panel's colour before its heading. Gold is taken from the live Mine Gold styling (probe-styles.css:368) rather than invented, so migrated pages keep the identity they already have. gold economy, quick actions, newbie features ion scanning, intelligence plasma premium, magic toxic growth, production, success alert destruction, danger These say which KIND of panel something is. A reading about a subject - one of the eight buildings or its resource, land, missiles, networth, time, research, offense, defense, an alliance relation or a unit group - takes that subject's hue instead (see "Concept hues" and "Subject hues" below), never a faction hue. Every value below is a light tint chosen to clear 4.5:1 as text on the card surface - these are foreground colours, not fills. */ --sk-gold: var(--sk-pal-amber-300); --sk-ion: var(--sk-pal-cyan-300); --sk-plasma: var(--sk-pal-purple-300); --sk-toxic: var(--sk-pal-green-300); --sk-alert: var(--sk-pal-red-300); /* The saturated end of each hue: stripes, gradients and glows only, never text. */ --sk-gold-deep: var(--sk-pal-yellow-500); --sk-ion-deep: var(--sk-pal-cyan-400); --sk-plasma-deep: var(--sk-pal-purple-500); --sk-toxic-deep: var(--sk-pal-green-500); --sk-alert-deep: var(--sk-pal-red-500); /* Concept hues ------------------------------------------------------------ One colour per building and the resource it produces, so population is the same green on every page it appears - a pill on Buildings, a card on Status, the tint behind the Residences artwork. Chosen, not derived. Population, Barracks and Income keep their building's artwork colour (sampled from the artwork once, when the tokens were chosen). The rest are picked to be told apart and to group by meaning: Barracks, ASB and ACH are one family of reds - rose, scarlet, magenta - because all three are military housing; Power is orange; Probes blue; Training the purple left over, since nothing reads less often. Foreground colours like the faction tints above: every one clears 4.5:1 on the card surface. Applied with the sk-hue- classes. */ --sk-res-pop: var(--sk-pal-mint); /* Residences 12.6:1 */ --sk-res-barracks: var(--sk-pal-rose); /* Barracks 6.2:1 */ --sk-res-asb: var(--sk-pal-scarlet); /* ASB 5.5:1 */ --sk-res-ach: var(--sk-pal-magenta); /* ACH 6.5:1 */ --sk-res-power: var(--sk-pal-orange); /* Power plants 8.0:1 */ --sk-res-income: var(--sk-pal-gold); /* Star mines 11.3:1 */ --sk-res-training: var(--sk-pal-purple); /* Training camps 7.1:1 */ --sk-res-probes: var(--sk-pal-blue); /* Probe factories 6.3:1 */ /* Subject hues -------------------------------------------------------------- The same idea for everything else a reading can be about. Some share a colour on purpose, because they rarely meet on one page: research and modules take training's purple, time takes networth's steel, offense is war's red and defense NAP's cyan. Each still has its own meaning, so splitting two apart is one line here. */ --sk-res-land: var(--sk-pal-lime); /* 11.7:1 */ --sk-res-missile: var(--sk-pal-teal); /* 9.9:1 */ --sk-res-networth: var(--sk-pal-steel); /* 11.1:1 networth, rank, scores */ --sk-subject-time: var(--sk-pal-steel); /* ticks, timers, round end */ --sk-subject-research: var(--sk-pal-purple); /* research, scientists, modules */ --sk-subject-offense: var(--sk-pal-red-300); --sk-subject-defense: var(--sk-pal-cyan-300); /* Military / training-room pages, and the nav's fist that leads there: one red for the page's header, its CTAs and the nav icon. */ --sk-subject-military: var(--sk-pal-red-500); /* Modules, and the nav's atom that leads there (general.css's #206BDF, moved onto the nearest palette step). */ --sk-subject-modules: var(--sk-pal-accent-mid); /* Alliance relations, one mapping for every page that shows them. */ --sk-rel-war: var(--sk-pal-red-300); --sk-rel-barricade: var(--sk-pal-green-300); --sk-rel-nap: var(--sk-pal-cyan-300); --sk-rel-ally: var(--sk-pal-gold); /* Kingdom state icons (Growth / Mobilisation / Offensive / Defensive) - the game's own colours, kept EXACTLY as the pre-sk Sector View had them (general.css .growth/.mobilisation/.offensive/.defensive). Not palette steps on purpose: players read a state by these colours. */ --sk-kd-state-growth: #006400; /* darkgreen */ --sk-kd-state-mobilisation: #8b0000; /* darkred */ --sk-kd-state-offensive: #98fb98; /* palegreen */ --sk-kd-state-defensive: #00ffff; /* aqua */ /* Unit groups. Soldiers and defensive units keep the colours their artwork was sampled at; offensive units are a stronger red and hybrid a yellow between them; scientists (growth) are research. The artwork itself is recoloured to these in the browser (sk-art-recolour.js). */ --sk-unit-soldiers: var(--sk-pal-peach); /* 12.4:1 */ --sk-unit-defensive: var(--sk-pal-azure); /* 6.5:1 */ --sk-unit-hybrid: var(--sk-pal-unit-yellow); /* 12.9:1 */ --sk-unit-offensive: var(--sk-pal-unit-red); /* 5.9:1 */ --sk-unit-growth: var(--sk-subject-research); /* Gradients for primary calls to action. The gold one mirrors the live Mine Gold button (probe-styles.css:422) so the system absorbs the existing look instead of competing with it. */ --sk-grad-accent: linear-gradient(135deg, var(--sk-pal-accent-mid) 0%, var(--sk-pal-blue-900) 100%); /* white 4.63:1 at the light end */ --sk-grad-gold: linear-gradient(135deg, var(--sk-pal-amber-700) 0%, var(--sk-pal-amber-900) 100%); /* live CTA starts #ca8a04 = 2.94:1 with white; this is 5.02:1 */ --sk-grad-ion: linear-gradient(135deg, var(--sk-pal-cyan-700) 0%, var(--sk-pal-cyan-900) 100%); /* 5.36:1 */ --sk-grad-plasma: linear-gradient(135deg, var(--sk-pal-violet-700) 0%, var(--sk-pal-violet-900) 100%); /* 7.10:1 */ --sk-grad-alert: linear-gradient(135deg, var(--sk-pal-red-700) 0%, var(--sk-pal-red-900) 100%); /* 6.47:1 */ /* Coloured elevation. A CTA on a starfield needs to sit above it, and a hue glow does that without another border. */ --sk-glow-accent: 0 4px 14px color-mix(in srgb, var(--sk-pal-accent) 35%, transparent); --sk-glow-gold: 0 4px 14px color-mix(in srgb, var(--sk-pal-yellow-600) 35%, transparent); --sk-glow-ion: 0 4px 14px color-mix(in srgb, var(--sk-pal-cyan-400) 30%, transparent); --sk-glow-plasma: 0 4px 14px color-mix(in srgb, var(--sk-pal-purple-500) 32%, transparent); --sk-glow-alert: 0 4px 14px color-mix(in srgb, var(--sk-pal-red-600) 35%, transparent); /* Surfaces. Still glassmorphic — the blur is the design's character; only the borders stopped being transparent. */ /* 0.45, measured rather than chosen. The binding constraint is not text — over the brightest blurred region of planets.jpg the body copy still reads 12.8:1 at this alpha, and would hold past 0.20. It is --sk-border needing 3:1: at 0.72 it had headroom to spare, and the glass was doing far less work than the design intends. See --sk-border below, which moved one step to buy this. Because the card fill and .main-body are near-identical in luminance, dropping the alpha shifts the card over the DARK background by about one point of 8-bit value, so every ratio documented against rgb(19,26,40) still holds. */ /* The page itself. It had no token - the value lived only as a literal in scripts/_main.css (.main-body) - which meant nothing in the system could refer to the ground its surfaces composite against. Bootstrap needs it too: its --bs-body-bg default is #fff. */ --sk-surface-page: #171b27; /* The tooltip surface. Another value that only existed as a literal in general.css (rgba(16, 56, 148, 1)), with no token to refer to it. */ --sk-surface-tooltip: rgba(16, 56, 148, 1); --sk-surface-card: rgba(18, 25, 41, 0.45); --sk-surface-inner: rgba(2, 6, 23, 0.55); --sk-surface-table: rgba(15, 23, 42, 0.55); /* Lighter and near-opaque so a table header or input reads as a distinct plane. At rgba(30,41,66,.9) it measured 1.22:1 against the table body - the "raised" surface was not raised by luminance at all, only by its border. */ --sk-surface-raised: rgba(42, 58, 92, 0.96); /* Fields are RECESSED, not raised. Reusing --sk-surface-raised for inputs conflated two opposite affordances - a table header or resting tab sits above the card, a field you type into sits below it - and it did not pass: placeholder text landed at 4.42:1 and the field's own border at 2.66:1 against it. This is darker than the card on purpose, and measures text 18.1:1, placeholder 7.4:1, border 4.4:1, focus ring 5.0:1. */ --sk-surface-field: rgba(8, 13, 28, 0.90); --sk-surface-overlay: rgba(0, 0, 0, 0.65); /* For a control with NOTHING behind it - sitting on planets.jpg rather than on a card. Nearly opaque, because every wash in this system is measured against the card surface and a wash over a bright nebula is not a surface at all, it is a tint on a photograph. sk-pill has always used this value; the token exists so the next component that needs it copies a name instead of the number. Companion to sk-on-image, which does the same job for text. */ --sk-surface-on-image: rgba(11, 16, 33, 0.92); /* Same colour as sk-surface-on-image, fully opaque. For a piece that must not let anything behind it show through at all - #0b1021 is the exact same rgb(11,16,33), just without the 8% that lets the starfield bleed through at the edges. */ --sk-surface-on-image-solid: #0b1021; /* brightness() is doing real work, not styling. The card is 72% opaque over planets.jpg, whose brightness (after the page's dark gradient) runs 0-188. Over its bright regions the card composited to rgb(66,71,82) and every border fell under 2:1. Clamping the backdrop keeps the glass while making the surface predictable wherever a card lands on the image. */ --sk-blur: blur(10px) brightness(0.35) saturate(1.15); /* Borders and non-text UI. WCAG 1.4.11 wants >= 3.0:1 for anything you must perceive to operate a control. */ --sk-border: #6b7c93; /* 4.07:1 on the dark card, 3.15:1 over the image's brightest region. Was #64748b, which held 3.66:1 dark but fell to 2.82:1 over the bright regions once --sk-surface-card dropped to 0.45 - the one token that had to move to make the glass more transparent. */ --sk-border-accent: var(--sk-pal-accent-light); /* 5.51:1 was #3863ca, which fell to 1.70:1 over the image's bright regions */ --sk-border-strong: #94a3b8; /* 6.79:1 hover, focus ring, emphasis */ --sk-border-subtle: #3f4a5f; /* 1.95:1 DECORATIVE ONLY - never a control edge */ --sk-success-border: var(--sk-pal-green-600); /* 5.28:1 */ --sk-danger-border: var(--sk-pal-red-600); /* 3.61:1 */ /* Fills. Washes are never used as an edge — only as a background. */ --sk-wash-accent: color-mix(in srgb, var(--sk-accent) 16%, transparent); --sk-wash-accent-strong: color-mix(in srgb, var(--sk-accent) 30%, transparent); --sk-wash-success: color-mix(in srgb, var(--sk-success) 14%, transparent); --sk-wash-success-strong: color-mix(in srgb, var(--sk-success) 28%, transparent); --sk-wash-danger: color-mix(in srgb, var(--sk-danger) 14%, transparent); --sk-wash-danger-strong: color-mix(in srgb, var(--sk-danger) 28%, transparent); /* Text */ --sk-text: #f8fafc; /* 16.64:1 */ --sk-text-muted: #94a3b8; /* 6.79:1 replaces #787f88 (4.30:1, below AA) */ --sk-text-on-accent: #ffffff; /* ------------------------------------------------------------------ Bootstrap colour handoff. Bootstrap 5.3 drives every colour through --bs-* custom properties, so pointing those at our tokens makes Bootstrap render OUR palette instead of its own - .text-muted, .text-primary, .border-secondary, button and alert colours, all of it. No !important duel, no markup to change. This file loads last, so these beat Bootstrap's own :root. Nothing in the app sets data-bs-theme, so :root is enough. The -rgb triplets exist because Bootstrap composes them as rgba(var(--bs-primary-rgb), var(--bs-text-opacity)), and CSS cannot split a hex into channels. KEEP THEM IN SYNC with the hex tokens above - changing --sk-accent alone will leave every Bootstrap utility on the old colour. ------------------------------------------------------------------ */ --bs-primary: var(--sk-accent); --bs-primary-rgb: 68, 124, 255; /* #447cff, --sk-accent */ --bs-secondary: var(--sk-text-muted); --bs-secondary-rgb: 148, 163, 184; /* #94a3b8, --sk-text-muted */ --bs-secondary-color: var(--sk-text-muted);/* what .text-muted actually reads */ --bs-success: var(--sk-success); --bs-success-rgb: 34, 197, 94; /* #22c55e, --sk-success */ --bs-danger: var(--sk-danger); --bs-danger-rgb: 248, 113, 113; /* #f87171, --sk-danger */ --bs-warning: var(--sk-warning); --bs-warning-rgb: 251, 191, 36; /* #fbbf24, --sk-warning */ --bs-info: var(--sk-ion); --bs-info-rgb: 103, 232, 249; /* #67e8f9, --sk-ion */ --bs-light: var(--sk-text); --bs-light-rgb: 248, 250, 252; /* #f8fafc, --sk-text */ --bs-link-color: var(--sk-link); --bs-link-hover-color: var(--sk-link-hover); /* Bootstrap 5.3 ships a LIGHT theme by default - body #fff, text #212529, borders #dee2e6, emphasis #000. Any component reading those renders light-on-dark here: dropdown menus, modals, tooltips, popovers, tables. These are the structural half of the handoff. */ --bs-body-bg: var(--sk-surface-page); --bs-body-color: var(--sk-text); --bs-emphasis-color: var(--sk-text); --bs-secondary-bg: var(--sk-surface-inner); --bs-tertiary-bg: var(--sk-surface-card); --bs-tertiary-color: var(--sk-text-muted); --bs-border-color: var(--sk-border); --bs-border-color-translucent: var(--sk-border-subtle); --bs-heading-color: var(--sk-text); --bs-code-color: var(--sk-ion); --bs-highlight-bg: var(--sk-wash-accent); --bs-highlight-color: var(--sk-text); --bs-dark: var(--sk-surface-raised); --bs-form-valid-border-color: var(--sk-success-border); --bs-form-invalid-border-color: var(--sk-danger-border); /* --bs-white/-black deliberately left alone: they mean literal white and black, and overriding them would surprise anyone reading the markup. */ /* Links are their own colour, not the accent. --sk-accent was doing three jobs at once - primary action, link, and the "info" hue - and when everything is blue nothing reads as the action. Blue now means DO THIS; links get their own lighter tone; --sk-ion carries "informational". */ --sk-link: #93c5fd; /* 8.94:1 on the card surface */ --sk-link-hover: #bfdbfe; /* 11.71:1 */ /* Neutral ramp. Without one, every value between "muted" and "white" gets invented at the point of use - which is how #787f88, #b2bec3, #cbd5e1, #dfe6e9 and #e2e8f0 all ended up in general.css meaning roughly the same thing. Five steps, dark to light; use these instead of a new literal. */ --sk-neutral-1: #1d2436; /* raised fill on a dark surface */ --sk-neutral-2: #3f4a5f; /* decorative divider */ --sk-neutral-3: #64748b; /* structural border, 3.66:1 */ --sk-neutral-4: #94a3b8; /* muted text, 6.79:1 */ --sk-neutral-5: #cbd5e1; /* secondary text, 12.19:1 */ /* Typography. Matches the app's Verdana base (scripts/_typography.css) so a migrated component does not change typeface mid-page. --sk-text-min is a FLOOR, not a step. The old system dropped labels to 0.62rem and status text to 0.52rem under 768px (~10px and ~8px). The fluid sizes below clamp against that floor, which also removes the pile of font-size overrides the old system needed in its media query. --sk-text-dense is the deliberate exception, and it is opt-in. Some tables in this app carry more columns than 12px type can fit, and shortening the content does not always get there. Rather than lower the floor for everything -- --sk-text-min also sets sk-badge, sk-stat-label, sk-field-stack-label and sk-eyebrow, none of which are tables -- a table asks for it by name with sk-table--dense. */ /* Segoe UI first: every Windows player already has it, it needs no webfont download, and it is ~10% narrower than Verdana - real density back on data-heavy pages. Verdana stays as the fallback so nothing shifts on a machine without it. Caveat for migration: until a page is fully migrated it will show Segoe UI inside sk- components and Verdana around them. Migrate a page's visible text in one pass rather than leaving it half-and-half. */ /* A system stack: every entry is already installed on the platform, so there is no @font-face here and nothing to download. That is why only Orbitron has an @font-face below - it is a .ttf bundled in this repo, while these ship with the OS. Ordered by platform: Segoe UI (Windows), -apple-system (macOS/iOS), Roboto (Android), then Verdana as the universal fallback so a machine with none of them lands exactly where the old design already was. */ --sk-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Verdana, Geneva, Tahoma, sans-serif; --sk-font-heading: Orbitron-Regular, "Segoe UI", -apple-system, Roboto, Verdana, sans-serif; /* PINNED IN PIXELS, deliberately. No root font-size is set anywhere, so rem resolves against 16px while the app's body text is 13px (scripts/_typography.css) - a rem scale silently ran ~15% large next to old-design text. Pixels make the scale independent of that mismatch. Still fluid: each step grows with the viewport and bottoms out at the 12px floor. */ --sk-text-xxs: 11px; /* one step under --sk-text-min: a phone's cramped button row, opt-in */ --sk-text-min: 12px; --sk-text-dense: 8px; /* opt-in, tables only - see sk-table--dense */ --sk-text-xs: clamp(12px, 11.5px + 0.15vw, 12.5px); --sk-text-sm: clamp(12px, 11.4px + 0.2vw, 13.5px); --sk-text-base: clamp(13px, 12px + 0.3vw, 15px); --sk-text-lg: clamp(15px, 14px + 0.35vw, 17.5px); --sk-text-xl: clamp(17px, 15px + 0.5vw, 21px); --sk-text-2xl: clamp(19px, 17px + 0.7vw, 26px); --sk-weight-normal: 400; --sk-weight-medium: 500; --sk-weight-semibold: 600; --sk-weight-bold: 700; /* Spacing */ --sk-space-1: 4px; --sk-space-2: 8px; --sk-space-3: 12px; --sk-space-4: 16px; --sk-space-5: 20px; --sk-space-6: 24px; /* Clearance for something that sits OUTSIDE a component's own box and needs room made for it above - e.g. Modules' tab-actions flag, which sits on top of .sk-tabs via translateY, not inside its flow. Not on the same +4px rhythm as the rest of the scale; the next real use decides whether that gap ever gets filled in. */ --sk-space-7: 50px; /* Gutter and rhythm. Phone values here; the block after :root raises them above 768px to what the desktop always had. A layout container reads these instead of restating its spacing in a max-width block, so every page gets the same screen gutter, card padding and gap between cards. --sk-gutter screen edge to card edge (sk-page, legacy containers) --sk-card-pad card edge to content --sk-stack the gap between stacked cards */ --sk-gutter: var(--sk-space-2); --sk-card-pad: var(--sk-space-3); --sk-stack: var(--sk-space-3); /* Radius */ --sk-radius-sm: 6px; --sk-radius: 8px; --sk-radius-lg: 12px; /* The measure of a one-column action page: one card wide rather than the 1400px page. A list of rows with the name on the left and the buttons on the right loses the row across a wide monitor. Shared by Missile.aspx (missile.css) and Modules (sk-page--compact). */ --sk-compact-width: 900px; /* Elevation */ --sk-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); --sk-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); --sk-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.05); /* Motion */ --sk-transition: 0.2s ease; --sk-transition-slow: 0.3s ease; } /* Breakpoints. Spacing is mobile-first: the phone value is the rule, and a min-width: 768.02px block raises it (the .02 closes the gap a fractional zoom width would fall through between 768 and 769). max-width: 768px is for phone-only BEHAVIOUR - stacking, hiding, reflowing - never for restating a padding or a margin. */ @media (min-width: 768.02px) { :root { --sk-gutter: var(--sk-space-4); --sk-card-pad: var(--sk-space-6); --sk-stack: var(--sk-space-6); } } /* Tooltip and popover colours. These cannot live in :root. Bootstrap declares --bs-tooltip-* ON .tooltip itself, and a declaration on the element beats one inherited from :root, so a :root override is silently ignored. Bootstrap's own defaults then apply: --bs-tooltip-color: var(--bs-body-bg) -> our dark page colour --bs-tooltip-bg: var(--bs-emphasis-color) -> our near-white text colour which paints dark text on a light chip - inverted, and unreadable against the blue surface general.css gives .tooltip-inner. Declared here on the same element Bootstrap uses; this file loads last, so it wins the tie. --bs-tooltip-bg also colours the arrow: Bootstrap draws it with border-*-color: var(--bs-tooltip-bg). */ .tooltip { --bs-tooltip-color: var(--sk-text-on-accent); --bs-tooltip-bg: var(--sk-surface-tooltip); --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 300px; /* Above every overlay this file stacks: sk-menu 8500, sk-drawer 9000, the toast stack 9500, sk-modal 10000. Bootstrap's own 1080 put a tooltip on anything inside a drawer (Probe stats' figures) BEHIND the drawer - it opened, but nobody could see it. A tooltip is transient and follows the pointer, so it is the one thing that may cover them. */ z-index: 10100; } /* Legacy tables keep their own surface. Bootstrap paints every cell: background-color: var(--bs-table-bg) and --bs-table-bg defaults to var(--bs-body-bg), which our :root handoff points at --sk-surface-page. So each cell laid a solid #171b27 over the rgb(34, 34, 34) that scripts/_table.css gives the table, and the legacy look disappeared on the 31 elements carrying class="table". transparent lets the table's own background show through, which is what BS4 effectively did - it never painted cell backgrounds at all. The inset 9999px box-shadow in the same rule is harmless once this is set: it draws --bs-table-accent-bg, which is already transparent unless a striped or hover variant is in play. Those are mapped to our washes below so they read on a dark surface instead of Bootstrap's light-theme alphas. Declared on .table for the same reason as .tooltip above: Bootstrap declares these on the component, and a :root override would never apply. */ .table { --bs-table-bg: transparent; --bs-table-color: var(--sk-text); --bs-table-border-color: var(--sk-border); --bs-table-striped-color: var(--sk-text); --bs-table-striped-bg: var(--sk-wash-accent); --bs-table-hover-color: var(--sk-text); --bs-table-hover-bg: var(--sk-wash-accent); --bs-table-active-color: var(--sk-text); --bs-table-active-bg: var(--sk-wash-accent-strong); } .popover { --bs-popover-bg: var(--sk-surface-raised); --bs-popover-header-bg: var(--sk-surface-inner); --bs-popover-body-color: var(--sk-text); --bs-popover-header-color: var(--sk-text); --bs-popover-border-color: var(--sk-border); } /* Orbitron is the app's heading face. These two @font-face rules are BYTE-FOR-BYTE the same faces general.css:35-45 already declares — same family name, same descriptors, same files — so on an app page this is a duplicate the browser dedupes, and it changes nothing. It exists so the standalone preview page, which does not load general.css, renders the real heading font. Do NOT add weights here that general.css does not declare (e.g. a 700 face pointing at Orbitron-Bold.ttf). That would change how existing pages resolve bold headings, which is exactly the kind of leak this system must not cause. */ @font-face { font-family: Orbitron-Regular; src: url(../fonts/Orbitron-Regular.ttf); font-display: swap; } @font-face { font-family: Orbitron-Regular; font-weight: 500; src: url(../fonts/Orbitron-Bold.ttf); font-display: swap; } /* Where backdrop-filter is unsupported, the translucent surfaces would sit directly on the planets.jpg image and lose the contrast every ratio above assumes. Opaque fallbacks keep the measurements honest. */ @supports not (backdrop-filter: blur(1px)) { :root { --sk-surface-card: #131a28; --sk-surface-inner: #0b1021; --sk-surface-table: #101828; --sk-surface-overlay: rgba(0, 0, 0, 0.85); } } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY -------------------------------------------------------------------------- Bare element selectors are IMPOSSIBLE here. This stylesheet is linked from both master pages, so it loads on all ~74 pages — a global `h1 {}` or `p {}` rule would restyle the entire old design. Element typography is therefore scoped to the components that opt in. Two opt-in surfaces: .sk-card — anything inside a card, which is where most content lives. .sk-prose — a plain wrapper for card-less regions that still want the system's typography. :where() keeps these at zero specificity, so ANY page rule, old or new, still wins. They set a floor, not a law. @scope would express this more directly — `@scope (.sk-card) { h4 { ... } }` — and reached Baseline in Feb 2026 when Firefox 146 shipped it. It is not used because "newly available" is too new for this audience: a player on a Firefox older than 146 would lose all heading styling. Revisit in a year. Headings keep Orbitron (the app's display face) rather than the body Verdana; general.css:104 already does this for the old design, and the system now states it explicitly instead of inheriting it by accident. */ .sk-card :where(h1, h2, h3, h4, h5, h6), .sk-prose :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--sk-space-3); font-family: var(--sk-font-heading); font-weight: var(--sk-weight-semibold); line-height: 1.25; letter-spacing: 0.5px; color: var(--sk-text); text-wrap: balance; } /* Every level is a distinct size. h3 and h4 were both --sk-text-lg, which made two heading levels indistinguishable in the style guide. Card headers are unaffected: .sk-card-header pins its own heading size regardless of level. */ .sk-card :where(h1), .sk-prose :where(h1) { font-size: var(--sk-text-2xl); } .sk-card :where(h2), .sk-prose :where(h2) { font-size: var(--sk-text-xl); } .sk-card :where(h3), .sk-prose :where(h3) { font-size: var(--sk-text-lg); } .sk-card :where(h4), .sk-prose :where(h4) { font-size: var(--sk-text-base); } .sk-card :where(h5, h6), .sk-prose :where(h5, h6) { font-size: var(--sk-text-sm); text-transform: uppercase; letter-spacing: 1px; color: var(--sk-text-muted); } .sk-card :where(p), .sk-prose :where(p) { margin: 0 0 var(--sk-space-3); /* Body copy ran the full card width - 150+ characters per line on a wide monitor, which is roughly twice a comfortable measure. */ max-width: 70ch; font-family: var(--sk-font); font-size: var(--sk-text-base); line-height: 1.6; color: var(--sk-text); text-wrap: pretty; } .sk-card :where(p, h1, h2, h3, h4, h5, h6):last-child, .sk-prose :where(p, h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; } .sk-card :where(small), .sk-prose :where(small) { font-size: var(--sk-text-sm); color: var(--sk-text-muted); } .sk-card :where(strong, b), .sk-prose :where(strong, b) { font-weight: var(--sk-weight-bold); color: var(--sk-text); } .sk-card :where(ul, ol), .sk-prose :where(ul, ol) { margin: 0 0 var(--sk-space-3); padding-left: var(--sk-space-5); font-size: var(--sk-text-base); line-height: 1.6; } /* Links inside a component. _typography.css colours bare `a` #447CFF already; restated so a card is not dependent on that file staying as it is. */ .sk-card :where(a:not(.sk-btn)), .sk-prose :where(a:not(.sk-btn)) { color: var(--sk-link); text-decoration: none; } .sk-card :where(a:not(.sk-btn)):hover, .sk-prose :where(a:not(.sk-btn)):hover { color: var(--sk-link-hover); text-decoration: underline; } /* Icons pick up their colour from context by default; the header rule below is the one place the system tints them. */ .sk-card :where(code, kbd, samp), .sk-prose :where(code, kbd, samp) { font-family: Consolas, Monaco, monospace; font-size: 0.9em; color: var(--sk-text); background: var(--sk-surface-raised); padding: 1px 5px; border-radius: var(--sk-radius-sm); } .sk-prose { font-family: var(--sk-font); font-size: var(--sk-text-base); color: var(--sk-text); } /* ---- Stored markup: HTML a stored procedure wrote ------------------------ Some text reaches a page as markup the database concatenated - the attack report (Attacks_history.AttackerNews) is the first user:
between lines, round the figures, Font Awesome s beside them, one picture. It carries no sk- classes and never will, so this container styles those bare tags from outside. What reaches it has been through AttackReportHtml.ToSafeHtml, which keeps only those tags. The picture is sized here: the procs' own inline style on it is dropped by that helper, and "height: 184" (no unit) never applied anyway. :where() keeps every descendant rule at zero specificity, as sk-prose does. */ .sk-stored-markup { font-family: var(--sk-font); font-size: var(--sk-text-sm); line-height: 1.7; color: var(--sk-text); overflow-wrap: anywhere; } .sk-stored-markup :where(b, strong) { font-weight: var(--sk-weight-bold); color: var(--sk-text); font-variant-numeric: tabular-nums; } .sk-stored-markup :where(i[class*="fa-"]) { color: var(--sk-accent); margin-right: 2px; } /* A stored report opens with its picture and then a
: after a block image that
is an empty line, a gap between picture and text (and, where the picture is missing - the battle images are only on the live site - a gap at the top of the report). The picture's own margin is the spacing. */ .sk-stored-markup img:first-child + br { display: none; } /* A heading row for a report panel: what it is on the left, the outcome badge on the right (Attack.aspx's result card). */ .sk-stored-markup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-2); margin-bottom: var(--sk-space-2); } .sk-stored-markup :where(a) { color: var(--sk-link); } .sk-stored-markup :where(img) { display: block; max-width: 100%; max-height: 184px; width: auto; height: auto; margin: 0 auto var(--sk-space-2); border-radius: var(--sk-radius-sm); } /* The report on a panel of its own, for when there is a picture or a clip behind it (Attack.aspx's result card plays one): thin text straight over explosions does not read. The backing is the surface for content over imagery; the art stays visible round the panel. The panel is centred and its lines capped at 70ch - a card-wide line of prose is hard to follow back to its start - while the text in it stays left-aligned. On a phone the cap is wider than the card, so the panel takes the card's width. Attack history's expanded report does not use it (nothing behind it). */ .sk-stored-markup--panel { max-width: 70ch; margin-inline: auto; padding: var(--sk-space-3) var(--sk-space-4); /* 75% opaque, not --sk-surface-on-image's 92%: the clip and its still show through behind the report (Attack's result card - the owner, 2026-10-19). */ background: color-mix(in srgb, var(--sk-surface-on-image-solid) 75%, transparent); border-radius: var(--sk-radius-lg); } /* -------------------------------------------------------------------------- 3. CARD -------------------------------------------------------------------------- */ .sk-card { background: var(--sk-surface-card); backdrop-filter: var(--sk-blur); -webkit-backdrop-filter: var(--sk-blur); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-lg); padding: var(--sk-card-pad); margin-bottom: var(--sk-stack); box-shadow: var(--sk-shadow); color: var(--sk-text); font-family: var(--sk-font); } .sk-card-header { display: flex; align-items: center; /* Wraps rather than squeezing the heading: a badge on a narrow card was forcing "Mine Gold" onto two lines. */ flex-wrap: wrap; gap: var(--sk-space-3); /* No rule under the header: the owner's call (2026-10-18). With no rule there is nothing for a padding-bottom to hold off, so the margin alone spaces the header from the content. */ border-bottom: 0; margin-bottom: var(--sk-space-3); } @media (min-width: 768.02px) { .sk-card-header { margin-bottom: var(--sk-space-5); } } /* Zero-specificity reset: the base stylesheets set their own margins and colours on bare h1-h6. */ .sk-card-header :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--sk-font-heading); font-size: var(--sk-text-lg); font-weight: var(--sk-weight-semibold); letter-spacing: 0.5px; color: var(--sk-text); text-wrap: balance; /* The heading takes the slack, so everything after it packs against the far end — badge, help trigger, or both. The badge's own margin-left: auto below is not enough once a header carries two trailing elements, and it does nothing at all when the badge is conditional and absent: the trigger would drift back to the heading exactly when there is no kingdom selected. Two auto margins simply share the free space, so the pair still lands right. */ margin-right: auto; } .sk-card-header :where(i) { color: var(--sk-accent); font-size: var(--sk-text-xl); line-height: 1; } /* sk-card-header--eyebrow-mobile: the card's full header on a desktop, an eyebrow on a phone - sk-eyebrow's small muted caps, the icon at that size in the card's hue - the way the action pages head their sections there. For a page that keeps dev's cards on a desktop (Mine Gold), so its phone screen does not open with a stack of large titles. Same (0,1,0) as the two rules above, so it is declared after them. */ @media (max-width: 768px) { .sk-card-header--eyebrow-mobile { gap: var(--sk-space-2); padding-bottom: 0; } .sk-card-header--eyebrow-mobile :where(h1, h2, h3, h4, h5, h6) { font-family: var(--sk-font); font-size: var(--sk-text-min); font-weight: var(--sk-weight-semibold); color: var(--sk-text-muted); text-transform: uppercase; letter-spacing: 0.8px; } .sk-card-header--eyebrow-mobile :where(i) { color: var(--sk-hue, var(--sk-accent)); font-size: var(--sk-text-min); } } /* A collapsed card ends at its header. The rule under the header and the gap after it separate the header from a body; with no body they drew a hairline and an empty strip at the bottom of the card. Two ways a body goes away: :last-child a v-if / server condition left nothing after the header (comment nodes do not count as children). .sk-card--collapsed the body is still there but hidden - v-show, or sk-is-hidden - so the page binds this from the same flag that hides it (Attack's Intelligence card). Qualified with .sk-card / .sk-card-inner so it outranks the variants that set the header's own spacing (--compact, --header-fill, --host), which are (0,2,0) and declared later. No card in the markup has a header as its only child while open, so an open card is untouched. The width alone, not the border shorthand: the style stays solid, so the width can ease (below). */ .sk-card > .sk-card-header:last-child, .sk-card-inner > .sk-card-header:last-child, .sk-card.sk-card--collapsed > .sk-card-header { border-bottom-width: 0; padding-bottom: 0; margin-bottom: 0; } /* The same, on a phone only: for a card or panel whose body collapses on a phone alone and is always shown on a wider screen (the body hidden with sk-hide-mobile, this class bound to the same flag). Attack's Target analytics panel shuts to its header on a phone. */ @media (max-width: 768px) { .sk-card.sk-card--collapsed-mobile > .sk-card-header, .sk-card-inner.sk-card--collapsed-mobile > .sk-card-header { border-bottom-width: 0; padding-bottom: 0; margin-bottom: 0; } } /* A card that collapses in place: sk-card--collapsible always, sk-card--collapsed bound to the same flag as the body's . The header's rule and gap ease out (and back) with the slide - same duration, same easing, starting on the same flip - so header and body close as one motion. Without it they went the instant the flag flipped and the body slid after: a jump, then the slide. */ .sk-card.sk-card--collapsible > .sk-card-header { transition: border-bottom-width var(--sk-transition-slow), padding-bottom var(--sk-transition-slow), margin-bottom var(--sk-transition-slow); } /* Shut, a collapsible card is one slim bar: less padding above and below its header, and the Show / Hide control without the margin it keeps between a body and what follows. At full padding a shut Attack history read heavier than the ATTACK button over it (the owner, 2026-10-19). Every shut collapsible card, Defender Intelligence on a phone too. */ .sk-card.sk-card--collapsible.sk-card--collapsed { padding-top: var(--sk-space-3); padding-bottom: var(--sk-space-3); } .sk-card-header button.sk-disclosure { margin: 0; } /* ---- Header with a title group and actions ------------------------------- The header already packs anything after a bare heading against its far end. These three cover the two cases that did not work: .sk-card-title a heading WITH a subtitle under it. A wrapper div is not a heading, so it takes the slack itself - and min-width: 0 lets a long name wrap inside it rather than pushing the actions onto a line of their own. .sk-card-subtitle the line under the title: coordinates, a date. .sk-card-actions the buttons. Never wraps, never shrinks, so on a phone they stay on the title's line and the TITLE gives way.

Name

(X:6;Y:4) Sector 13
The heading inside a title group inherits its colour instead of forcing --sk-text, so a state class on the header (Profile's dead / sl / newbie) still colours the name. Declared after the header's own heading rule, so the (0,1,0) ties break this way. */ .sk-card-title { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--sk-space-1); min-width: 0; margin-right: auto; } .sk-card-title > :where(h1, h2, h3, h4, h5, h6) { margin-right: 0; color: inherit; overflow-wrap: break-word; } .sk-card-subtitle { color: var(--sk-text-muted); font-size: var(--sk-text-xs); letter-spacing: 0.5px; text-transform: uppercase; } .sk-card-actions { display: flex; flex: none; align-items: center; gap: var(--sk-space-2); } /* A CTA among a header's actions, on a phone: sk-btn--cta's 28px sides are sized for a page's committing action, and beside a heading and a badge they push the actions onto a line of their own (Attack's Simulate, next to "Powerless ON", came out 5px too wide at 375px). Narrower sides keep the header on one line and the button its icon and word. (0,2,1), to beat button.sk-btn--cta's (0,1,1) wherever either is declared. */ @media (max-width: 768px) { .sk-card-actions > button.sk-btn--cta, .sk-card-actions > a.sk-btn--cta { padding-inline: var(--sk-space-3); } } /* A header that names the PAGE's subject - a profile, a kingdom - rather than one section of it: the title a step up from a section heading. */ .sk-card-header--lead :where(h1, h2, h3, h4, h5, h6) { font-size: var(--sk-text-2xl); letter-spacing: 1px; } /* Cards do not nest. A control that renders its own sk-card -- SOK does, and has to, because it also stands alone on Probe and ProbeHistory -- must not paint a second glass pane, a second border and a second set of padding when a page drops it inside a card of its own. Flattened rather than forbidden, so the control needs no knowledge of where it was placed. sk-card-inner is the deliberate way to recess something inside a card, and it is untouched by this. */ /* OPT-IN, via the host. The first version of this matched .sk-card .sk-card and flattened every nested card everywhere -- including the SOK inside ProbeHistory's entry cards, which is nested but is NOT being presented as one panel with its host and lost its surface entirely. A page that means to absorb a control's card says so; every other nesting keeps its own. */ .sk-card--host .sk-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; } /* The absorbed card's header rule goes too. The host has already drawn one under its own title, so two hairlines landed a few lines apart and read as a double border rather than as two sections. */ .sk-card--host .sk-card .sk-card-header { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sk-space-3); } /* A card that fills the height of its column instead of stopping at its content. For a two-column layout where one side is a single card and the other is a stack of several: the tall side sets the height and the short one ends halfway down, leaving the split looking unfinished. Desktop only. Below the split's own breakpoint the columns are stacked and there is no neighbour to match, so stretching would only add dead space. The height comes from the flex chain above -- sk-split stretches its children and sk-stack is a flex column -- so this only has to claim the slack. Nothing is asked of the card's contents, which is what lets a shared control keep its own markup. */ @media (min-width: 768.02px) { .sk-card--fill { flex: 1; } } /* A card that is a flex column, for a card with one child that should take the height the card has spare - sk-verdict on Attack's Summary, whose card the split stretches to the Deploy card's height. Pair with the child's own flex: 1. In a block card the header's margin-bottom and the next child's margin-top collapse into one; in a flex column they add up. Zeroing the second keeps the gap under the header what every other card shows. */ .sk-card--column { display: flex; flex-direction: column; } .sk-card--column > .sk-card-header + * { margin-top: 0; } .sk-card-inner { background: var(--sk-surface-inner); border: 1px solid var(--sk-border); border-radius: var(--sk-radius); padding: var(--sk-space-3); box-shadow: var(--sk-shadow-inset); transition: border-color var(--sk-transition), box-shadow var(--sk-transition); } @media (min-width: 768.02px) { .sk-card-inner { padding: var(--sk-space-4) var(--sk-space-5); } } /* ---- Kingdom imagery: a planet behind the card, a race badge in its corner -- One component, two pages: the Status page's Military Overview card (which is the own-kingdom SOK's host) and the Profile page's main card. Both get it the same way -- KingdomImagery.ImageryClass adds this class and KingdomImagery.ImageryVars declares the two urls -- so the look is defined once here and the pages only say WHICH kingdom. THREE BACKGROUND LAYERS, first is topmost: 1. a scrim that fades from light at the top to nearly solid page colour 2. the planet image, centred and covering 3. (the element's own background-color, untouched) with the race badge above them as an element - .sk-kd-imagery-race below. The scrim is the only reason this is legible. backdrop-filter cannot help: it filters what is BEHIND an element, and these images are ON it, so the card's --sk-blur leaves them at full brightness. The gradient runs 40% to 92% of --sk-surface-page down the card, which is chosen around what sits there: the identity band is at the top and gets the planet nearly clear, while the dense report below it lands on what is effectively the page colour. Ice Giant and Helium are the bright ones to check any change against. The race badge sits ABOVE the scrim on purpose. It lands in the darkest part of the gradient, and a badge faded into that is a smudge rather than a mark. The race badge HUGS THE BOTTOM EDGE of the padding box, so its feet sit on the card's inner border edge rather than being lifted off it by the card's own padding. The corner radius clips a sliver of it, which is what makes it read as standing ON the card rather than floating inside it. var(..., none) on the url is load-bearing. A custom property that is not set makes the whole background-image declaration invalid at computed-value time -- not just its own layer -- so without the fallback a card with the class but no declared planet would lose the scrim too. */ .sk-kd-imagery { /* The containing block for .sk-kd-imagery-race, and its own stacking context so that layer's z-index: -1 lands ABOVE this card's background and BELOW its content. backdrop-filter already makes one on both cards; isolation says so on purpose rather than by accident. */ position: relative; isolation: isolate; background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-surface-page) 40%, transparent) 0%, color-mix(in srgb, var(--sk-surface-page) 78%, transparent) 42%, color-mix(in srgb, var(--sk-surface-page) 92%, transparent) 100%), var(--sk-planet-img, none); background-position: center, center; background-size: cover, cover; background-repeat: no-repeat; } /* ---- The race badge: an image, or a video that plays and becomes the image -- It was the top background layer; it is an element now because it can be a video, and a background cannot. Every measurement below reproduces what that layer did, so the image lands on exactly the same pixels: the LAYER is the card's padding box (inset: 0 on a positioned card is the padding box, which is where background-origin put it) with the card's corner radius, clipping what spills - the corner still takes its sliver. The overflow is here, not on the card, so nothing else in the card starts clipping. the MEDIA is right: 0; bottom: 0; height 420px (240px on a phone), width from its own ratio - "auto 420px" as a background-size. max-width: none because a background was never capped at the card's width either. z-index: -1 inside the card's isolated stacking context: above the scrim and the planet, below every line of text - the order it had as a layer. pointer-events: none so it can never take a click meant for the report. The video and the image are the same size box, so the swap in kd-race-video.js moves nothing. --waiting: the video is IN the layout but not seen until it is actually playing. It has to occupy its box, because that box is what the IntersectionObserver in kd-race-video.js watches to know it has scrolled into view - sk-is-hidden (display: none) would give it no box at all. And it must not show the poster meanwhile, or the viewer sees the image, then a blink, then the video. opacity, not visibility, so the fade-in on reveal has something to animate. */ .sk-kd-imagery-race { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } .sk-kd-imagery-race-media { position: absolute; right: 0; bottom: 0; display: block; width: auto; max-width: none; height: 420px; transition: opacity var(--sk-transition); } .sk-kd-imagery-race-media--waiting { opacity: 0; } /* Smaller on a phone, where the card is a third of the width it has on the desktop split and 420px of badge would be taller than most of the report. */ @media (max-width: 768px) { .sk-kd-imagery-race-media { height: 240px; } } /* -------------------------------------------------------------------------- 4. BUTTON -------------------------------------------------------------------------- */ .sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-space-1); box-sizing: border-box; /* Defensive: base CSS sets min-width on some buttons in this app. */ min-width: 0; width: auto; padding: var(--sk-space-2) var(--sk-space-3); background: var(--sk-wash-accent); border: 1px solid var(--sk-border-accent); border-radius: var(--sk-radius-sm); color: var(--sk-text-on-accent); font-family: var(--sk-font); font-size: var(--sk-text-xs); font-weight: var(--sk-weight-semibold); line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; /* filter and box-shadow are in the list on purpose: the CTA animates with those, and leaving them out is what made its hover snap instead of ease. */ transition: background-color var(--sk-transition), border-color var(--sk-transition), color var(--sk-transition), box-shadow var(--sk-transition), filter var(--sk-transition), transform var(--sk-transition); } .sk-btn:hover { background: color-mix(in srgb, var(--sk-hue, var(--sk-accent)) 30%, transparent); border-color: var(--sk-border-strong); color: var(--sk-text-on-accent); text-decoration: none; transform: translateY(-1px); } /* :focus-visible, not :focus — a mouse click should not paint a focus ring. */ .sk-btn:focus-visible { outline: 2px solid var(--sk-border-strong); outline-offset: 2px; } .sk-btn:disabled, .sk-btn[disabled], a.sk-btn.aspNetDisabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* The same idea for a control that is inert only at an EDGE of its range - a Move up on the first row of a list, a Move down on the last - rather than disabled outright. It carries aria-disabled and this class, never the `disabled` attribute, for the reason spelled out under "A Two classes, (0,2,0), so it beats button.sk-btn's own (0,1,1) restatement without !important. Moved here from buildings-page.css (.buildings-page button.buildings-columns-trigger), where only Buildings had it - Military's own trigger looked like a different button for that reason. */ .sk-btn.sk-btn--settings { border-color: color-mix(in srgb, var(--sk-hue-deep, var(--sk-accent)) 55%, transparent); background: color-mix(in srgb, var(--sk-hue-deep, var(--sk-accent)) 18%, transparent); color: var(--sk-hue, var(--sk-accent)); } /* A button that wears its hue at rest, not only on hover, for a row of actions where the colour IS the meaning. Alliance Control's relation buttons are the case: War red, NAP cyan, Barricade green, Ally gold, the same hue as the relation's card stripe - on a phone that colour is the safeguard against tapping Declare War where Send NAP was meant. Resting tint is the same formula as sk-btn--settings above; hover deepens it, where the base sk-btn:hover would swap in a neutral border and label. Pair with a hue class: Declare War The a:link / a:visited selectors exist because a LinkButton renders and a.sk-btn:link (0,2,1) would repaint the label --sk-text-on-accent. A disabled LinkButton (a relation on cooldown) has no href, keeps its hue and takes a.sk-btn.aspNetDisabled's shared fade - the countdown in its label says why. */ .sk-btn.sk-btn--hued, a.sk-btn.sk-btn--hued:link, a.sk-btn.sk-btn--hued:visited { border-color: color-mix(in srgb, var(--sk-hue-deep, var(--sk-accent)) 55%, transparent); background: color-mix(in srgb, var(--sk-hue-deep, var(--sk-accent)) 18%, transparent); color: var(--sk-hue, var(--sk-accent)); } .sk-btn.sk-btn--hued:hover, a.sk-btn.sk-btn--hued:hover { border-color: var(--sk-hue-deep, var(--sk-accent)); background: color-mix(in srgb, var(--sk-hue-deep, var(--sk-accent)) 30%, transparent); color: var(--sk-hue, var(--sk-accent)); } /* A worded button that becomes an icon button under 768px - the button counterpart of sk-badge--icon-mobile. The word on a desktop, the glyph alone in a phone's crowded section head. The word stays in the accessibility tree at every width; still give the button a title for the glyph's hover. The phone rules are qualified with the element and come AFTER button.sk-btn--icon-sm above: button.sk-btn is restated at (0,1,1) in §4b, and a bare class would lose its padding and size to it. */ .sk-btn--icon-mobile > :where(i) { display: none; } @media (max-width: 768px) { .sk-btn--icon-mobile, button.sk-btn--icon-mobile, /* A CTA in a card header gets 12px sides on a phone at (0,2,1) - beat it here (declared later), or the glyph sits off-centre in the circle. */ .sk-card-actions > button.sk-btn--icon-mobile, .sk-card-actions > a.sk-btn--icon-mobile { width: 32px; height: 32px; padding: 0; border-radius: 50%; } .sk-btn--icon-mobile > :where(i) { display: inline; } .sk-btn--icon-mobile > .sk-btn-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* sk-btn--keep-icon: an sk-btn--icon-mobile button that keeps its glyph beside the word on a desktop too (Attack's Simulate) - only the word goes on a phone. */ .sk-btn--icon-mobile.sk-btn--keep-icon > :where(i) { display: inline; } /* The opposite of sk-btn--icon-mobile: an icon button on a desktop that shows its label as well on a phone, where a bare arrow beside two selects says too little. Markup: sk-btn sk-btn--icon sk-btn--label-mobile, the label in an sk-btn-text span before the icon. The kingdom chooser's "Change". */ @media (min-width: 769px) { .sk-btn--label-mobile > .sk-btn-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* (0,2,1): clears button.sk-btn--icon's 32px circle, (0,1,1), on a phone. */ @media (max-width: 768px) { button.sk-btn--icon.sk-btn--label-mobile { width: auto; padding: 0 var(--sk-space-3); border-radius: var(--sk-radius-sm); } } /* Same trap, same fix: button.sk-btn (0,1,1) sets the wash background and would beat .sk-btn--on-image (0,1,0), leaving the button translucent on the very backdrop the modifier exists for. */ input[type="submit"].sk-btn--on-image, input[type="button"].sk-btn--on-image, a.sk-btn--on-image, button.sk-btn--on-image { background: var(--sk-surface-on-image); border-color: var(--sk-border-strong); color: var(--sk-text); box-shadow: var(--sk-shadow); } input[type="submit"].sk-btn--on-image:hover, input[type="button"].sk-btn--on-image:hover, a.sk-btn--on-image:hover, button.sk-btn--on-image:hover { background: color-mix(in srgb, var(--sk-hue, var(--sk-accent)) 30%, var(--sk-surface-on-image)); border-color: var(--sk-hue, var(--sk-accent)); color: var(--sk-text); } /* Same trap, the two status modifiers. button.sk-btn above is (0,1,1) and paints the accent wash; .sk-btn--success / --danger are (0,1,0), so on a real