/* * What has not moved to the design system yet. * * Bootstrap is gone and every view is ported, so this is no longer a layer "on * top of" anything — it is the residue: the theme variables, the ladder colour * table, the pieces the C# crest helper emits, and a handful of small * components the ported views still name. Styles/app.css is where new work goes. * * Vazirmatn is vendored and its @font-face lives in Styles/app.css — declared * once, there. Do not switch the font to a CDN: Google Fonts and most CDNs are * variably reachable from Iran, and a blocked font request means a multi-second * blank render for exactly the audience this site exists for. * * ── The two layers below are not decoration. ────────────────────────────── * * This file has to sit on BOTH sides of Tailwind, because its contents want * opposite things. * * `legacy` is declared before `@import "tailwindcss"` in Styles/app.css and so * ranks below every Tailwind layer. That is what makes the design tokens win: * the old `--lfg-*` palette and `body` colours are kept only as a fallback for * anything not yet ported, and must lose to app.css. * * `components` is Tailwind's own component layer, which this file joins by * name. It ranks ABOVE Tailwind's base reset and below its utilities — which is * exactly what a component wants. Everything in it had to move: Tailwind's base * sets `border: 0; margin: 0; padding: 0` on `*` and `display: block` on `svg`, * and from the `legacy` layer a component's own border, padding and display * lost to that reset every time. Measured, not guessed — the theme toggle was * showing a sun AND a moon, and .filter-panel had neither its border nor its * padding. * * So: variables and page defaults go in `legacy`, components go in * `components`. A rule in the wrong one is silently dropped rather than noisy. */ @layer legacy { /* ══ Theme ═════════════════════════════════════════════════════════════════ Light is the base and dark is the override, because that is the default the product ships with — writing it the other way round would mean the common case is the one carrying every override. Both themes are explicit rather than driven by prefers-color-scheme: the toggle has to be able to disagree with the operating system, and a stored choice must win over it. The script applies the stored value before first paint so the page never flashes the wrong theme. */ :root { color-scheme: light; --lfg-bg: #eef1f6; --lfg-surface: #ffffff; --lfg-surface-2: #f4f6fa; --lfg-border: #dbe1ea; --lfg-text: #10141c; --lfg-muted: #5a6678; /* The gold has to do two jobs. On white it needs to be dark enough to read as text, so the accent is deepened and the original League gold is kept separately for fills and borders where contrast does not apply. */ --lfg-accent: #9a7420; --lfg-accent-soft: #c8aa6e; --lfg-accent-ink: #ffffff; --lfg-accent-2: #0f857c; --lfg-shadow: 0 1px 2px rgba(16, 20, 28, 0.06), 0 4px 12px rgba(16, 20, 28, 0.05); --lfg-crest-sheen: rgba(255, 255, 255, 0.55); } [data-theme="dark"] { color-scheme: dark; --lfg-bg: #0f1218; --lfg-surface: #171b23; --lfg-surface-2: #1e2430; --lfg-border: #2a3140; --lfg-text: #e6e9ef; --lfg-muted: #98a2b3; --lfg-accent: #c8aa6e; /* League gold */ --lfg-accent-soft: #c8aa6e; --lfg-accent-ink: #17130a; --lfg-accent-2: #0ac8b9; /* League teal */ --lfg-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --lfg-crest-sheen: rgba(255, 255, 255, 0.28); } /* ══ Ladder colours ════════════════════════════════════════════════════════ One definition per tier, consumed by both the row's rail and the crest gradient, so a rank can never be one colour in the list and another in the emblem. The light set is darkened: Gold and Challenger as they appear on a dark background are unreadable on white. Custom properties only, so the layer they sit in cannot cost them a fight with the base reset — they belong with the theme, and this is the theme. These class names are COMPOSED, not written out in markup — `tier-@rank.Tier` in the views and `"crest--" + tier` in HtmlHelpers.cs. A dead-selector scan will report every one of them as unused. It is wrong; deleting them blanks every rank emblem on the site. */ .tier-Unranked, .crest--Unranked { --tier-light: #98a2b3; --tier-dark: #6b7686; } .tier-Iron, .crest--Iron { --tier-light: #7a7f88; --tier-dark: #4a4e55; } .tier-Bronze, .crest--Bronze { --tier-light: #a9673f; --tier-dark: #6d3d22; } .tier-Silver, .crest--Silver { --tier-light: #8b9bb0; --tier-dark: #5d6b7d; } .tier-Gold, .crest--Gold { --tier-light: #d6a52f; --tier-dark: #8a6413; } .tier-Platinum, .crest--Platinum { --tier-light: #3fa89e; --tier-dark: #1f6b64; } .tier-Emerald, .crest--Emerald { --tier-light: #2bab63; --tier-dark: #146b39; } .tier-Diamond, .crest--Diamond { --tier-light: #5a76e0; --tier-dark: #2f45a8; } .tier-Master, .crest--Master { --tier-light: #a746d6; --tier-dark: #6d1f9c; } .tier-Grandmaster, .crest--Grandmaster { --tier-light: #d93a51; --tier-dark: #97162a; } .tier-Challenger, .crest--Challenger { --tier-light: #d9a01f; --tier-dark: #96690c; } [data-theme="dark"] .tier-Unranked, [data-theme="dark"] .crest--Unranked { --tier-light: #5a6577; --tier-dark: #3a424f; } [data-theme="dark"] .tier-Iron, [data-theme="dark"] .crest--Iron { --tier-light: #8b8f96; --tier-dark: #4a4e55; } [data-theme="dark"] .tier-Bronze, [data-theme="dark"] .crest--Bronze { --tier-light: #c2825a; --tier-dark: #7d4a2c; } [data-theme="dark"] .tier-Silver, [data-theme="dark"] .crest--Silver { --tier-light: #c3d0de; --tier-dark: #7c8b9d; } [data-theme="dark"] .tier-Gold, [data-theme="dark"] .crest--Gold { --tier-light: #f2cd6a; --tier-dark: #b8862a; } [data-theme="dark"] .tier-Platinum, [data-theme="dark"] .crest--Platinum { --tier-light: #7fd8cd; --tier-dark: #2f8b83; } [data-theme="dark"] .tier-Emerald, [data-theme="dark"] .crest--Emerald { --tier-light: #5fe08c; --tier-dark: #1e8a4c; } [data-theme="dark"] .tier-Diamond, [data-theme="dark"] .crest--Diamond { --tier-light: #9db4ff; --tier-dark: #4a63d6; } [data-theme="dark"] .tier-Master, [data-theme="dark"] .crest--Master { --tier-light: #d38cf5; --tier-dark: #8a2fc4; } [data-theme="dark"] .tier-Grandmaster, [data-theme="dark"] .crest--Grandmaster { --tier-light: #ff7183; --tier-dark: #c0243a; } [data-theme="dark"] .tier-Challenger, [data-theme="dark"] .crest--Challenger { --tier-light: #ffe08a; --tier-dark: #d99a1f; } /* ══ Page defaults ═════════════════════════════════════════════════════════ Deliberately below Tailwind. `background` and `color` here are the fallback for anything not yet ported; app.css's base sets the real token values and must win, which is why this block stays in `legacy`. The layout properties are not contested by anything and apply either way. */ html { min-height: 100%; } body { background: var(--lfg-bg); color: var(--lfg-text); display: flex; flex-direction: column; min-height: 100vh; /* Persian needs a little more line height than Latin at the same size. */ line-height: 1.85; } /* Isolate LTR values inside RTL prose. Without this a Riot ID containing digits renders visually scrambled. */ bdi { unicode-bidi: isolate; } } /* ══════════════════════════════════════════════════════════════════════════ Components. Joins Tailwind's own `components` layer by name, so these rank above its base reset and below its utilities. See the header. ══════════════════════════════════════════════════════════════════════════ */ @layer components { .site-footer { border-top: 1px solid var(--lfg-border); background: var(--lfg-surface); } /* Each theme shows the icon for the mode you would switch TO, which is the thing the control actually does. The button itself is a ported `ui-btn`; only the icon swap is left here — and it has to outrank Tailwind's `svg { display: block }` or both icons show at once. */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } [data-theme="dark"] .theme-toggle__sun { display: block; } [data-theme="dark"] .theme-toggle__moon { display: none; } /* ══ Feed rows ═════════════════════════════════════════════════════════════ The board is a ladder, so tier is carried by structure rather than by a label: every row is anchored by its crest and rimmed in its tier colour, and scrolling reads as bands of rank before you read a word. That is the one loud idea here; everything around it stays deliberately quiet. The row itself is ported; `.rows` is the container the modal script also scopes its trigger query to. */ .rows { display: flex; flex-direction: column; gap: 0.4rem; } /* Rendered once, hidden, and cloned into the dialog — see _RequestModal. */ .crest-sprite { display: none; } /* ── Crest trust state ───────────────────────────────────────────────────── Solidity encodes trust. A proven crest keeps its sheen and carries a check; an unproven one fades. This is the point of the whole verification design — the rail still shows the rank the author CLAIMED, so the claim itself has to look cheaper when nobody has stood behind it. */ .crest__badge { display: none; } .crest--verified .crest__badge { display: block; } .crest--unproven { opacity: 0.55; } .crest--unproven .crest__sheen { display: none; } /* ── Cards ─────────────────────────────────────────────────────────────── */ .lfg-card { transition: border-color 0.15s ease, transform 0.15s ease; } .lfg-card:hover { border-color: var(--lfg-accent); transform: translateY(-2px); } /* The card is the only thing left that MOVES on hover, so it is the only thing that needs this. The guard used to live on `.row-item`, which no longer exists — deleting that rule without moving this here would have quietly dropped the site's one reduced-motion accommodation. */ @media (prefers-reduced-motion: reduce) { .lfg-card { transition: none; } .lfg-card:hover { transform: none; } } .lfg-card__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--lfg-border); } .lfg-card__body { padding: 1.1rem; } .lfg-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem; border-top: 1px solid var(--lfg-border); background: var(--lfg-surface-2); /* Logical properties so the radius follows the writing direction. */ border-end-start-radius: 0.75rem; border-end-end-radius: 0.75rem; } /* ── Attribute rows ────────────────────────────────────────────────────── */ .lfg-attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem 1.25rem; margin: 0; } .lfg-attr { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .lfg-attr__label { color: var(--lfg-muted); font-size: 0.875rem; flex: none; } .lfg-attr__value { font-weight: 600; overflow-wrap: anywhere; } /* ── Badges ────────────────────────────────────────────────────────────── */ .lfg-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--lfg-border); background: var(--lfg-surface-2); color: var(--lfg-text); } .lfg-badge--verified { border-color: rgba(10, 200, 185, 0.5); color: var(--lfg-accent-2); } /* Deliberately grey and checkmark-free: a rank we looked up but did not prove ownership of must not carry a trust signal. */ .lfg-badge--declared { color: var(--lfg-muted); } .lfg-badge--closed { border-color: rgba(255, 255, 255, 0.15); color: var(--lfg-muted); } .lfg-badge--region { border-color: rgba(200, 170, 110, 0.45); color: var(--lfg-accent); } /* ── Rank text ───────────────────────────────────────────────────────────── The .tier-* classes only carry the ladder variables. Colouring text is opted into with this class alongside them — otherwise putting .tier-Emerald on a row would tint every word inside it green. */ .rank-text { color: var(--tier-light); font-weight: 700; } /* ── Win rate ────────────────────────────────────────────────────────────── Shown only where it is real. An account with no games this split has no win rate, and rendering "0%" there would read as a terrible player rather than a new season. Built in JavaScript by the modal, so these class names are string literals in Home/Index.cshtml rather than markup. */ .record { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin-top: 0.15rem; } .record__wl { font-size: 0.85rem; font-weight: 700; } .record__w { color: var(--lfg-accent-2); } .record__l { color: #c0392b; } [data-theme="dark"] .record__l { color: #ff7183; } .record__sep { color: var(--lfg-muted); margin-inline: 0.15rem; } .record__rate { font-size: 0.72rem; color: var(--lfg-muted); } .record__rate--strong { color: var(--lfg-accent-2); font-weight: 700; } .record__none { font-size: 0.72rem; color: var(--lfg-muted); font-style: italic; } /* ── Odds and ends ─────────────────────────────────────────────────────── */ .tg-icon-lg { color: #229ed9; } .filter-panel { background: var(--lfg-surface); border: 1px solid var(--lfg-border); border-radius: 0.75rem; padding: 1rem; } .champion-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem; border-radius: 0.4rem; background: var(--lfg-surface-2); border: 1px solid var(--lfg-border); font-size: 0.8125rem; } .empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--lfg-muted); } }